1. Plugins
  2. Dropdown

Plugins

Tailwind CSS Dropdown

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

Image Description

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
                      
                    

Example

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.

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
                          </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-60 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>
                      
                    

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.

Options

Parameters Description Options Default value
data-hs-dropdown-transition Data attribute to designate the container to be animated.
[--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
[--auto-close:*] Specifies the zone, when clicked, which will close the menu. "inside" | "outside" | "false" | "true" 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
[--offset:*] Sets the dropdown's bottom or top offset. number 10
[--flip:*] Flips the menu's placement when it starts to overlap its reference element. "true" | "false" true
[--trigger:*] Event to trigger a dropdown. "hover" | "click" click

Classes

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

Methods

The HSDropdown object is contained within the global window object

Method Description
Public methods
open() Force open dropdown menu.
close(isAnimated) Force close dropdown menu.
  • isAnimated boolean. Indicates whether the dropdown menu is closed with animation
forceClearState() Destroy dropdown.
Static methods
HSDropdown.getInstance(target) Returns the element associated to the target.
  • target should be a Node or string (valid selector)
HSDropdown.open(target) Open dropdown menu.
  • target should be a Node
HSDropdown.close(target) Close dropdown menu.
  • target should be a Node

Open item (public method).

                      
                        const dropdown = new HSDropdown(document.querySelector('#dropdown'));
                        const openBtn = document.querySelector('#open-btn');

                        openBtn.addEventListener('click', () => {
                          dropdown.open();
                        });
                      
                    

Open item (static method).

                      
                        const openBtn = document.querySelector('#open-btn');

                        openBtn.addEventListener('click', () => {
                          HSDropdown.show('#dropdown');
                        });
                      
                    

Open item (mixed).

                      
                        const { element } = HSDropdown.getInstance('#dropdown', true);
                        const openBtn = document.querySelector('#open-btn');

                        openBtn.addEventListener('click', () => {
                          element.show();
                        });
                      
                    

Events

Method Description
on:open Called when any dropdown menu is opened.
on:close Called when any dropdown menu is closed.

Call any function on open example.

                      
                        const el = HSDropdown.getInstance('#dropdown');

                        el.on('open', (instance) => {...});
                      
                    

Demo examples

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

Image Description
Check out Preline UI Dropdown