Since a few months ago I have started a series of tutorials on how to build some of the most commonly used UI components in Tailwind CSS and Flowbite and today I would like to show you how to build a mega menu component.
Tailwind CSS is the most popular utility-first CSS framework that helps you build UI interfaces in websites much faster directly from your HTML.
Flowbite is an open-source component library built with the Tailwind CSS classes featuring interactive elements like dropdowns, modals, navbars, mega menus and more.
Here's a preview of how the mega menu will look like after going through this tutorial:
Without further ado, let's get started!
Tailwind CSS Mega Menu
First of all we need to make sure that we have both Tailwind CSS and Flowbite installed in your local project.
We need Tailwind CSS to make the classes work and Flowbite to enable the interactivity of the collapse and dropdown functionality.
Follow the instruction on how to install Tailwind CSS.
Then follow the instructions on how to install Flowbite.
If you have both installed then let's just go to the Tailwind CSS Mega Menu component from the documentation.
As you can see there are about five examples at the time of this writing and you can directly just copy-paste the code into your own project and the mega menu will work instantly.
The good news is that all of these components are open-source under the MIT license and you can use them freely.
Here is the code that we can use for the first example:
<nav class="bg-white border-gray-200 px-2 lg:px-4 py-2.5 dark:bg-gray-800">
<div class="flex flex-wrap justify-between items-center mx-auto max-w-screen-xl">
<a href="https://flowbite.com" class="flex items-center">
<img src="https://flowbite.com/docs/images/logo.svg" class="mr-3 h-6 sm:h-9" alt="Flowbite Logo">
<span class="self-center text-xl font-semibold whitespace-nowrap dark:text-white">Flowbite</span>
</a>
<div class="flex items-center lg:order-2">
<a href="#" class="text-gray-800 dark:text-white hover:bg-gray-50 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-4 py-2 lg:px-5 lg:py-2.5 mr-2 dark:hover:bg-gray-700 focus:outline-none dark:focus:ring-gray-800">Login</a>
<a href="#" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 lg:px-5 lg:py-2.5 mr-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">Sign up</a>
<button data-collapse-toggle="mega-menu" type="button" class="inline-flex items-center p-2 ml-1 text-sm text-gray-500 rounded-lg lg:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="mega-menu" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<svg aria-hidden="true" class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>
</button>
</div>
<div id="mega-menu" class="hidden justify-between items-center w-full text-sm lg:flex lg:w-auto lg:order-1">
<ul class="flex flex-col mt-4 font-medium lg:flex-row lg:space-x-8 lg:mt-0">
<li>
<a href="#" class="block py-2 pr-4 pl-3 text-blue-600 border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 lg:hover:text-blue-600 lg:p-0 dark:text-blue-500 lg:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-blue-500 lg:dark:hover:bg-transparent dark:border-gray-700" aria-current="page">Home</a>
</li>
<li>
<button id="mega-menu-dropdown-button" data-dropdown-toggle="mega-menu-dropdown" class="flex justify-between items-center py-2 pr-4 pl-3 w-full font-medium text-gray-700 border-b border-gray-100 lg:w-auto hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 lg:hover:text-blue-600 lg:p-0 dark:text-gray-400 lg:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-blue-500 lg:dark:hover:bg-transparent dark:border-gray-700">
Company <svg aria-hidden="true" class="ml-1 w-5 h-5 lg:w-4 lg:h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</button>
<div id="mega-menu-dropdown" class="grid hidden absolute z-10 grid-cols-2 w-auto text-sm bg-white rounded-lg border border-gray-100 shadow-md dark:border-gray-700 lg:grid-cols-3 dark:bg-gray-700" data-popper-placement="bottom" style="position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate3d(1147px, 763.5px, 0px);">
<div class="p-4 pb-0 text-gray-900 lg:pb-4 dark:text-white">
<ul class="space-y-4">
<li>
<a href="#" class="text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-500">
About Us
</a>
</li>
<li>
<a href="#" class="text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-500">
Library
</a>
</li>
<li>
<a href="#" class="text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-500">
Resources
</a>
</li>
<li>
<a href="#" class="text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-500">
Pro Version
</a>
</li>
</ul>
</div>
<div class="p-4 pb-0 text-gray-900 lg:pb-4 dark:text-white">
<ul class="space-y-4">
<li>
<a href="#" class="text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-500">
Blog
</a>
</li>
<li>
<a href="#" class="text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-500">
Newsletter
</a>
</li>
<li>
<a href="#" class="text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-500">
Playground
</a>
</li>
<li>
<a href="#" class="text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-500">
License
</a>
</li>
</ul>
</div>
<div class="p-4 text-gray-900 dark:text-white">
<ul class="space-y-4">
<li>
<a href="#" class="text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-500">
Contact Us
</a>
</li>
<li>
<a href="#" class="text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-500">
Support Center
</a>
</li>
<li>
<a href="#" class="text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-500">
Terms
</a>
</li>
</ul>
</div>
</div>
</li>
<li>
<a href="#" class="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 lg:hover:text-blue-600 lg:p-0 dark:text-gray-400 lg:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-blue-500 lg:dark:hover:bg-transparent dark:border-gray-700">Team</a>
</li>
<li>
<a href="#" class="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 lg:hover:text-blue-600 lg:p-0 dark:text-gray-400 lg:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-blue-500 lg:dark:hover:bg-transparent dark:border-gray-700">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
Make sure that the id's for the navigation bar and the dropdown are all unique to prevent duplication.
The dropdown itself is powered using the data-dropdown-toggle data attribute from the Flowbite JavaScript file, that is why you need it included into your own project.
Here are a few more examples from the Flowbite library:
Dark mode
The good news is that they also work with dark mode when integrated with Tailwind CSS and Flowbite.
Here's an example:
Conclusion
That's all. I hope that this article has helped you get started with your Tailwind CSS and Flowbite journey and let me know in the comments section what you think about it!
Credits:
Top comments (0)