Menu
Presents keyboard-navigable commands from a dedicated trigger.
Contract
| Decision | Choose |
|---|---|
| command type | Item for an action, LinkItem for navigation, selection items for persistent choices |
| direction | vertical for conventional menus or horizontal for a horizontal command set |
| positioning | four side values and three align values on Positioner |
| ownership | colocate Trigger and Root, or connect detached parts with createHandle |
Use a menu for commands opened by a dedicated trigger. Use TRContextMenu when commands belong to an arbitrary right-click target and TRNavigationMenu for site destinations.
Install
pnpm add @tinyrack/uiScroll inside the code area to read long lines.
Styles
@import '@tinyrack/ui/components/menu.css';Scroll inside the code area to read long lines.
Imports
import { TRMenu } from '@tinyrack/ui/components/menu';Scroll inside the code area to read long lines.
Playground
Usage
Examples
Choose command semantics
Choose keyboard direction
Place the popup
Connect a detached trigger
Follow the keyboard model
API
State and overlay
Root supports controlled open with onOpenChange, uncontrolled defaultOpen, orientation, loopFocus, modal, and root disabled. Trigger opens the menu. Portal, Backdrop, Positioner, Popup, Arrow, and optional Viewport form the collision-aware layer. Positioner supports side, align, offsets, collision avoidance, and a custom anchor.
Content and composition
Group, GroupLabel, and Separator organize content. Item, LinkItem, CheckboxItem, CheckboxItemIndicator, RadioGroup, RadioItem, and RadioItemIndicator provide command semantics. SubmenuRoot and SubmenuTrigger own nested open state and keyboard entry. Links stay open unless closeOnClick is set.
createHandle returns a typed Base UI handle that connects a detached Trigger payload to Root. Every part has a named component, prop type, and state type export from @tinyrack/ui/components/menu; Base UI render, refs, native props, events, and state data attributes are preserved. CSS is opt-in.