Keyboard shortcuts

Press ← or → to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

Menu row

Linear: AUT-123

The single row used inside every popover menu — workspace switcher, device pickers, system-audio picker, on-screen options, future editor menus. The shape covers ~95% of the recurring menu-row needs without bespoke CSS per menu.

Kinds

MenuRowKindStory
Default(see other rows)
Selectedmenu-row-selected
Actionmenu-row-action
Dangermenu-row-action (second row)
Disabledbottom of popover-with-footer

Slots

  • leading — Option<Children>. Typically an IconTile (device / app / workspace flavor).
  • title — required String. Truncates with text-overflow: ellipsis when the row narrows.
  • subtitle — optional String. Same truncation behavior.
  • badges — Vec<MenuBadgeView>. Each (label, BadgeKind) pair renders inline between the text and trailing slot.
  • trailing — Option<Children>. Typically a Kbd shortcut chip or a chevron glyph.

Selected kind injects a check

MenuRowKind::Selected also emits a ✓ after the trailing slot — saves callers from having to thread a check into the trailing prop. The other kinds don't auto-inject anything.

Composition example

flowchart LR
    Popover[PopoverSurface] --> Header[header: title + description]
    Popover --> Body[body]
    Body --> List[MenuList]
    List --> Section[MenuSection]
    Section --> Row[MenuRow]
    Row --> Leading[leading: IconTile]
    Row --> Text[title + subtitle]
    Row --> Badges[badges]
    Row --> Trailing[trailing: Kbd]
    Popover --> Footer[footer: MenuFooter]

Long-label behavior

Titles + subtitles truncate at the row's max-width. The badges + trailing slot stay visible at full size; only the text column shrinks. This is why the row uses flex: 1 on the text column and flex-shrink: 0 on the badge / trailing columns.