Dropdown Menu Components

Basic Dropdown Menu

Click the button to reveal menu options.

Multiple Dropdown Examples

Different dropdown variations and use cases.

Nested Dropdown Menus

Create multi-level menus with submenu support.

Custom Triggers

Dropdowns can be triggered by any element, including icons and custom buttons.

Custom Button Style

Icon-Only Trigger

States and Disabled Items

Dropdown items support various states and can be disabled.

Item States

Mixed Content

Automatic Positioning

Dropdowns use Alpine Anchor with Floating UI for intelligent positioning.

All dropdowns automatically adjust their position to stay within the viewport. They will flip from bottom to top when there's insufficient space below, and adjust horizontally to avoid overflow.

Scroll to bottom of page and click to see the menu flip upward automatically.

Real-World Integration

Dropdown menus integrated with other components.

Note:

When using dropdowns inside tables, set overflow=false on the Table component to prevent the dropdown from being clipped by the table's overflow container.

Name	Status	Role
U1 User 1	Active	Member
U2 User 2	Inactive	Member
U3 User 3	Active	Member