If you are working with TailwindCSS, you might need to hover dropdown menus for your navbar. Building a hover dropdown menu is a little tricky with TailwindCSS.
Prerequisite
Before continuing to this tutorial, please make sure you have followed all the steps to install TailwindCSS. You can follow the official documentation to get started with TailwindCSS.
Creating a Simple Menu Item
First, you need to create a simple menu item that will display dropdown menus when hovered. So, go ahead and paste the following code.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<div class="mx-auto flex h-screen w-full items-center justify-center bg-gray-200 py-20" > <div class="group relative cursor-pointer py-2"> <div class="flex items-center justify-between space-x-5 bg-white px-4"> <a class="menu-hover my-2 py-2 text-base font-medium text-black lg:mx-4" onClick="" > Our Products </a> <span> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-6 w-6" > <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" /> </svg> </span> </div> </div> </div> |
The outer div is just a container to make everything in the center. The next div is used to create a group where a single menu item is added. The SVG is just a dropdown icon to tell users they can have other items on mouse hover.
Adding Hover Dropdown Menus with TailwindCSS
Now, copy and paste the following highlighted code under the menu item.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
<div class="mx-auto flex h-screen w-full items-center justify-center bg-gray-200 py-20" > <div class="group relative cursor-pointer py-2"> <div class="flex items-center justify-between space-x-5 bg-white px-4"> <a class="menu-hover my-2 py-2 text-base font-medium text-black lg:mx-4" onClick="" > Our Products </a> <span> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-6 w-6" > <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" /> </svg> </span> </div> <div class="invisible absolute z-50 flex w-full flex-col bg-gray-100 py-1 px-4 text-gray-800 shadow-xl group-hover:visible" onClick="" > <a class="my-2 block border-b border-gray-100 py-1 font-semibold text-gray-500 hover:text-black md:mx-2" >Product One</a > <a class="my-2 block border-b border-gray-100 py-1 font-semibold text-gray-500 hover:text-black md:mx-2" >Product Two</a > <a class="my-2 block border-b border-gray-100 py-1 font-semibold text-gray-500 hover:text-black md:mx-2" >Product Three </a> <a class="my-2 block border-b border-gray-100 py-1 font-semibold text-gray-500 hover:text-black md:mx-2" >Product Four </a> </div> </div> </div> |
This new code will add 4 different menu items. The container div element having these 4 items is hidden by default. These menu items will be visible when the user hovers over the main menu item. You can see the working example below.
You can check the demo on play.tailwindcss.com. If you want to use it, just copy and paste the code to your project.
Conclusion
You can design hover dropdown menus with TailwindCSS. First, you need to group the elements inside a div container and then you can show the items when the user hovers over the element. You can also learn more about group class with the hover modifiers in TailwindCSS.