Open In App

Design a Responsive Dropdown Menu in Tailwind CSS

Last Updated : 21 Mar, 2024
Improve
Improve
Like Article
Like
Save
Share
Report

Dropdown menus play a crucial role in web design, providing users with a convenient way to access additional options or navigate through a website’s content hierarchy.

dptl

Preview

Approach

  • The HTML structure and CSS classes used in this code are designed to create a responsive dropdown menu. Tailwind CSS provides utility classes for responsive design, allowing the menu to adapt to different screen sizes.
  • Each dropdown menu is represented by a button element styled with Tailwind CSS classes for padding, background color, text color, and rounded corners. This button serves as the trigger to toggle the visibility of the dropdown menu.
  • Each dropdown menu is implemented as a hidden div element positioned absolutely relative to its parent container. The menu items are styled as anchor elements within this div. Tailwind CSS classes are used for styling, including text color, background color on hover, and shadow effects.
  • JavaScript functions are provided to toggle the visibility of each dropdown menu when the corresponding button is clicked. This functionality allows users to show or hide the dropdown menu by clicking the associated button.
  • The dropdown menus include a fade-in animation using CSS keyframes. This animation provides a smooth transition when the menu becomes visible, enhancing the user experience.

Example: Illustration of designing a responsive dropdown menu in Tailwind CSS.

HTML 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width,
                   initial-scale=1.0">
    <title>Directional Dropdowns using Tailwind CSS</title>
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css">
</head>

<body class="bg-gray-100 p-4 flex flex-col 
             justify-center items-center 
             min-h-screen space-y-8">

    <!-- Dropdowns with buttons -->
    <div class="flex mx-2">
      
        <!-- Dropdown to the Right -->
        <div class="relative inline-block text-left mr-2">
            <button class="px-4 py-2 bg-blue-500 text-white
                           rounded-md shadow hover:bg-blue-700
                           focus:outline-none"
                    onclick="toggleDropdown('dropdownMenuRight')">
                Dropdown Left
            </button>
            <div class="hidden origin-top-right absolute 
                        right-0 mt-2 w-56 rounded-md 
                        shadow-lg bg-white ring-1
                        ring-black ring-opacity-5
                        animate-fadeIn"
                 id="dropdownMenuRight">
                <a href="#" class="block px-4 py-2 text-sm 
                                   text-gray-700 
                                   hover:bg-gray-100">
                  Left Option 1
                  </a>
                <a href="#" class="block px-4 py-2 text-sm
                                   text-gray-700 
                                   hover:bg-gray-100">
                  Left Option 2
                  </a>
                <a href="#" class="block px-4 py-2 text-sm 
                                   text-gray-700 
                                   hover:bg-gray-100">
                  Left Option 3
                  </a>
            </div>
        </div>

        <!-- Dropdown to the Left -->
        <div class="relative inline-block text-left mr-2"> 
            <button class="px-4 py-2 bg-blue-500 text-white
                           rounded-md shadow hover:bg-blue-700
                           focus:outline-none"
                    onclick="toggleDropdown('dropdownMenuLeft')">
                Dropdown Right
            </button>
            <div class="hidden origin-top-left absolute left-0 
                        mt-2 w-56 rounded-md shadow-lg bg-white
                        ring-1 ring-black ring-opacity-5 
                        animate-fadeIn"
                 id="dropdownMenuLeft">
                <a href="#" class="block px-4 py-2 text-sm 
                                   text-gray-700 
                                   hover:bg-gray-100">
                  Right Option 1
                  </a>
                <a href="#" class="block px-4 py-2 text-sm
                                   text-gray-700 
                                   hover:bg-gray-100">
                  Right Option 2
                  </a>
                <a href="#" class="block px-4 py-2 text-sm
                                   text-gray-700 
                                   hover:bg-gray-100">
                  Right Option 3
                  </a>
            </div>
        </div>

        <!-- Dropdown to the Bottom -->
        <div class="relative inline-block text-left"> 
            <button class="px-4 py-2 bg-blue-500 text-white
                           rounded-md shadow 
                           hover:bg-blue-700 focus:outline-none"
                    onclick="toggleDropdown('dropdownMenuBottom')">
                Dropdown Bottom
            </button>
            <div class="hidden origin-bottom absolute left-0 mt-2
                        w-56 rounded-md shadow-lg bg-white ring-1
                        ring-black ring-opacity-5 animate-fadeIn"
                 id="dropdownMenuBottom">
                <a href="#" class="block px-4 py-2 text-sm 
                                   text-gray-700 
                                   hover:bg-gray-100">
                  Bottom Option 1
                  </a>
                <a href="#" class="block px-4 py-2 text-sm 
                                   text-gray-700 
                                   hover:bg-gray-100">
                  Bottom Option 2
                  </a>
                <a href="#" class="block px-4 py-2 text-sm
                                   text-gray-700 
                                   hover:bg-gray-100">
                  Bottom Option 3
                  </a>
            </div>
        </div>
    </div>

    <!-- Animation -->
    <style>
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .animate-fadeIn {
            animation: fadeIn 0.5s ease-out forwards;
        }
    </style>

    <!-- JavaScript function to toggle dropdown visibility -->
    <script>
        function toggleDropdown(menuId) {
            const dropdownMenu = document
            .getElementById(menuId);
            dropdownMenu.classList.toggle('hidden');
        }
    </script>

</body>

</html>

Output:

gidn

Output



D
djnanasatkx0l
Improve
Next Article
How to design a dropdown menu using pure CSS ?

Similar Reads

How to create a Responsive Sidebar with dropdown menu in React JS?
A sidebar is an important element of a website's design since it allows users to quickly visit any section within a site. Preview of final output: Prerequisite:NPM &amp; Node JSReact JSreact-router-domReact useState hookApproach to Create Responsive Sidebar with Dropdown :Create a navigation bar with a hamburger menu with items routed to different
6 min read
How to avoid dropdown menu to close menu items on clicking inside ?
The default behavior of a dropdown menu is to close the menu list items when clicked inside. In this article, We will use stropPropagation method to prevent the dropdown menu from closing the menu list. stopPropagation(): The stopPropagation() method is used to stop propagation of event calling i.e. the parent event is called we can stop the propag
2 min read
How to design a dropdown menu using pure CSS ?
The Dropdown Menu is a common UI pattern that we have seen on the web nowadays. It is useful in displaying related information in pieces without overwhelming the user with buttons, texts, and options. Most of the time it is seen inside the navigation bar or headers of websites. With the help of Pure CSS, we can easily create such dropdown menus. Ap
3 min read
How to show/hide dropdown menu on mouse hover using CSS ?
The approach of this article is to show and hide the dropdown menu on mouse hover using CSS. The task can be done by using the display property and :hover selector. Example: C/C++ Code &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; &lt;title&gt; How to Show Hide Dropdown Using CSS &lt;/title&gt; &lt;style&gt; ul { padding: 0; l
2 min read
Foundation CSS Dropdown Menu JavaScript Reference
Foundation CSS is an open-source and responsive front-end framework built by the ZURB foundation in September 2011, that makes it easy to layout stunning responsive websites, apps, and emails that appear amazing and can be accessible to any device. The Dropdown Menu is used for displaying an expandable dropdown menu by using the Foundation CSS plug
6 min read
Foundation CSS Dropdown Menu
Foundation CSS is an open-source &amp; responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to design beautiful responsive websites, apps, and emails that look amazing &amp; can be accessible to any device. It is used by many companies such as Facebook, eBay, Mozilla, Adobe, and even Disney. The framework is
3 min read
Foundation CSS Vertical Dropdown Menu
Foundation CSS is an open-source and responsive front-end framework created by ZURB in September 2011 that makes it simple to create stunning responsive websites, apps, and emails that operate on any device. Many companies, like Facebook, eBay, Mozilla, Adobe, and even Disney, use it. This framework is based on bootstrap, which is similar to SaaS.
3 min read
Foundation CSS Kitchen Sink Dropdown Menu
Foundation CSS is an open-source &amp; responsive front-end framework built by the ZURB foundation in September 2011, which makes it easy to design beautiful responsive websites, apps, and emails that look amazing &amp; can be accessible to any device. The framework is built on SaaS-like bootstrap. It is more sophisticated, flexible, and easily cus
3 min read
Foundation CSS Horizontal Dropdown Menu
Foundation CSS is the frontend framework of CSS that is used to build responsive websites, apps, and emails that work perfectly on any device. It is written using HTML, CSS, and Javascript and is used by many famous companies like Amazon, Facebook, eBay, etc. It uses packages like Grunt and Libsass for fast coding and controlling and Saas compiler
2 min read
Foundation CSS Sticky Navigation Dropdown Menu
Foundation CSS is an open-source front-end framework that is used to build an attractive responsive website, email, or app quickly and easily. In September 2011, ZURB published it. It is used by many companies, including Facebook, eBay, Mozilla, Adobe, and even Disney. The Bootstrap framework serves as the foundation for this platform, which mimics
7 min read
Article Tags :
We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox