Tailwind CSS Dropdown

A dropdown menu displays a list of actions and more with JavaScript dropdown plugin.

Installation

To get started, install Dropdown plugin via npm, else you can skip this step if you are already using Preline UI as a package.

                      
                        npm i @preline/dropdown

Wrap the dropdown's toggle (your button or link) and the dropdown menu within .relative, or another element that declares position: relative;. Dropdown can be triggered from <a> or <button> elements to better fit your potential needs.

Copy

                          
                            <div class="hs-dropdown relative inline-flex">
                              <button id="hs-dropdown-basic" type="button" class="hs-dropdown-toggle py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-blue-600 transition-all text-sm dark:bg-slate-900 dark:hover:bg-slate-800 dark:border-gray-700 dark:text-gray-400 dark:hover:text-white dark:focus:ring-offset-gray-800">
                                Actions
                                <svg class="hs-dropdown-open:rotate-180 w-2.5 h-2.5 text-gray-600" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                  <path d="M2 5L8.16086 10.6869C8.35239 10.8637 8.64761 10.8637 8.83914 10.6869L15 5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                                </svg>
                              </button>

                              <div class="hs-dropdown-menu transition-[opacity,margin] duration hs-dropdown-open:opacity-100 opacity-0 w-56 hidden z-10 mt-2 min-w-[15rem] bg-white shadow-md rounded-lg p-2 dark:bg-gray-800 dark:border dark:border-gray-700 dark:divide-gray-700" aria-labelledby="hs-dropdown-basic">
                                <a class="flex items-center gap-x-3.5 py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 focus:ring-2 focus:ring-blue-500 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300" href="#">
                                  Newsletter
                                </a>
                                <a class="flex items-center gap-x-3.5 py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 focus:ring-2 focus:ring-blue-500 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300" href="#">
                                  Purchases
                                </a>
                                <a class="flex items-center gap-x-3.5 py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 focus:ring-2 focus:ring-blue-500 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300" href="#">
                                  Downloads
                                </a>
                                <a class="flex items-center gap-x-3.5 py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 focus:ring-2 focus:ring-blue-500 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300" href="#">
                                  Team Account
                                </a>
                              </div>
                            </div>

Basic usage

Prefer to create your own style? Here is a completely unstylized example.

                      
                        <div class="hs-dropdown relative inline-flex">
                          <button id="hs-dropdown-unstyled" type="button" class="hs-dropdown-toggle inline-flex justify-center items-center gap-x-2">
                            Actions
                            <svg class="hs-dropdown-open:rotate-180 w-2.5 h-2.5" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                              <path d="M2 5L8.16086 10.6869C8.35239 10.8637 8.64761 10.8637 8.83914 10.6869L15 5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                            </svg>
                          </button>

                          <div class="hs-dropdown-menu transition-[opacity,margin] duration hs-dropdown-open:opacity-100 opacity-0 w-56 hidden z-10 mt-2 min-w-[15rem] bg-white" aria-labelledby="hs-dropdown-unstyled">
                            <a class="block" href="#">Newsletter</a>
                            <a class="block" href="#">Purchases</a>
                            <a class="block" href="#">Downloads</a>
                            <a class="block" href="#">Team Account</a>
                          </div>
                        </div>

Accessibility notes

Keyboard interactions

Command	Description
`Enter`	Activates the selected tab
`ArrowUp` and `ArrowDown`	Focuses previous/next non-disabled item
`Home` and `End`	Focuses first/last non-disabled item
`Esc`	Closes any open Menus
`A-Z` `a-z`	Focuses first item that matches keyboard input

JavaScript behavior

Options

Parameters	Description	Options	Default value
`[--placement:*]`	Specifies the position of the menu when opened	top \| top-left \| top-right \| bottom \| bottom-left \| bottom-right \| right \| right-top \| right-bottom \| left \| left-top \| left-bottom	`bottom`
`data-hs-dropdown-transition`	Data attribute to designate the container to be animated	No options
`[--auto-close:*]`	Specifies the zone, when clicked, which will close the menu	inside \| outside \| false	`true`
`[--strategy:*]`	Sets the position to `absolute` instead of `fixed`, and removes the `transform` styles to position the menu `relative` to the relative parent block.	fixed \| absolute	`fixed`
`[--trigger:*]`	Event to trigger a dropdown	hover \| click	`click`

Classes

Name	Description
`hs-dropdown`	Dropdown container
`hs-dropdown-open`	Dropdown open
`hs-dropdown-toggle`	Dropdown toggle
`hs-dropdown-active`	The modifier that allows you to set tailwind classes when the dropdown menu is open

Methods

The HSDropdown object is contained within the global window object

Method	Description
`HSDropdown.open($dropdownEl)`	Open dorpdown menu
`HSDropdown.close($dropdownEl)`	Close dropdown menu
`HSDropdown.toggle($dropdownEl)`	Toggle dropdown menu

Events

Method	Description
`open.hs.dropdown`	Called when any dropdown menu is opened.
`close.hs.dropdown`	Called when any dropdown menu is closed.

Open any dropdown menu event example.

                      
                        window.addEventListener('open.hs.dropdown', ($dropdownEl) => {...})

                        // OR

                        HSDropdown.on('open', ($dropdownEl) => {...})

Open specific dropdown menu event example.

                      
                        $dropdownEl.addEventListener('open.hs.dropdown', (evt) => {...})

Demo examples

Looking for prebuilt UI components based on the Tailwind CSS? Preline UI packs hundreds of component examples for all your website needs.

Check out Preline UI Dropdown