How to Create an Interactive Dropdown Menu with Tailwind CSS & JavaScript

Dropdown menus are a common UI element in web development, often used for navigation, forms, or other interactive components. In this blog post, we'll walk through how to create an interactive dropdown menu using Tailwind CSS and JavaScript. Tailwind CSS is a utility-first CSS framework that makes it easy to style your components, and JavaScript will handle the interactivity.

If you're a developer or just starting out.
I recommend signing up for our free newsletter 'ACE Dev' .
It gets delivered to your inbox and includes actionable steps and helpful resources.
Join us now

By the end of this tutorial, you'll have a fully functional dropdown menu that toggles visibility when clicked and closes when clicking outside the menu.

Table of Contents

1. Setting Up the Project
2. Creating the Dropdown Structure with Tailwind CSS
3. Adding Interactivity with JavaScript
4. Final Code
5. Conclusion

1. Setting Up the Project

Before we start, make sure you have Tailwind CSS set up in your project. If you haven't already, you can install Tailwind CSS via npm:

npm install tailwindcss

Then, create a tailwind.config.js file and include Tailwind in your CSS:

npx tailwindcss init

Add the following to your src/styles.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

Finally, include your compiled CSS file in your HTML:

<link href="/dist/output.css" rel="stylesheet">

2. Creating the Dropdown Structure with Tailwind CSS

Let's start by creating the HTML structure for the dropdown menu. We'll use Tailwind's utility classes to style the dropdown.

<div class="relative inline-block text-left">
  <!-- Dropdown Button -->
  <button id="dropdownButton" class="bg-blue-500 text-white px-4 py-2 rounded-md focus:outline-none">
    Options
  </button>

  <!-- Dropdown Menu -->
  <div id="dropdownMenu" class="hidden absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5">
    <div class="py-1" role="menu" aria-orientation="vertical">
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">Profile</a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">Settings</a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">Logout</a>
    </div>
  </div>
</div>

Explanation:

• relative: Positions the dropdown container relative to its parent.
• hidden: Initially hides the dropdown menu.
• absolute: Positions the dropdown menu absolutely within the container.
• mt-2: Adds margin-top to separate the menu from the button.
• rounded-md, shadow-lg, bg-white: Styles the dropdown menu with rounded corners, a shadow, and a white background.

3. Adding Interactivity with JavaScript

Now, let's add JavaScript to toggle the dropdown menu's visibility and close it when clicking outside.

Step 1: Toggle Dropdown Visibility

Add the following JavaScript to handle the dropdown toggle:

// Get references to the button and dropdown menu
const dropdownButton = document.getElementById('dropdownButton');
const dropdownMenu = document.getElementById('dropdownMenu');

// Toggle dropdown visibility
dropdownButton.addEventListener('click', () => {
  dropdownMenu.classList.toggle('hidden');
});

Step 2: Close Dropdown When Clicking Outside

To close the dropdown when clicking outside, add the following:

document.addEventListener('click', (event) => {
  const isClickInside = dropdownButton.contains(event.target) || dropdownMenu.contains(event.target);
  if (!isClickInside) {
    dropdownMenu.classList.add('hidden');
  }
});

Explanation:

• classList.toggle('hidden'): Toggles the hidden class to show or hide the dropdown.
• contains(event.target): Checks if the click occurred inside the dropdown button or menu.

4. Final Code

Here’s the complete code for the dropdown menu:

HTML

<div class="relative inline-block text-left">
  <!-- Dropdown Button -->
  <button id="dropdownButton" class="bg-blue-500 text-white px-4 py-2 rounded-md focus:outline-none">
    Options
  </button>

  <!-- Dropdown Menu -->
  <div id="dropdownMenu" class="hidden absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5">
    <div class="py-1" role="menu" aria-orientation="vertical">
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">Profile</a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">Settings</a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">Logout</a>
    </div>
  </div>
</div>

JavaScript

const dropdownButton = document.getElementById('dropdownButton');
const dropdownMenu = document.getElementById('dropdownMenu');

// Toggle dropdown visibility
dropdownButton.addEventListener('click', () => {
  dropdownMenu.classList.toggle('hidden');
});

// Close dropdown when clicking outside
document.addEventListener('click', (event) => {
  const isClickInside = dropdownButton.contains(event.target) || dropdownMenu.contains(event.target);
  if (!isClickInside) {
    dropdownMenu.classList.add('hidden');
  }
});

If you're a developer or just starting out.
I recommend signing up for our free newsletter 'ACE Dev' .
It gets delivered to your inbox and includes actionable steps and helpful resources.
Join us now

5. Conclusion

Congratulations! You've successfully created an interactive dropdown menu using Tailwind CSS and JavaScript. This dropdown is lightweight, customizable, and works seamlessly across modern browsers.

You can further enhance this dropdown by adding animations, integrating it into a navigation bar, or using a framework like Alpine.js for more advanced interactivity.

Happy coding!