Menu

A dropdown for ⋯ record actions, column, sort, and filter menus — the same popover surface as Select: radius 12, the layered popover shadow, over 32px items.

Installation

npm install @crisp-ui-kit/crisp

Props

Menu

MenuItem

MenuRadioItem

A MenuItem with role="menuitemradio"; it takes the MenuItem props.

MenuCheckboxItem

Also exported: MenuSeparator and MenuLabel for section headers.

Notes

• Keyboard. Opens on click / ↓ / Enter and focuses the first item; ↑/↓ move (wrapping), Home/End jump, typing does typeahead, Enter/Space select, Esc closes and returns focus to the trigger, Tab closes.
• Placement. Opens below-left of the trigger, flips up when there's no room and right-aligns with align="end"; closes on outside pointer-down. side="top" (crisp#1297) opens it above the trigger instead, as Linear's create dialog does for its "..." menu, and falls back below when there is no room; the default side="bottom" is unchanged. The menu also stays inside the window horizontally (crisp#1294), so a trigger near the right edge no longer opens it off-screen.
• Submenus. Nest a Menu with placement="submenu" inside a menu, with a MenuItem as its trigger (crisp#1270). It opens on hover after a 150ms intent delay (a safe triangle keeps it open while the pointer crosses sibling rows) and on ArrowRight, Enter or Space; ArrowLeft and Escape close only that level and return focus to its row. Selecting a leaf closes the whole stack. The chevron is drawn for you. maxHeight (px, any CSS length, or "none") lifts the 360px cap on a long menu.
• Shortcuts and checkable rows. shortcut takes a string or an array; an array draws one <kbd> per key (crisp#1271). MenuItem takes role ("menuitem", "menuitemradio" or "menuitemcheckbox") and checked, which draws a leading check and sets aria-checked; MenuRadioItem is a MenuItem with role="menuitemradio". MenuCheckboxItem also takes icon, shortcut, count and closeOnSelect.
• Semantics. role="menu" over role="menuitem" / role="menuitemcheckbox" buttons (roving tabIndex), matching the WAI-ARIA menu pattern.