How to make a dropdown responsive toggle menu using Tailwind CSS?

keyur1

Jul 5th, 2022 08:07 AM

I see a lot of templates for navigation in Tails but there isn't any that includes a dropdown menu.

taycanrs

Jul 5th, 2022 08:36 PM

Hello. Have a look here: https://tailwind-elements.com/docs/standard/components/dropdown/

If you are using react or vue, take a look at headless ui: https://headlessui.com/react/menu

keyur1

Jul 6th, 2022 12:25 AM

Het @taycanrs Thank you for your comment and support.

Here's my code

<div class="mx-auto box-content flex h-16 max-w-7xl items-center justify-between py-1">
  <div class="flex items-center space-x-2 p-4">
    <nav id="navr" class="absolute top-0 mt-16 hidden w-full translate-y-2 items-center bg-white pb-3 text-sm font-medium text-gray-500 md:relative md:mt-0 md:flex md:w-auto md:translate-y-0 md:space-x-2 md:bg-transparent md:pb-0">
      <a href="#_" class="block w-full bg-white px-5 py-3 transition hover:bg-gray-100 md:inline md:w-auto md:rounded md:px-3 md:py-2">Home</a>
      <a href="#_" class="block w-full bg-white px-5 py-3 transition hover:bg-gray-100 md:inline md:w-auto md:rounded md:px-3 md:py-2">Features</a>
      <span class="group relative inline-block">
        <button class="inline-flex items-center rounded py-2 px-4 font-semibold">Dropdown</button>
        <ul class="absolute hidden pt-1 text-gray-700 group-hover:block">
          <li class=""><a class="whitespace-no-wrap block rounded-t bg-gray-200 py-2 px-4 hover:bg-gray-400" href="#">One</a></li>
          <li class=""><a class="whitespace-no-wrap block bg-gray-200 py-2 px-4 hover:bg-gray-400" href="#">Two</a></li>
          <li class=""><a class="whitespace-no-wrap block rounded-b bg-gray-200 py-2 px-4 hover:bg-gray-400" href="#">Three is the magic number</a></li>
        </ul>
      </span>
      <a href="#_" class="block w-full bg-white px-5 py-3 transition hover:bg-gray-100 md:inline md:w-auto md:rounded md:px-3 md:py-2">About</a>
      <a href="#_" class="block w-full bg-white px-5 py-3 transition hover:bg-gray-100 md:inline md:w-auto md:rounded md:px-3 md:py-2">Blog</a>
    </nav>
  </div>
</div>

You can use it here to see how it works - https://play.tailwindcss.com/ Note: Use width more than 768px

Also, see the image below Screen Shot 2022-07-06 at 5.16.56 pm.png

I don't know how could I have a width of a dropdown as full-width (shown by a blue line) and not existing (as shown by a red line).

Please help.

kento

Jul 7th, 2022 08:20 PM

I see flyout menu but how do u let it drop like this: https://tailwindui.com/components/marketing/elements/headers

thinkverse

Jul 7th, 2022 09:48 PM

Dropdowns are made using JavaScript. The once on Tailwind UI is made with AlpineJS, as are the slide over here on DevDojo.

keyur1

Jul 10th, 2022 09:09 PM

I managed it with this link https://tailwindcomponents.com/component/responsive-navbar-with-dropdown

Thanks @kento