Home
Markus Günther
Accessible dropdown menu with minimal javascript

Accessible dropdown menu with minimal javascript

Open the dropdown menu on hover and on keyboard actions

This tailwind example is contributed by Markus Günther, on 09-Jan-2025. Component is made with Tailwind CSS v3.

187

<nav class="flex items-center justify-between p-6 lg:px-8" aria-label="Global">
   <div class="flex lg:flex-1"><a href="/"><span class="sr-only">Flownative</span><img src="https://flownative.com/_Resources/Static/Packages/Flownative.FlownativeCom/Images/logo-red-box.svg" loading="lazy" class="h-8 w-auto" alt="Flownative"></a></div>
   <div class="lg:flex lg:gap-x-12">
      <details class="group relative">
         <summary class="relative flex items-center pr-8 cursor-pointer list-none appearance-none [&::-webkit-details-marker]:hidden">
            <a href="/en/why-flownative/about-us.html" class="text-sm font-semibold leading-6 text-gray-900 hover:text-black">Why Flownative</a>
            <svg
                xmlns="http://www.w3.org/2000/svg"
                class="ml-1 w-3 h-3 text-gray-400 transition-transform duration-300 group-open:rotate-180"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
                stroke-width="2"
            >
                <path stroke-linecap="round" stroke-linejoin="round" d="M6 9l6 6 6-6" />
            </svg>
         </summary>
         <ul id="menu" class="-ml-3 pl-3 py-6 absolute left-0 w-40 origin-top-left bg-white shadow-lg opacity-0 invisible group-open:opacity-100 group-open:visible transition duration-300 space-y-2">
            <li>
               <a href="#" class="text-sm font-semibold leading-6 text-gray-900 hover:text-black">Option 1</a>
            </li>
            <li>
               <a href="#" class="text-sm font-semibold leading-6 text-gray-900 hover:text-black">Option 2</a>
            </li>
            <li>
               <a href="#" class="text-sm font-semibold leading-6 text-gray-900 hover:text-black">Option 3</a>
            </li>
         </ul>
      </details>
      <details class="group relative">
         <summary class="relative flex items-center pr-8 cursor-pointer list-none appearance-none [&::-webkit-details-marker]:hidden">
            <a href="/en/products.html" class="text-sm font-semibold leading-6 text-gray-900 hover:text-black">Products</a>
            <svg
                xmlns="http://www.w3.org/2000/svg"
                class="ml-1 w-3 h-3 text-gray-400 transition-transform duration-300 group-open:rotate-180"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
                stroke-width="2"
            >
                <path stroke-linecap="round" stroke-linejoin="round" d="M6 9l6 6 6-6" />
            </svg>
         </summary>
         <ul id="menu" class="-ml-3 pl-3 py-6 absolute left-0 w-40 origin-top-left bg-white shadow-lg opacity-0 invisible group-open:opacity-100 group-open:visible transition duration-300 space-y-2">
            <li>
               <a href="#" class="text-sm font-semibold leading-6 text-gray-900 hover:text-black">Option 1</a>
            </li>
            <li>
               <a href="#" class="text-sm font-semibold leading-6 text-gray-900 hover:text-black">Option 2</a>
            </li>
            <li>
               <a href="#" class="text-sm font-semibold leading-6 text-gray-900 hover:text-black">Option 3</a>
            </li>
         </ul>
      </details>
      <details class="group relative">
         <summary class="relative flex items-center pr-8 cursor-pointer list-none appearance-none [&::-webkit-details-marker]:hidden">
            <a href="/en/pricing/lifeguard.html" class="text-sm font-semibold leading-6 text-gray-900 hover:text-black">Pricing</a>
            <svg
                xmlns="http://www.w3.org/2000/svg"
                class="ml-1 w-3 h-3 text-gray-400 transition-transform duration-300 group-open:rotate-180"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
                stroke-width="2"
            >
                <path stroke-linecap="round" stroke-linejoin="round" d="M6 9l6 6 6-6" />
            </svg>
         </summary>
         <ul id="menu" class="-ml-3 pl-3 py-6 absolute left-0 w-40 origin-top-left bg-white shadow-lg opacity-0 invisible group-open:opacity-100 group-open:visible transition duration-300 space-y-2">
            <li>
               <a href="#" class="text-sm font-semibold leading-6 text-gray-900 hover:text-black">Option 1</a>
            </li>
            <li>
               <a href="#" class="text-sm font-semibold leading-6 text-gray-900 hover:text-black">Option 2</a>
            </li>
            <li>
               <a href="#" class="text-sm font-semibold leading-6 text-gray-900 hover:text-black">Option 3</a>
            </li>
         </ul>
      </details>
      <details class="group relative">
         <summary class="relative flex items-center pr-8 cursor-pointer list-none appearance-none [&::-webkit-details-marker]:hidden">
            <a href="/en/products.html" class="text-sm font-semibold leading-6 text-gray-900 hover:text-black">Products</a>
            <svg
                xmlns="http://www.w3.org/2000/svg"
                class="ml-1 w-3 h-3 text-gray-400 transition-transform duration-300 group-open:rotate-180"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
                stroke-width="2"
            >
                <path stroke-linecap="round" stroke-linejoin="round" d="M6 9l6 6 6-6" />
            </svg>
         </summary>
         <ul id="menu" class="-ml-3 pl-3 py-6 absolute left-0 w-40 origin-top-left bg-white shadow-lg opacity-0 invisible group-open:opacity-100 group-open:visible transition duration-300 space-y-2">
            <li>
               <a href="#" class="text-sm font-semibold leading-6 text-gray-900 hover:text-black">Option 1</a>
            </li>
            <li>
               <a href="#" class="text-sm font-semibold leading-6 text-gray-900 hover:text-black">Option 2</a>
            </li>
            <li>
               <a href="#" class="text-sm font-semibold leading-6 text-gray-900 hover:text-black">Option 3</a>
            </li>
         </ul>
      </details>
   </div>
</nav>

Related Examples

Button Dropdown
Drop down button with only tailwind css using focus

Author:
shivam vishvakarma

2 months ago

654
Responsive Navbar with TailwindCSS
responsive navbar built with TailwindCSS, perfect for mobile and desktop views

Author:
Rathanak Phan

3 weeks ago

209
Drop Down
This component is a Select Input Or Dropdown UI & Dark mode Supported Component

Author:
Shariar Hasan

11 months ago

4.1k
Dropdown select on hover
this example does not uses javascript

Author:
Thomas Taylor

7 months ago

1.3k
Dropdown profile
Using DaisyUI Based on: https://tailwindcomponents.com/component/dropdown-7

Author:
Dmitry

1 year ago

4.9k
Nested dropdown
Nested dropdown without using javascript. It uses details and summary HTML tags for interactivity.

Author:
Emrys11

1 year ago

12.2k
Dropdown select on hover
this example does not uses javascript

Author:
Alok

1 year ago

25.1k
Multi-Select Dropdown Filter with search
Interactive filtering component built with Alpine.js and Tailwind CSS, featuring searchable multi-select dropdowns with dynamic URL parameters. The system includes responsive design, real-time search functionality, and visual feedback through selected item tags that can be easily removed.

Author:
Maxim

1 month ago

1.1k
Dropdown menu without using javascript
Open the dropdown menu on hover

Author:
Asher Wilde

1 year ago

17.4k
Dropdown
hover dropdown with width of max-w-7xl

Author:
Bernard Omuse

4 months ago

629
Dropdown menu list
Dropdown menu list without using javascript. This example takes advantage of native HTML's <details> and <summary> tags

Author:
Prajwal Hallale

1 year ago

19k
Onhover Dropdown
Open dropdown on hover

Author:
Akshay

2 years ago

15.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 1900+ components