Urbicon UI

Menu

Action menu for invoking actions. Items dispatch onSelect callbacks. For selecting a value from a list, use Select.

Last action: —

Trigger Variant

Tier

Item Size

Chevron Animation

Sync Width

Disabled

Loading

Trigger Intent

Trigger Size

Placement

Placeholder

Loading syntax highlighting...

01 When to use Menu (vs. Select)

02 Examples

Basic actions

Items array — each item carries an onSelect callback. Sections group related actions; the menu closes after activation unless keepOpen is set on the item.

Last action: —

Loading syntax highlighting...

Declarative children

Build the menu with MenuItem, MenuSection and MenuDivider instead of an items array. Pass onSelect on each MenuItem to wire the action.

Last action: —

Loading syntax highlighting...

Custom trigger (icon button)

Replace the default trigger entirely via the customTrigger snippet. Receives dismiss + open — typical pattern is an icon-only button like MoreHorizontal.

Last action: —

Loading syntax highlighting...

Custom header & footer

Inject custom header and footer regions via the customHeader and customFooter snippets. Useful for sign-in banners or destructive footer actions.

Last action: —

Loading syntax highlighting...

Custom per-item renderer

Full control over each list item via the customItem snippet. Receives the item and an activate() callback that dispatches the item's onSelect and closes the menu.

Last action: —

Loading syntax highlighting...

03 Accessibility

Built-in ARIA

Uses role="menu" on the panel and role="menuitem" on each item, with aria-haspopup="menu" + aria-expanded on the trigger. Sub-menus add aria-haspopup="menu" on the submenu trigger.

Keyboard

Enter / Space on the trigger to open. Items are reachable via Tab (W3C menu pattern); Enter / Space activates an item. Escape closes the menu and restores focus to the trigger.

Focus Management

On activation the menu closes and focus returns to the trigger. Items with keepOpen dispatch their action without closing — useful for repeated actions like "Add tag".

04 API Reference

17 props

17 props

No matching properties

No matching properties

05 Installation

Import

Loading syntax highlighting...