Tailwind CSS Dropdowns - WindUI Component Library

Variations

Basic Dropdown Requires JS

Copy as:HTMLReact

copydone

<!-- Component: Basic dropdown menu -->
<div class="relative inline-flex ">
  <!--  Start Dropdown trigger -->
  <button class="inline-flex items-center justify-center h-10 gap-2 px-5 text-sm font-medium tracking-wide text-white transition duration-300 rounded focus-visible:outline-none whitespace-nowrap bg-emerald-500 hover:bg-emerald-600 focus:bg-emerald-700 disabled:cursor-not-allowed disabled:border-emerald-300 disabled:bg-emerald-300 disabled:shadow-none">
    <span>Choose one</span>
    <span class="relative only:-mx-5">
      <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-labelledby="t-01 d-01" role="graphics-symbol">
        <title id="t-01">Button icon</title>
        <desc id="d-01">An icon describing the buttons usage</desc>
        <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
      </svg>
    </span>
  </button>
  <!--  End Dropdown trigger -->
  <!-- Start Menu list -->
  <ul class="absolute z-20 flex flex-col py-2 mt-1 list-none bg-white rounded shadow-md w-72 top-full shadow-slate-500/10">
    <li>
      <a class="flex items-start justify-start gap-2 p-2 px-5 transition-colors duration-300 text-slate-500 hover:bg-emerald-50 hover:text-emerald-500 focus:bg-emerald-50 focus:text-emerald-600 focus:outline-none focus-visible:outline-none" href="#">
        <span class="flex flex-col gap-1 overflow-hidden whitespace-nowrap">
          <span class="leading-5 truncate">Dashboard</span>
        </span>
      </a>
    </li>
    <li>
      <a class="flex items-start justify-start gap-2 p-2 px-5 transition-colors duration-300 text-slate-500 hover:bg-emerald-50 hover:text-emerald-600 focus:bg-emerald-50 focus:text-emerald-600 focus:outline-none focus-visible:outline-none" href="#" aria-current="page">
        <span class="flex flex-col gap-1 overflow-hidden whitespace-nowrap">
          <span class="leading-5 truncate">Metrics and analytics</span>
        </span>
      </a>
    </li>
    <li>
      <a class="flex items-start justify-start gap-2 p-2 px-5 overflow-hidden transition-colors duration-300 text-slate-500 hover:bg-emerald-50 hover:text-emerald-500 focus:bg-emerald-50 focus:text-emerald-600 focus:outline-none focus-visible:outline-none" href="#">
        <span class="flex flex-col gap-1 overflow-hidden whitespace-nowrap">
          <span class="leading-5 truncate">Multi-Channel Funnels overview</span>
        </span>
      </a>
    </li>
    <li>
      <a class="flex items-start justify-start gap-2 p-2 px-5 transition-colors duration-300 text-slate-500 hover:bg-emerald-50 hover:text-emerald-500 focus:bg-emerald-50 focus:text-emerald-600 focus:outline-none focus-visible:outline-none" href="#">
        <span class="flex flex-col gap-1 overflow-hidden whitespace-nowrap"> <span class="leading-5 truncate">User settings</span>
        </span>
      </a>
    </li>
    <li>
      <a class="flex items-start justify-start gap-2 p-2 px-5 transition-colors duration-300 text-slate-500 hover:bg-emerald-50 hover:text-emerald-500 focus:bg-emerald-50 focus:text-emerald-600 focus:outline-none focus-visible:outline-none" href="#">
        <span class="flex flex-col gap-1 overflow-hidden whitespace-nowrap">
          <span class="leading-5 truncate">User Profile</span>
        </span>
      </a>
    </li>
  </ul>
  <!-- End Menu list -->
</div>
<!-- End Basic dropdown menu-->

Dropdown with Icons Requires JS

Copy as:HTMLReact

copydone

<!-- Component: Icon dropdown menu -->
<div class="relative inline-flex">
  <!-- Start Dropdown trigger -->
  <button class="inline-flex items-center justify-center h-10 gap-2 px-5 text-sm font-medium tracking-wide text-white transition duration-300 rounded focus-visible:outline-none whitespace-nowrap bg-emerald-500 hover:bg-emerald-600 focus:bg-emerald-700 disabled:cursor-not-allowed disabled:border-emerald-300 disabled:bg-emerald-300 disabled:shadow-none">
    <span>Choose one</span>
    <span class="relative only:-mx-5">
      <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-labelledby="t-01 d-01" role="graphics-symbol">
        <title id="t-01">Button icon</title>
        <desc id="d-01">An icon describing the buttons usage</desc>
        <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
      </svg>
    </span>
  </button>
  <!-- End Dropdown trigger -->
  <!-- Start Menu list -->
  <ul class="absolute z-20 flex flex-col py-2 mt-1 list-none bg-white rounded shadow-md w-72 top-full shadow-slate-500/10">
    <li>
      <a class="flex items-start justify-start gap-2 p-2 px-5 transition-colors duration-300 text-slate-500 hover:bg-emerald-50 hover:text-emerald-500 focus:bg-emerald-50 focus:text-emerald-600 focus:outline-none focus-visible:outline-none" href="#">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" class="flex-shrink-0 w-5 h-5" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-labelledby="t-02 d-02" role="graphics-symbol">
          <title id="t-02">Button icon</title>
          <desc id="d-02">An icon describing the buttons usage</desc>
          <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 6a7.5 7.5 0 107.5 7.5h-7.5V6z" />
          <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 10.5H21A7.5 7.5 0 0013.5 3v7.5z" />
        </svg>
        <span class="flex flex-col gap-1 overflow-hidden whitespace-nowrap">
          <span class="leading-5 truncate"> Dashboard</span>
          <span class="text-sm whitespace-normal opacity-70">Quick overview of all basic metrics and settings </span></span></a>
    </li>
    <li>
      <a class="flex items-start justify-start gap-2 p-2 px-5 transition-colors duration-300 text-slate-500 hover:bg-emerald-50 hover:text-emerald-500 focus:bg-emerald-50 focus:text-emerald-600 focus:outline-none focus-visible:outline-none" href="#" aria-current="page">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" class="flex-shrink-0 w-5 h-5" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-labelledby="t-03 d-03" role="graphics-symbol">
          <title id="t-03">Button icon</title>
          <desc id="d-03">An icon describing the buttons usage</desc>
          <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18L9 11.25l4.306 4.307a11.95 11.95 0 015.814-5.519l2.74-1.22m0 0l-5.94-2.28m5.94 2.28l-2.28 5.941" />
        </svg>
        <span class="flex flex-col gap-1 overflow-hidden whitespace-nowrap"> <span class="leading-5 truncate">Metrics and analytics</span> <span class="text-sm whitespace-normal opacity-70">Detailed analytic date reviews management </span></span></a>
    </li>
    <li>
      <a class="flex items-start justify-start gap-2 p-2 px-5 transition-colors duration-300 text-slate-500 hover:bg-emerald-50 hover:text-emerald-500 focus:bg-emerald-50 focus:text-emerald-600 focus:outline-none focus-visible:outline-none" href="#">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" class="flex-shrink-0 w-5 h-5" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-labelledby="t-04 d-04" role="graphics-symbol">
          <title id="t-04">Button icon</title>
          <desc id="d-04">An icon describing the buttons usage</desc>
          <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125" />
        </svg>
        <span class="flex flex-col gap-1 truncate whitespace-nowrap"><span class="leading-5 truncate">Multi-Channel Funnels overview</span> <span class="text-sm whitespace-normal opacity-70">Generated from conversion paths, the sequences of interactions </span></span></a>
    </li>
    <li role="separator" class="border-b border-slate-200"></li>
    <li>
      <a class="flex items-start justify-start gap-2 p-2 px-5 transition-colors duration-300 text-slate-500 hover:bg-emerald-50 hover:text-emerald-500 focus:bg-emerald-50 focus:text-emerald-600 focus:outline-none focus-visible:outline-none" href="#">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" class="flex-shrink-0 w-5 h-5" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-labelledby="t-05 d-05" role="graphics-symbol">
          <title id="t-05">Button icon</title>
          <desc id="d-05">An icon describing the buttons usage</desc>
          <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" />
        </svg>
        <span class="flex flex-col gap-1 overflow-hidden whitespace-nowrap"> <span class="leading-5 truncate">User settings</span> <span class="text-sm whitespace-normal opacity-70">User settings allow you to configure your email preferences</span> </span></a>
    </li>
    <li>
      <a class="flex items-start justify-start gap-2 p-2 px-5 transition-colors duration-300 text-slate-500 hover:bg-emerald-50 hover:text-emerald-500 focus:bg-emerald-50 focus:text-emerald-600 focus:outline-none focus-visible:outline-none" href="#">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" class="flex-shrink-0 w-5 h-5" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-labelledby="t-06 d-06" role="graphics-symbol">
          <title id="t-06">Button icon</title>
          <desc id="d-06">An icon describing the buttons usage</desc>
          <path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z" />
          <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
        </svg>
        <span class="flex flex-col gap-1 overflow-hidden whitespace-nowrap"><span class="leading-5 truncate">User Profile</span> <span class="text-sm whitespace-normal opacity-70"> A collection of settings and information about your account</span></span></a>
    </li>
  </ul>
  <!-- End Menu list -->
</div>
<!-- End Icon dropdown menu -->

Usage

Use a dropdown menu to display a list of choices on a temporary surface. They appear when users interact with a button, action, or other control.

Specs

Dropdowns require a trigger (usually a <button> element). They are implemented with an <ul> element and they consist of :

Main text: 1rem (16px) font size with 1.25rem(20px) horizontal padding and 0.5rem(8px) vertical padding.
Icon: 1.25rem (20px) width and height with 0.5rem(8px) distance from the text.
Assistive text: 0.875rem (14px) font size and 0.25rem(4px) vertical distance from the main text.

The width of the dropdowns can be adjusted by adding a width class to the <ul> element.

Accessibility notes

The trigger button has an aria-expanded role with a true/false value, that allows vocalizing menu states (open or closed).
Ιf the dropdown menu is used within a navigation menu the aria-current="page" attribute should be assigned to the item corresponding to the active page.
A role="separator" role can be assigned to an empty <li> to separate the menu in sections.

Dropdowns