1. Overlays
  2. Dropdowns

Components

Tailwind CSS Dropdowns - Preline UI

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

Requires JS

Basic usage

Example

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

The best part is you can do this with any button variant, too.

Default

The default dropdown menu appearance.

Hover event

The default trigger mode is click, you can change it to hover.

Dividers

The default dropdown menu with dividers.

Icons

The default dropdown menu with icons.

Title

The default dropdown menu with title.

With header

The default dropdown menu with header.

Custom trigger

The default dropdown menu with custom trigger.

Custom icon trigger

The default dropdown menu with custom icon-trigger.

Animations

Slide up animation

The base dropdown menu with slide up animation.

Transform style

We are using Popperjs library for dropdown and tooltips and this library uses hardcoded styles like transform for menu positioning. In this situation we can use Tailwind translate classes for sub-container inside menu, also just add data-hs-transition attribute for the sub-container.

Options

Auto close behavior

By default, the dropdown menu is closed when clicking inside or outside the dropdown menu. You can use the data-hs-dropdown-auto-close="inside | outside | false" option to change this behavior of the dropdown.

Make the dropdown item appear with checkbox.

Make the dropdown item appear with radio.

Directions

Use data-hs-dropdown-placement="bottom | bottom-left | bottom-right" to trigger dropdown menus above elements.

This example uses data-hs-dropdown-placement="bottom-right".

Dropup

Use data-hs-dropdown-placement="top | top-left | top-right" to trigger dropdown menus above elements.

This example uses data-hs-dropdown-placement="top-left".

Dropright

Use data-hs-dropdown-placement="right | right-top | right-bottom" to trigger dropdown menus at the right of the elements.

This example uses data-hs-dropdown-placement="right-top".

Dropleft

Use data-hs-dropdown-placement="left | left-top | left-bottom" to trigger dropdown menus at the left of the elements.

This example uses data-hs-dropdown-placement="top-left".

Responsive alignment

Control dropdown menu positions on the different breakpoints.

Resize the window to see it in action.

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
data-hs-dropdown-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
data-hs-dropdown-auto-close Specifies the zone, when clicked, which will close the menu inside | outside | false true
data-hs-dropdown-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
data-hs-dropdown-trigger Event to trigger a dropdown hover | click click

Classes

Name Description
hs-dropdown Dropdown container
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) => {...})