Published on

Best Ways To Make A Multi Level Dropdown Menu With Tailwind CSS

Tags
DropdownsWidget
Multi Level Dropdown Menu

As a FrontEnd technology blogger, it's important to stay up-to-date with the latest trends and tools in the industry. One such tool that has gained a lot of popularity in recent times is Tailwind CSS. It's a utility-first CSS framework that allows you to quickly build custom designs without writing any CSS code. In this article, we'll explore the best ways to make a multi-level dropdown menu with Tailwind CSS.

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that provides a set of pre-defined CSS classes that you can use to style your HTML elements. It's different from other CSS frameworks like Bootstrap or Foundation, which provide a set of pre-designed components that you can use in your project. With Tailwind CSS, you have complete control over the design of your UI components.

The description of Multi-Level Dropdown Menu UI Component

A multi-level dropdown menu is a UI component that allows users to navigate through a website's hierarchy of pages or sections. It's a common design pattern that you'll find on most websites. The menu consists of a primary navigation bar that contains links to the main sections of the website. When a user hovers over a link, a dropdown menu appears that displays links to the sub-sections of that page.

Why use Tailwind CSS to create a Multi-Level Dropdown Menu UI Component?

Tailwind CSS provides a set of utility classes that make it easy to create complex UI components like multi-level dropdown menus. With Tailwind CSS, you don't need to write any custom CSS code. Instead, you can use pre-defined classes to style your HTML elements. This makes it easy to create a consistent design across your entire website.

The preview of Multi-Level Dropdown Menu UI Component

To create a multi-level dropdown menu with Tailwind CSS, you'll need to use a combination of HTML and CSS. Here's a preview of what the final component will look like:

Free download of the Multi Level Dropdown Menu's source code

The source code of Multi-Level Dropdown Menu UI Component

To create a multi-level dropdown menu with Tailwind CSS, you'll need to use a combination of HTML and CSS. Here's the source code for the component:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>FrontendFunn - Responsive Multi Level Dropdown Tailwind CSS</title>
 
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/material-design-icons/3.0.1/iconfont/material-icons.min.css"
      integrity="sha256-x8PYmLKD83R9T/sYmJn1j3is/chhJdySyhet/JuHnfY="
      crossorigin="anonymous"
    />
  <style>
    @import url("https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;700;900&display=swap");
html,
body {
  font-family: "Rubik", sans-serif;
  height: 100%;
}

.dropdown-menu[data-show] {
  display: flex;
}
    </style>
  
  </head>

  <body>
    <div class="container">
      <!------------------ LEVEL 1 ----------------------->
      <div class="dropdown relative inline-flex cursor-pointer">
        <!-- dropdown text -->
        <span
          class="dropdown-text flex px-4 py-3 bg-gray-400 rounded text-gray-800 items-center hover:bg-gray-800 hover:text-white whitespace-no-wrap"
          >Dropdown Level 1
          <i
            class="material-icons ml-2 h-4 w-4 text-2xl inline-flex items-center justify-center"
            >keyboard_arrow_down</i
          >
        </span>
        <!-- dropdown text -->
        <!-- dropdown menu -->
        <div class="dropdown-menu flex flex-col hidden absolute">
          <div
            class="rounded flex flex-col flex-grow bg-gray-400 divide-y divide-gray-200"
          >
            <div class="dropdown-item flex">
              <a
                href="#"
                class="dropdown-link flex flex-grow px-4 py-3 text-gray-800 whitespace-no-wrap rounded hover:bg-gray-800 hover:text-white"
                >Link One</a
              >
            </div>
            <div class="dropdown-item flex">
              <a
                href="#"
                class="dropdown-link flex flex-grow px-4 py-3 text-gray-800 whitespace-no-wrap rounded hover:bg-gray-800 hover:text-white"
                >Link Two</a
              >
            </div>
            <div class="dropdown-item">
              <!------------------ LEVEL 2 ----------------------->
              <div class="dropdown relative flex">
                <!-- dropdown text -->
                <span
                  class="dropdown-text flex px-4 py-3 bg-gray-400 rounded text-gray-800 items-center hover:bg-gray-800 hover:text-white whitespace-no-wrap"
                  >Dropdown Level 2
                  <i
                    class="material-icons ml-2 h-4 w-4 text-2xl inline-flex items-center justify-center"
                    >keyboard_arrow_down</i
                  >
                </span>
                <!-- dropdown text -->
                <!-- dropdown menu -->
                <div class="dropdown-menu flex flex-grow hidden absolute">
                  <div
                    class="rounded flex flex-col flex-grow bg-gray-400 divide-y divide-gray-200"
                  >
                    <div class="dropdown-item flex flex-grow">
                      <a
                        href="#"
                        class="dropdown-link flex flex-grow px-4 py-3 text-gray-800 whitespace-no-wrap rounded hover:bg-gray-800 hover:text-white"
                        >Level Two Link</a
                      >
                    </div>
                    <div class="dropdown-item flex flex-grow">
                      <!------------------ LEVEL 3 ----------------------->
                      <div class="dropdown relative flex">
                        <!-- dropdown text -->
                        <span
                          class="dropdown-text flex px-4 py-3 bg-gray-400 rounded text-gray-800 items-center hover:bg-gray-800 hover:text-white whitespace-no-wrap"
                          >Dropdown Level 3
                          <i
                            class="material-icons ml-2 h-4 w-4 text-2xl inline-flex items-center justify-center"
                            >keyboard_arrow_down</i
                          >
                        </span>
                        <!-- dropdown text -->
                        <!-- dropdown menu -->
                        <div
                          class="dropdown-menu flex flex-grow hidden absolute"
                        >
                          <div
                            class="rounded flex flex-col flex-grow bg-gray-400 divide-y divide-gray-200"
                          >
                            <div class="dropdown-item flex flex-grow">
                              <a
                                href="#"
                                class="dropdown-link flex flex-grow px-4 py-3 text-gray-800 whitespace-no-wrap rounded hover:bg-gray-800 hover:text-white"
                                >Level Three Link</a
                              >
                            </div>
                            <div class="dropdown-item flex flex-grow">
                              <!------------------ LEVEL 4 ----------------------->
                              <div class="dropdown relative flex">
                                <!-- dropdown text -->
                                <span
                                  class="dropdown-text flex px-4 py-3 bg-gray-400 rounded text-gray-800 items-center hover:bg-gray-800 hover:text-white whitespace-no-wrap"
                                  >Dropdown Level 4
                                  <i
                                    class="material-icons ml-2 h-4 w-4 text-2xl inline-flex items-center justify-center"
                                    >keyboard_arrow_down</i
                                  >
                                </span>
                                <!-- dropdown text -->
                                <!-- dropdown menu -->
                                <div
                                  class="dropdown-menu flex flex-grow hidden absolute"
                                >
                                  <div
                                    class="rounded flex flex-col flex-grow bg-gray-400 divide-y divide-gray-200"
                                  >
                                    <div class="dropdown-item flex flex-grow">
                                      <a
                                        href="#"
                                        class="dropdown-link flex flex-grow px-4 py-3 text-gray-800 whitespace-no-wrap rounded hover:bg-gray-800 hover:text-white"
                                        >Level Four Link</a
                                      >
                                    </div>
                                    <div class="dropdown-item flex flex-grow">
                                      <!------------------ LEVEL 5 ----------------------->
                                      <div class="dropdown relative flex">
                                        <!-- dropdown text -->
                                        <span
                                          class="dropdown-text flex px-4 py-3 bg-gray-400 rounded text-gray-800 items-center hover:bg-gray-800 hover:text-white whitespace-no-wrap"
                                          >Dropdown Level 5
                                          <i
                                            class="material-icons ml-2 h-4 w-4 text-2xl inline-flex items-center justify-center"
                                            >keyboard_arrow_down</i
                                          >
                                        </span>
                                        <!-- dropdown text -->
                                        <!-- dropdown menu -->
                                        <div
                                          class="dropdown-menu flex flex-grow hidden absolute"
                                        >
                                          <div
                                            class="rounded flex flex-col flex-grow bg-gray-400 divide-y divide-gray-200"
                                          >
                                            <div
                                              class="dropdown-item flex flex-grow"
                                            >
                                              <a
                                                href="#"
                                                class="dropdown-link flex flex-grow px-4 py-3 text-gray-800 whitespace-no-wrap rounded hover:bg-gray-800 hover:text-white"
                                                >Level Five Link</a
                                              >
                                            </div>
                                          </div>
                                        </div>
                                        <!-- dropdown menu -->
                                      </div>
                                      <!------------------ LEVEL 5 ----------------------->
                                    </div>
                                  </div>
                                </div>
                                <!-- dropdown menu -->
                              </div>
                              <!------------------ LEVEL 4 ----------------------->
                            </div>
                          </div>
                        </div>
                        <!-- dropdown menu -->
                      </div>
                      <!------------------ LEVEL 3 ----------------------->
                    </div>
                  </div>
                </div>
                <!-- dropdown menu -->
              </div>
              <!------------------ LEVEL 2 ----------------------->
            </div>
          </div>
        </div>
        <!-- dropdown menu -->
      </div>
      <!------------------ LEVEL 1 ----------------------->
    </div>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"
      integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.4.0/umd/popper.min.js"
      integrity="sha256-FT/LokHAO3u6YAZv6/EKb7f2e0wXY3Ff/9Ww5NzT+Bk="
      crossorigin="anonymous"
    ></script>
    <script>
      $(document).ready(function () {
  $(".dropdown").each(function (_, dropdown) {
    const dropdownMenu = $(dropdown).find("> .dropdown-menu")[0];
    let popperInstance = null;

    function create() {
      popperInstance = Popper.createPopper(dropdown, dropdownMenu, {
        placement: "auto-start",
        strategy: "absolute",
        modifiers: [
          {
            name: "flip",
            options: {
              fallbackPlacements: ["top", "bottom", "left", "right"],
            },
          },
        ],
      });
    }
    function destroy() {
      if (popperInstance) {
        popperInstance.destroy();
        popperInstance = null;
      }
    }

    function show() {
      $(dropdownMenu).attr("data-show", "");
      create();
    }

    function hide() {
      $(dropdownMenu).removeAttr("data-show");
      destroy();
    }

    $(dropdown).on("mouseenter focus", show);
    $(dropdown).on("mouseleave blur", hide);
  });
});
    </script>
  </body>
</html>

How to create a Multi-Level Dropdown Menu with Tailwind CSS?

To create a multi-level dropdown menu with Tailwind CSS, follow these steps:

  1. Create the HTML structure for the menu
  2. Style the primary navigation bar using Tailwind CSS classes
  3. Add hover effects to the primary navigation bar using Tailwind CSS classes
  4. Style the dropdown menu using Tailwind CSS classes
  5. Add hover effects to the dropdown menu using Tailwind CSS classes
  6. Add sub-menus to the dropdown menu using HTML and Tailwind CSS classes

Let's take a closer look at each of these steps.

1. Create the HTML structure for the menu

The first step is to create the HTML structure for the menu. Here's an example of what the HTML code might look like:

<nav class="bg-gray-800">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex items-center justify-between h-16">
      <div class="flex items-center">
        <div class="flex-shrink-0">
          <img class="h-8 w-8" src="https://tailwindui.com/img/logos/workflow-mark-indigo-500.svg" alt="Workflow">
        </div>
        <div class="hidden md:block">
          <div class="ml-10 flex items-baseline space-x-4">
            <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Home</a>

            <div class="relative">
              <button type="button" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white" id="menu-button" aria-expanded="false" aria-haspopup="true">
                Dropdown
              </button>

              <!--
                Dropdown menu, show/hide based on menu state.

                Entering: "transition ease-out duration-200"
                  From: "opacity-0 translate-y-1"
                  To: "opacity-100 translate-y-0"
                Leaving: "transition ease-in duration-150"
                  From: "opacity-100 translate-y-0"
                  To: "opacity-0 translate-y-1"
              -->
              <div class="absolute z-10 mt-3 transform w-48 rounded-md bg-white shadow-lg origin-top-right right-0 divide-y divide-gray-100 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
                <div class="py-1" role="none">
                  <a href="#" class="text-gray-700 block px-4 py-2 text-sm" role="menuitem" tabindex="-1" id="menu-item-0">Account settings</a>
                  <a href="#" class="text-gray-700 block px-4 py-2 text-sm" role="menuitem" tabindex="-1" id="menu-item-1">Support</a>
                  <a href="#" class="text-gray-700 block px-4 py-2 text-sm" role="menuitem" tabindex="-1" id="menu-item-2">License</a>
                </div>
                <div class="py-1" role="none">
                  <a href="#" class="text-gray-700 block px-4 py-2 text-sm" role="menuitem" tabindex="-1" id="menu-item-3">Sign out</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!--
    Mobile menu, toggle classes based on menu state.

    Menu open: "block", Menu closed: "hidden"
  -->
  <div class="hidden md:hidden">
    <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
      <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Home</a>

      <div class="relative">
        <button type="button" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white w-full text-left" id="mobile-menu-button" aria-expanded="false" aria-haspopup="true">
          <span>Dropdown</span>
          <!--
            Heroicon name: chevron-down

            Item active: "text-gray-400", Item inactive: "text-gray-300"
          -->
          <svg class="text-gray-400 group-hover:text-gray-300 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 011.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
          </svg>
        </button>

        <!--
          Dropdown menu, show/hide based on menu state.

          Entering: "transition ease-out duration-200"
            From: "opacity-0 translate-y-1"
            To: "opacity-100 translate-y-0"
          Leaving: "transition ease-in duration-150"
            From: "opacity-100 translate-y-0"
            To: "opacity-0 translate-y-1"
        -->
        <div class="mt-1 py-2 bg-white rounded-md shadow-lg">
          <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem" tabindex="-1" id="mobile-menu-item-0">Account settings</a>
          <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem" tabindex="-1" id="mobile-menu-item-1">Support</a>
          <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem" tabindex="-1" id="mobile-menu-item-2">License</a>
          <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem" tabindex="-1" id="mobile-menu-item-3">Sign out</a>
        </div>
      </div>
    </div>
  </div>
</nav>

2. Style the primary navigation bar using Tailwind CSS classes

The next step is to style the primary navigation bar using Tailwind CSS classes. In the example above, we've used the bg-gray-800 class to set the background color of the navigation bar to gray.

3. Add hover effects to the primary navigation bar using Tailwind CSS classes

To add hover effects to the primary navigation bar, we can use the hover:bg-gray-700 class. This class sets the background color of the element to gray when the user hovers over it.

4. Style the dropdown menu using Tailwind CSS classes

To style the dropdown menu, we can use the absolute class to position the menu relative to its parent element. We can also use the bg-white class to set the background color of the menu to white.

5. Add hover effects to the dropdown menu using Tailwind CSS classes

To add hover effects to the dropdown menu, we can use the hover:bg-gray-100 class. This class sets the background color of the menu item to gray when the user hovers over it.

6. Add sub-menus to the dropdown menu using HTML and Tailwind CSS classes

To add sub-menus to the dropdown menu, we can use HTML to create nested ul and li elements. We can then use Tailwind CSS classes to style the sub-menu items and add hover effects.

Conclusion

In conclusion, Tailwind CSS is a powerful tool that makes it easy to create complex UI components like multi-level dropdown menus. With its pre-defined utility classes, you can quickly style your HTML elements without writing any custom CSS code. By following the steps outlined in this article, you can create a multi-level dropdown menu that looks great and is easy to use.