Docs draft
MenuItem
Variants
type · option / checkbox / radio / toggle / drilldown / info / title / separator — Distilled from six old dropdown fragment sets. Control rows COMPOSE the real Checkbox/Radio/Switch components; Title and Separator structure sections.
States
rest — At rest with no interaction.
hover — Pointer is over the control.
focus — Holds keyboard focus and shows the focus ring.
selected — Currently selected.
disabled — Not interactive; rendered with the lifted disabled tokens so it stays perceivable.
Design specifications
| row | 240 wide in the set; fills the Menu; 64px with subtitle, 46px without |
| label | type.body-sm in color.text.primary |
| subtitle | type.caption in color.text.secondary |
| hover | color.bg.pressed |
| selected-check | Icon / Check at 20 |
| menu-surface | Menu component: color.bg.elevated + shadow.overlay, radius.md, 8px vertical padding |
Accessibility
Figma building blocks for now. Code arrives with the popover primitive as DropdownMenu; until then Select covers single-choice menus natively. The old Top/Bottom Fade + Scrollbar chrome becomes scroll behavior in code.
API
| Prop | Type | Description |
|---|---|---|
Label | text | Row label. |
Subtitle | boolean | Second line on. Off = one-line row at the 44px touch target. |
Subtitle Text | text | Second-line copy (UserMenu's logged-out rows). |
Leading Icon / Leading Swap | boolean + instance swap | Leading 24 icon, mirroring Button's icon-prop mechanism. Follows the row's state color; disabled rows dim it. |
Trailing Chip / Trailing Swap | boolean + instance swap | Trailing chip: NotificationBadge count or Tag (e.g. NEW). |