Dropdown Menu
Displays a menu of actions or options triggered by a button.
Preview
Open Menu
My Account
Profile
Settings
Billing
Log out
Usage
<ui-dropdown-menu>
<ui-dropdown-menu-trigger>Open Menu</ui-dropdown-menu-trigger>
<ui-dropdown-menu-content class="w-56">
<ui-dropdown-menu-group>
<ui-dropdown-menu-label>My Account</ui-dropdown-menu-label>
<ui-dropdown-menu-item>Profile</ui-dropdown-menu-item>
<ui-dropdown-menu-item>Settings</ui-dropdown-menu-item>
<ui-dropdown-menu-item>Billing</ui-dropdown-menu-item>
</ui-dropdown-menu-group>
<ui-dropdown-menu-separator></ui-dropdown-menu-separator>
<ui-dropdown-menu-item>Log out</ui-dropdown-menu-item>
</ui-dropdown-menu-content>
</ui-dropdown-menu>
Sub-components
<ui-dropdown-menu> <ui-dropdown-menu-trigger> <ui-dropdown-menu-content> <ui-dropdown-menu-item> <ui-dropdown-menu-checkbox-item> <ui-dropdown-menu-radio-group> <ui-dropdown-menu-radio-item> <ui-dropdown-menu-label> <ui-dropdown-menu-separator> <ui-dropdown-menu-shortcut> <ui-dropdown-menu-group> <ui-dropdown-menu-portal> <ui-dropdown-menu-sub> <ui-dropdown-menu-sub-trigger> <ui-dropdown-menu-sub-content>
Props
<ui-dropdown-menu-content>
| Prop | Type | Default | Description |
|---|
align | "start" | "center" | "end" | "start" | Alignment of the content. |
<ui-dropdown-menu-item> Custom wrapper
| Prop | Type | Default | Description |
|---|
href | string | — | URL to navigate to. Renders as a link when set. (Custom prop) |
All components also accept standard HTML attributes (class, id, style, data-*, aria-*, etc.) which are passed through to the underlying element.