• overlays
  • Dropdown

overlays

Tailwind CSS Dropdown

The Dropdown neatly displays Dropdown or content using a JavaScript plugin, offering a compact interface for easy navigation and space-saving.

Require FlyonUI JS
Class Name
Type
Description
dropdownComponentContainer for the dropdown.
dropdown-toggleComponentToggle button for the dropdown.
dropdown-menuComponentContainer for the dropdown menu.
dropdown-toggle-wrapperModifierA wrapper for a Dropdown toggle, this is useful when some other element is placed in the Dropdown toggle. For example. if you want to place a “+” button inside an existing Dropdown toggle button that opens a modal.
dropdown-itemModifierStyles applied to individual dropdown items.
vertical-scrollbarModifierApplies overflow-y-auto and custom styling to scrollbar.
dropdown-open:{tw-utility-class}ModifierModifies tailwind classes when the dropdown menu is open.
dropdown-closeModifierDropdown close element (can be multiple).
dropdown-headerModifierAdds a header to the dropdown.
dropdown-footerModifierAdds a footer to the dropdown.
dropdown-titleModifierAdds a title to the dropdown.
activeModifierApplies active styling to dropdown items.
disabledModifierApplies disabled styling to dropdown items.

Basic example

Default

Basic dropdown example.

Menu content

Dropdown header

Use dropdown-header class to display extra information separately from the menu items in the dropdown.

Dropdown footer

Use the dropdown-footer class to present additional information distinct from the dropdown menu items, at the bottom.

Dropdown title

Use dropdown-title class to present titile for the dropdown content.

Dropdown form

Using form within a dropdown menu.

Dropdown radio

Put radio inside dropdown-item. Make the dropdown item appear with radio.

Dropdown checkbox

Put checkbox inside dropdown-item. Make the dropdown item appear with checkbox.

Dropdown with switch

Put switch inside dropdown-item. Make the dropdown item appear with switch.

Nested dropdowns

Create nested dropdowns by adding a dropdown within a dropdown.

Custom trigger

Menu icon

Use the menu icon trigger element on components such as cards as an alternative element to the button.

Split dropdown

Demonstration of a split dropdown.

Tigger with avatar

Dropdown with avatar.

Animations

Slide up animation

The basic dropdown menu featuring a slide-up animation.

Transform animation

Use dropdown-open:{tw-utility-class} modifier to introduce animation to your dropdown menu. The following example demonstrates a scaling animation.

Animation items

Apply the dropdown-open:{tw-utility-class} modifier to introduce animation to your dropdown menu sub container. Also add data-dropdown-transition attribute for the sub-container.

The following example demonstrates a translate animation of content.

Dropdown state

Active state

Add class .active to set the active state.

Disabled state

Add class .disabled to set the disabled state.

Illustrations

Hover

The default trigger mode is click, you can change it to hover by adding [--trigger:hover] with dropdown.

Dividers

The default dropdown menu with dividers.

Icons

The standard dropdown menu featuring icons.

Shortcuts

The standard dropdown menu with shortcuts using keyboard component.

Dropdown with scrollable body

Apply the vertical-scrollbar class to create a scrollable area, and define the minimum height for this container.

Dropdown input

With join you can combine a dropdown and input into one unit.

Responsive

Dropright at sm

Apply the Responsive modifier to adapt the dropdown position across different viewport sizes.

For instance, for below example the initial position is set to bottom-start, and it changes to right-start above the ‘sm’ breakpoint.

Options usage

Auto close behavior

By default, clicking inside or outside the dropdown menu will close it. You can modify this behavior using the [--auto-close="true(DEFAULT) | inside | outside | false"] option.

  • true: The dropdown closes when clicked both inside and outside.
  • inside: Allow click inside dropdown mainly for input component.
  • outside: Allow click outside dropdown.
  • false: The dropdown only closes when the button is clicked.

Strategy

By default, the strategy is set to ‘fixed’. To switch it to ‘absolute’, use the [--strategy:*] option.

Offset

Use [--offset:*] to set the number of pixels you want the dropdown menu to be offset from the trigger element.

Skidding

Use [--skidding:*] to move up or down (or left and right) the dropdown menu along and relative to the trigger element.

No flip

If you prefer to disable the automatic positioning of the dropdown-menu.

Direction

By default the dropdown direction is bottom-start. To change it use [--placement:*]. For centered use simple top, bottom, right, left direction.

Dropup

Use [--placement:top | top-start | top-end] class to trigger dropup menus above elements.

Dropdown

Use [--placement:bottom | bottom-start(DEFAULT) | bottom-end] class to trigger dropdown menus above elements.

Dropright

Use [--placement:right | right-start | right-end] class to trigger dropright menus above elements.

Dropleft

Use [--placement:left | left-start | left-end] class to trigger dropleft menus above elements.

Accessibility notes

Keyboard interactions

COMMAND
DESCRIPTION
EnterActivates the selected tab.
A-Z a-z
Focuses first item that matches keyboard input.
Home End
Focuses first/last non-disabled item.
EscCloses any open Menus.
Focuses previous/next non-disabled item.

JavaScript behavior

Options

PARAMETERS
DESCRIPTION
OPTIONS
DEFAULT VALUE
data-dropdown-transitionA data attribute is used to specify the container that will undergo animation.--
[--placement:*]Defines the menu’s position upon opening.top, top-start, top-end, bottom, bottom-start, bottom-end, right, right-start, right-end, left, left-start, left-endbottom-start
[--auto-close:*]Specifies the area where clicking is allowed.inside, outside, false, truetrue
[--strategy:*]Indicates the area that, when clicked, will trigger the menu to close.fixed, absolutefixed
[--offset:*]Adjusts the dropdown’s offset from the bottom or top.number5
[--skidding:*]Adjusts the dropdown’s skidding from the right or left.number0
[--flip:*]Changes the menu’s position to prevent overlapping with its reference element.true, falsetrue
[--trigger:*]Event to trigger a dropdownhover , clickclick

Methods

The HSDropdown object is contained within the global window object.

METHOD
DESCRIPTION
PUBLIC METHODS
open()Opens the dropdown menu forcefully.
close(isAnimated)
Closes the dropdown menu forcefully.
  • isAnimated boolean: Indicates if the dropdown menu should close with animation.
forceClearState()Completely removes the dropdown.
STATIC METHODS
HSDropdown.getInstance(target)
Retrieves the element associated with the target.
  • The target can be either a Node or a string (a valid CSS selector).
HSDropdown.open(target)
Forces the dropdown menu to open.
  • The target must be a Node.
HSDropdown.close(target)
Forces the dropdown menu to close.
  • The target must be a Node.

Method usage

Below, is the demonstration on how to use the public methods. Apply the ID to the dropdown component class. To test other methods, copy the following methods into your console and click the button.

Open item (public method).

// This method is used in above example.
const dropdown = new HSDropdown(document.querySelector('#dropdown-method'));
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.open('#dropdown-method');
});

Open item (mixed).

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

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

Events

METHOD
DESCRIPTION
on:openTriggered whenever a dropdown menu is opened.
on:closeTriggered whenever a dropdown menu is closed.

Event usage

Below, is the demonstration on how to use the event. Apply the ID to the dropdown component class. To test these event, copy the following event into your console and click the button.

Open any dropdown event example.

const { element } = HSDropdown.getInstance('#dropdown-event', true)

element.on('open', (instance) => {console.log("open")});
element.on('close', (instance) => {console.log("close")});