Dropdown Menu

A floating menu anchored to a trigger, with keyboard navigation and Floating UI positioning.

<.dropdown_menu></.dropdown_menu>

Examples

With label and separator

Group items under a label with a separator before a destructive action.

<.dropdown_menu id="example-dropdown-menu">
  <:trigger><.button variant="outline">Open menu</.button></:trigger>
  <.dropdown_menu_label>My Account</.dropdown_menu_label>
  <.dropdown_menu_item id="example-dropdown-menu">
    Profile
    <.dropdown_menu_shortcut>⇧⌘P</.dropdown_menu_shortcut>
  </.dropdown_menu_item>
  <.dropdown_menu_item id="example-dropdown-menu">
    Billing
    <.dropdown_menu_shortcut>⌘B</.dropdown_menu_shortcut>
  </.dropdown_menu_item>
  <.dropdown_menu_item id="example-dropdown-menu">
    Settings
    <.dropdown_menu_shortcut>⌘S</.dropdown_menu_shortcut>
  </.dropdown_menu_item>
  <.dropdown_menu_separator />
  <.dropdown_menu_item id="example-dropdown-menu">
    Log out
  </.dropdown_menu_item>
</.dropdown_menu>

Show code

Props

Name	Type	Default	Values
class	:string
id	:string
inner_block (slot)	:slot
trigger (slot)	:slot