Custom Dropdown Component with Tailwind CSS for Your React Apps

Dropdowns are essential UI components for selecting options in forms, filters, and menus. They enhance user experience by keeping the interface clean and organized.

In this article, we’re introducing a React custom dropdown component styled with Tailwind CSS. This dropdown is accessible, responsive, and easy to integrate into any project.

Custom Dropdown Component Preview

Here’s what the dropdown looks like:

React Tailwind Custom Dropdown Code

Dropdown Component functionality:

1. State Management:
   • selectedOption tracks the currently selected item in the dropdown, initialized with "Select Niche."
   • isVisible determines if the dropdown menu is open or closed.
2. Outside Click Handling:
   • Uses useEffect to close the dropdown if the user clicks outside it. The dropdownRef references the dropdown element to check if the click is external.
3. Dropdown Toggle and Selection:
   • Clicking the button toggles the dropdown menu visibility.
   • Clicking a menu item updates the selectedOption state and closes the menu.
4. Chevron Icon:
   • The ChevronDown component renders a dynamic SVG icon, rotating it when the dropdown is visible.
5. Styling:
   • Tailwind CSS classes are used for styling, with responsive hover and focus effects for accessibility.

To adjust the component, update:

• The options prop array for dropdown items.
• selectedOption initialization for the default placeholder text.

Copy
1import { useEffect, useRef, useState } from 'react'
2
3const ChevronDown = ({ size = 20 }: { size?: number }) => (
4  <svg
5    width={size}
6    height={size}
7    viewBox="0 0 20 20"
8    fill="none"
9    xmlns="http://www.w3.org/2000/svg"
10    aria-hidden="true"
11  >
12    <path
13      d="M5 7.5L10 12.5L15 7.5"
14      stroke="currentColor"
15      strokeWidth="1.5"
16      strokeLinecap="round"
17      strokeLinejoin="round"
18    />
19  </svg>
20)
21
22const Dropdown = ({ options }: { options: string[] }) => {
23  const [selectedOption, setSelectedOption] = useState<string | null>(
24    'Select Niche',
25  )
26  const [isVisible, setIsVisible] = useState<boolean>(false)
27  const dropdownRef = useRef<HTMLDivElement>(null)
28
29  useEffect(() => {
30    const handleOutsideClick = (event: MouseEvent) => {
31      if (
32        isVisible &&
33        dropdownRef.current &&
34        !dropdownRef.current.contains(event.target as Node)
35      ) {
36        setIsVisible(false)
37      }
38    }
39
40    document.addEventListener('click', handleOutsideClick)
41    return () => {
42      document.removeEventListener('click', handleOutsideClick)
43    }
44  }, [isVisible])
45
46  const handleOptionClick = (option: string) => {
47    setSelectedOption(option)
48    setIsVisible(false)
49  }
50
51  return (
52    <div ref={dropdownRef} className="dropdown relative w-44">
53      <button
54        type="button"
55        onClick={() => setIsVisible(!isVisible)}
56        className={`inline-flex w-full items-center justify-between rounded-md border border-gray-300 bg-white p-3 text-sm font-medium text-gray-700 outline-none hover:border-gray-400 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 ${
57          !options.length ? 'cursor-not-allowed text-gray-400' : ''
58        }`}
59        aria-expanded={isVisible}
60        aria-controls="dropdown-menu"
61        disabled={!options.length}
62      >
63        {selectedOption || 'Select a category'}
64        <span
65          className={`transform transition-transform duration-200 ${
66            isVisible ? 'rotate-180' : ''
67          }`}
68        >
69          <ChevronDown size={20} />
70        </span>
71      </button>
72
73      {isVisible && options.length > 0 && (
74        <ul
75          id="dropdown-menu"
76          role="menu"
77          className="absolute z-10 mt-2 w-full scale-100 rounded-md border border-gray-200 bg-white opacity-100 shadow-lg transition-all duration-300 ease-in-out"
78        >
79          {options.map((option) => (
80            <li
81              key={option}
82              role="menuitem"
83              tabIndex={0}
84              onClick={() => handleOptionClick(option)}
85              className="cursor-pointer px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-600 focus:bg-blue-100 focus:text-blue-700 focus:outline-none"
86            >
87              {option}
88            </li>
89          ))}
90        </ul>
91      )}
92    </div>
93  )
94}
95
96export default Dropdown

How to Use Custom Dropdown Component

1. Add the Dropdown Component:

Import the dropdown component into your React project:

Copy
1import Dropdown from './Dropdown'

2. Provide Options:

Pass an array of options to the component as a prop:

Copy
1const categories = ['Technology', 'Health', 'Finance', 'Education', 'Travel']
2
3<Dropdown options={categories} />

Looking for more ready-to-use React components? Explore FlexyUI for more beautiful and functional components!