How to Create A Nested Menus in Tailwind CSS?
Last Updated :
04 Sep, 2024
Improve
TailwindCSS allows designers to create highly customizable and visually appealing interfaces using utility-first classes. With its extensive set of utilities, you can build nested menus that are both responsive and stylish. Tailwind's flexible styling options make it easy to design complex, nested menu structures without writing custom CSS.
Prerequisites
These are the approaches to create a nested menu in Tailwind CSS:
Table of Content
Basic Nested Menus using Tailwind CSS
This approach explains how to make interactive nested menus using Tailwind CSS and CSS- only, avoiding the need for JavaScript. We can use the 'peer' class with checkbox inputs to simulate toggle behavior using CSS. This method uses hidden checkboxes and labels to manage the state of menus. Make a proper setup by importing tailwind CSS into your application.
Example: Below given example demonstrates Nested Menus using Tailwind CSS for which you have to add a CDN link of Tailwind CSS and design the menu container by creating a div to hold the menu.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Nested Menu with Tailwind CSS</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
body {
@apply bg-gray-100 text-gray-900;
}
</style>
</head>
<body class="flex items-center justify-center h-screen">
<div class="w-80">
<h1 class="text-3xl font-bold text-green-500
mb-4 text-center">GeeksforGeeks</h1>
<nav class="bg-white shadow-lg rounded-lg overflow-hidden">
<ul class="space-y-2">
<li>
<input type="checkbox" id="menu1" class="peer hidden">
<label for="menu1" class="w-full px-4 py-2 bg-gray-100
hover:bg-gray-200 cursor-pointer
rounded-lg flex items-center justify-between">
Algorithms
<svg class="w-4 h-4 transform peer-checked:rotate-90
transition-transform
duration-200" fill="none"
stroke="currentColor"
viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" d="M19 9l-7 7-7-7">
</path>
</svg>
</label>
<ul class="pl-4 mt-2 space-y-1 bg-gray-50 hidden
peer-checked:block">
<li>
<input type="checkbox" id="menu1-1" class="peer hidden">
<label for="menu1-1" class="w-full px-4 py-2 bg-gray-200
hover:bg-gray-300
cursor-pointer
rounded-lg flex items-center justify-between">
Sorting
<svg class="w-4 h-4 transform peer-checked:rotate-90
transition-transform duration-200" fill="none"
stroke="currentColor"
viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M19 9l-7 7-7-7"></path>
</svg>
</label>
<ul class="pl-4 mt-1 space-y-1 bg-gray-100 hidden
peer-checked:block">
<li>
<a href="#" class="block px-4 py-2 text-left
hover:bg-gray-300
rounded-lg">Bubble
Sort</a>
</li>
<li>
<a href="#" class="block px-4 py-2 text-left
hover:bg-gray-300
rounded-lg">Merge
Sort</a>
</li>
</ul>
</li>
<li>
<input type="checkbox" id="menu1-2"
class="peer hidden">
<label for="menu1-2" class="w-full px-4 py-2 bg-gray-200 hover:bg-gray-300
cursor-pointer
rounded-lg flex items-center justify-between">
Searching
<svg class="w-4 h-4 transform peer-checked:rotate-90
transition-transform duration-200"
fill="none" stroke="currentColor"
viewBox="0 0 24 24">
<path stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 9l-7 7-7-7"></path>
</svg>
</label>
<ul class="pl-4 mt-1 space-y-1 bg-gray-100 hidden
peer-checked:block">
<li>
<a href="#" class="block px-4 py-2 text-left
hover:bg-gray-300
rounded-lg">Binary
Search</a>
</li>
<li>
<a href="#" class="block px-4 py-2 text-left
hover:bg-gray-300
rounded-lg">Linear
Search</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<input type="checkbox" id="menu2" class="peer hidden">
<label for="menu2" class="w-full px-4 py-2 bg-gray-100 hover:bg-gray-200
cursor-pointer
rounded-lg flex items-center justify-between">
Data Structures
<svg class="w-4 h-4 transform peer-checked:rotate-90
transition-transform
duration-200" fill="none"
stroke="currentColor"
viewBox="0 0 24 24">
<path stroke-linecap="round" s
troke-linejoin="round"
stroke-width="2" d="M19 9l-7 7-7-7">
</path>
</svg>
</label>
<ul class="pl-4 mt-2 space-y-1 bg-gray-50
hidden peer-checked:block">
<li>
<input type="checkbox" id="menu2-1" class="peer hidden">
<label for="menu2-1" class="w-full px-4 py-2 bg-gray-200
hover:bg-gray-300 cursor-pointer
rounded-lg flex items-center justify-between">
Trees
<svg class="w-4 h-4 transform peer-checked:rotate-90
transition-transform duration-200"
fill="none" stroke="currentColor"
viewBox="0 0 24 24">
<path stroke-linecap="round"
stroke-linejoin="round" stroke-width="2"
d="M19 9l-7 7-7-7"></path>
</svg>
</label>
<ul class="pl-4 mt-1 space-y-1 bg-gray-100 hidden
peer-checked:block">
<li>
<a href="#" class="block px-4 py-2 text-left
hover:bg-gray-300
rounded-lg">Binary
Trees</a>
</li>
<li>
<a href="#" class="block px-4 py-2 text-left
hover:bg-gray-300
rounded-lg">AVL
Trees</a>
</li>
</ul>
</li>
<li>
<input type="checkbox" id="menu2-2" class="peer hidden">
<label for="menu2-2" class="w-full px-4 py-2 bg-gray-200 hover:bg-gray-300
cursor-pointer rounded-lg flex items-center
justify-between">
Graphs
<svg class="w-4 h-4 transform peer-checked:rotate-90
transition-transform duration-200"
fill="none" stroke="currentColor"
viewBox="0 0 24 24">
<path stroke-linecap="round"
stroke-linejoin="round" stroke-width="2"
d="M19 9l-7 7-7-7"></path>
</svg>
</label>
<ul class="pl-4 mt-1 space-y-1 bg-gray-100 hidden
peer-checked:block">
<li>
<a href="#" class="block px-4 py-2 text-left
hover:bg-gray-300
rounded-lg">BFS</a>
</li>
<li>
<a href="#" class="block px-4 py-2 text-left
hover:bg-gray-300
rounded-lg">DFS</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</body>
</html>
Output:
Creating Nested Menus using Tailwind CSS and Javascript
Nested menus are great for organizing lot of options in a neat way in your websites. By using Tailwind CSS along with JavaScript you can build stylish and interactive menus with ease. Tailwind CSS makes your website look nice with minimal effort, whereas javascript makes the menus interactive so it can open and close when you click on it .
Example: The below example demonstrates how to create a nested menus in Tailwind CSS with JavaScript. For this, we will design a menu container by creating a div to hold the menu followed by styling .
<!DOCTYPE html>
<head>
<title>GeeksforGeeks Nested Menu</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
body {
@apply bg-gray-100 text-gray-900;
}
</style>
</head>
<body class="flex items-center justify-center h-screen">
<div class="w-80">
<h1 class="text-3xl font-bold text-green-500 mb-4 text-center">
GeeksforGeeks</h1>
<nav class="bg-white shadow-lg rounded-lg overflow-hidden">
<ul class="space-y-2">
<li>
<button
class="w-full px-4 py-2 text-left bg-gray-100
hover:bg-gray-200 focus:outline-none
focus:bg-gray-300 rounded-lg">
Algorithms
<svg class="w-4 h-4 inline-block float-right mt-1
transform rotate-90" fill="none"
stroke="currentColor" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" d="M19 9l-7 7-7-7">
</path>
</svg>
</button>
<ul class="pl-4 mt-2 space-y-1 bg-gray-50 hidden">
<li>
<button
class="w-full px-4 py-2 text-left bg-gray-200
hover:bg-gray-300 focus:outline-none
rounded-lg">
Sorting
</button>
<ul class="pl-4 mt-1 space-y-1 bg-gray-100 hidden">
<li>
<a href="#" class="block px-4 py-2 text-left
hover:bg-gray-300 rounded-lg">
Bubble Sort
</a>
</li>
<li>
<a href="#" class="block px-4 py-2 text-left
hover:bg-gray-300 rounded-lg">
Merge Sort
</a>
</li>
</ul>
</li>
<li>
<button
class="w-full px-4 py-2 text-left bg-gray-200
hover:bg-gray-300 focus:outline-none rounded-lg">
Searching
</button>
<ul class="pl-4 mt-1 space-y-1 bg-gray-100 hidden">
<li>
<a href="#" class="block px-4 py-2 text-left
hover:bg-gray-300 rounded-lg">
Binary Search
</a>
</li>
<li>
<a href="#" class="block px-4 py-2 text-left
hover:bg-gray-300 rounded-lg">
Linear Search
</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<button
class="w-full px-4 py-2 text-left bg-gray-100 hover:bg-gray-200
focus:outline-none focus:bg-gray-300 rounded-lg">
Data Structures
<svg class="w-4 h-4 inline-block float-right mt-1 transform
rotate-90" fill="none"
stroke="currentColor" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" d="M19 9l-7 7-7-7">
</path>
</svg>
</button>
<ul class="pl-4 mt-2 space-y-1 bg-gray-50 hidden">
<li>
<button
class="w-full px-4 py-2 text-left bg-gray-200
hover:bg-gray-300 focus:outline-none rounded-lg">
Trees
</button>
<ul class="pl-4 mt-1 space-y-1 bg-gray-100 hidden">
<li>
<a href="#" class="block px-4 py-2 text-left
hover:bg-gray-300 rounded-lg">
Binary Trees
</a>
</li>
<li>
<a href="#" class="block px-4 py-2 text-left
hover:bg-gray-300 rounded-lg">
AVL Trees
</a>
</li>
</ul>
</li>
<li>
<button
class="w-full px-4 py-2 text-left bg-gray-200
hover:bg-gray-300 focus:outline-none rounded-lg">
Graphs
</button>
<ul class="pl-4 mt-1 space-y-1 bg-gray-100 hidden">
<li>
<a href="#" class="block px-4 py-2 text-left
hover:bg-gray-300 rounded-lg">
BFS
</a>
</li>
<li>
<a href="#" class="block px-4 py-2 text-left
hover:bg-gray-300 rounded-lg">
DFS
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</div>
<script>
document.querySelectorAll('button').forEach(button => {
button.addEventListener('click', function () {
const nestedMenu = this.nextElementSibling;
if (nestedMenu) {
nestedMenu.classList.toggle('hidden');
this.querySelector('svg').classList.toggle('rotate-0');
}
});
});
</script>
</body>
</html>
Output:
