Menu

Contextual popup list attached to a trigger button. Use for overflow actions (three-dots menu), user account menus, or dense action lists. For in-form selection use Select or Dropdown; for navigation use Nav.

a11y (built in): LB.Menu wires the pair on init — the trigger gets aria-haspopup="menu" + aria-expanded + aria-controls, the panel gets role="menu" + aria-labelledby, and every row becomes a role="menuitem" with roving tabindex="-1". Opening moves focus to the first enabled item; ↑ ↓ wrap through the enabled items, Home / End jump to the ends, and Esc, Tab or an outside click closes and returns focus to the trigger. Disabled rows carry aria-disabled="true" and are skipped by the arrow keys; separators are role="separator", glyphs are aria-hidden, and an icon-only (kebab) trigger needs its own aria-label.

Usage: Wrap with data-lb-menu. The panel is <ul class="lb-menu lb-list"> — outer class provides the popup surface, inner class provides item layout. Items use the shared List primitive classes (.lb-list__item, .lb-list__item--danger, .lb-list__item--disabled, .lb-list__separator, .lb-list__icon, .lb-list__hint).

Default — text trigger

Standard pattern for a row of overflow actions. Trigger is a button with text + chevron, panel attaches below. Items carry leading icons and trailing keyboard shortcuts.

Kebab — icon-only trigger

Compact three-dots affordance for table rows, list items, card actions. Use .lb-icon-btn as the trigger and remember an aria-label describing what it controls.

User account menu

Header carries identity (avatar + name + email), separator below, then app-level destinations and a danger-tinted Sign out at the bottom. Common pattern for the top-right of an app shell.

  • Jane Doe jane@letbe.design

Sectioned with group labels

Use .lb-list__group-label to label a cluster of related items. Keeps long menus scannable; pair each section with a separator below it.

  • Workspace
  • Account

Checkable items

Multi-toggle pattern — each item is independently on/off. Use a leading .lb-list__check slot; toggle .lb-list__item--checked on the item to flip the visible check. With data-lb-menu-mode="checkable" on the wrapper, LB.Menu tags rows role="menuitemcheckbox" and keeps aria-checked mirrored to that class.

Radio items — single pick

Sort-by / view-as pattern. Only one item carries .lb-list__item--checked at a time; clicking another moves the check. data-lb-menu-mode="radio" tags rows role="menuitemradio" with aria-checked tracking the pick.