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
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:
Similar Reads
How to Create a Sidebar in NextJS & Tailwind CSS?
In web development, sidebars are commonly used to organize navigation elements and provide quick access to different sections of a website. A sidebar is a vertical menu or panel that is typically positioned on the left or right side of the main content area. Prerequisites:Next.jsTailwindJavaScriptSt
5 min read
How to Install Tailwind CSS with Create React App?
We will see how to set up Tailwind CSS in a React project using the Create React App. Tailwind CSS is a utility-first CSS framework that allows for rapid development of custom user interfaces. When combined with Create React App, it offers a flexible approach to build modern React applications.Prere
2 min read
Create Flyout Menus using Next.js and Tailwind CSS
We'll use Next.js as the framework to set up the project and Tailwind CSS for rapid styling. Tailwind makes it easy to style components without writing custom CSS for each element, keeping the development process smooth and efficient.PrerequisitesNode.js Next.jsTailwind CSSApproach For Creating Flyo
4 min read
How to Add New Colors in Tailwind CSS ?
Tailwind CSS is a popular utility-first CSS framework that offers a wide range of pre-designed styles and classes to simplify the process of styling web applications. However, the default set of colors provided by Tailwind may not always meet the requirements of your project. In such cases, you may
4 min read
How to create a Menu Icon using CSS ?
The Menu Icon is mostly used on smaller screens, there's limited space to display a full navigation menu. A menu icon helps in hiding the navigation items initially and revealing them when the user needs them. In this article, we will see how To Create a Menu Icon using CSS. There are many ways to c
3 min read
How to create a Responsive Navigation Bar in Tailwind CSS ?
A Responsive Navigation Bar with collapsible elements is a crucial component of modern web design, allowing users to navigate seamlessly across various screen sizes. In this article, we'll explore how to implement such a navigation bar using Tailwind CSS, a utility-first CSS framework that enables r
2 min read
How to Create Nested Sub Menu using CSS ?
CSS Nested Sub-Menus refers to Dropdown Menus that are contained within another dropdown menu. These are commonly used in navigation menus to organize and structure content hierarchically. In this article, we are going to build a nested sub-menu using CSS, it will consist of a nav bar with various l
3 min read
Create Flyout Menus using React and Tailwind CSS
Flyout menus are a type of navigational menu that can be displayed when the user hovers over or clicks on an item allowing for a clean and organized display of additional options without crowding the main interface. In this article, we will create a responsive flyout menu using React and Tailwind CS
4 min read
How to Create A Sticky NavBar Using Tailwind CSS?
Sticky Navbar in Tailwind CSS is mostly used in applications where maintaining quick access to navigation links is essential as users scroll through content. It ensures that the navbar remains visible at the top of the screen, enhancing user experience by providing constant access to key sections of
4 min read
How to Style Lists in Tailwind CSS ?
Styling lists in Tailwind CSS enhances the visual appeal and usability of web pages by making lists more attractive and easier to navigate. By customizing the appearance of lists, you can improve the overall user experience on your website. These are the following approaches to Style the list in Tai
4 min read