How to Create A Nested Menus in Tailwind CSS?

Last Updated : 04 Sep, 2024

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
Creating Nested Menus using Tailwind CSS and Javascript

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.

HTML

<!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 .

HTML

<!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:

How To Create A Pricing Table in Tailwind CSS and Next.js?

gauravggeeksforgeeks

Improve

Article Tags :

How to Create A Nested Menus in Tailwind CSS?

Prerequisites

These are the approaches to create a nested menu in Tailwind CSS:

Basic Nested Menus using Tailwind CSS

Creating Nested Menus using Tailwind CSS and Javascript

Similar Reads

Thank You!

What kind of Experience do you want to share?