Menu

A dropdown menu triggered by a button. Supports keyboard navigation, type-ahead search, disabled items, and separators.

Primitive: MenuARIA: role="menu" + role="menuitem"Keyboard: Arrow, Enter, Space, Escape, Type-ahead
Edit
Duplicate
Archive
Delete
menu.rs
use stratum_leptos::*;

view! {
    <Menu>
        <MenuTrigger>
            <Button variant=ButtonVariant::Outline>"Actions"</Button>
        </MenuTrigger>
        <MenuContent>
            <MenuItem>"Edit"</MenuItem>
            <MenuItem>"Duplicate"</MenuItem>
            <MenuItem>"Archive"</MenuItem>
            <MenuSeparator />
            <MenuItem destructive=true>"Delete"</MenuItem>
        </MenuContent>
    </Menu>
}

Installation

stratum add menu

Props

PropTypeDefaultDescription
openOption<bool>NoneControlled open state
on_open_changeOption<Callback<bool>>NoneFires when menu opens/closes
on_selectOption<Callback<String>>NoneFires when a menu item is activated

Accessibility

  • Trigger: aria-haspopup="menu", aria-expanded.
  • Menu content: role="menu". Items: role="menuitem".
  • Arrow keys navigate items (skipping disabled). Enter/Space activate.
  • Escape closes. Type-ahead: typing a character focuses matching item.

Source

Primitive: menu.rs