Components · Form
Menu
A keyboard-navigable dropdown menu: arrow keys rove focus between items, Home/End jump to the ends, and MenuItem can render as a checkable menuitemcheckbox with a trailing check glyph.
Live in all three modes
Day · Night-NVG · Mono: one component, re-themed through the token layer.
Variants & states
- side / align placement
- checkable menu item
- disabled item
- leading icon
Tokens used
--semantic-color-surface-card--semantic-color-border-default--semantic-color-action-primary--semantic-color-focus-ring
Copy-paste
import { Menu, MenuTrigger, MenuContent, MenuItem, MenuSeparator } from 'operator-components';
<Menu>
<MenuTrigger>Actions</MenuTrigger>
<MenuContent side="bottom" align="start">
<MenuItem icon="lock" onSelect={() => lockdown()}>Lock down sector</MenuItem>
<MenuItem checked={notify} onSelect={() => setNotify(!notify)}>Notify command</MenuItem>
<MenuSeparator />
<MenuItem disabled>Archive (unavailable)</MenuItem>
</MenuContent>
</Menu>Figma: library link coming soon. Gated until it's on sole-owned footing. (TODO: replace with the Community/library URL once published.)