Skip to content
kapable

Menu

Actions · 5 exports · v0.1.0 · showcase

Keyboard-navigable action menu family with items and one-level submenus.

Browse 72 component families

Menu is a client popup; a permanently open imitation would not represent its focus and dismissal behavior. This server-rendered page does not imitate client behavior. Open the live playground.

Usage

Menu usage
<Menu label="Row actions" trigger="⋯"><MenuItem name="rename">Rename</MenuItem><Submenu label="Move to">…</Submenu></Menu>

API

Menu API

MenuProps

Menu props
proptypenotes
labelstringAccessible name for the menu ("Row actions", "View").
trigger?RemixNodeTrigger content. Defaults to the label text; pass a glyph ("⋯") for icon triggers — the label still names the control for AT.
variant?BtnVariantTrigger button look (default quiet — menus are secondary chrome).
size?BtnSize
children?RemixNodeMenuItem children (plus kit Separators between groups).
disabled?boolean
mix?MixInput

MenuItemProps

MenuItem props
proptypenotes
namestringSelection identity — `onMenuSelect` events carry it.
type?'checkbox' | 'radio''checkbox' | 'radio' for stateful items; omit for plain actions.
checked?boolean
value?string
disabled?boolean
searchValue?string | string[]Typeahead value(s) when children aren't plain text.
children?RemixNode
mix?MixInput

SubmenuProps

Submenu props
proptypenotes
labelstringThe trigger row's label.
menuLabel?stringAccessible name for the CHILD menu (defaults to `label`).
disabled?boolean
searchValue?string | string[]Typeahead aliases — additive to the label (kit law).
children?RemixNodeMenuItem children of the child menu.
mix?MixInput

More in Actions

More in Actions