Menu

A temporary list of actions or options shown on a surface, letting users pick a single command. The sc-menu-dropdown is the surface; sc-menu-item rows are its children.

Install

Examples

Dropdown

Slot sc-menu-item children into a sc-menu-dropdown. Flag a destructive action with destructive.

Selected state

Mark the active choice with state="selected" and a trailing check.

Menu item rows (sc-menu-item)

A single row. type switches between row, button, and link behaviour; add leading/trailing icons and a state.

Guidelines

Usage

header nav menus, user menus, and action menus. Pair it with a trigger — typically a Button Icon — to open and close the surface.

Do

  • Keep menus short and group related actions; order by frequency or importance.
  • Use destructive for irreversible actions, placed last.
  • Set href (or type="link") for navigation items so they behave like links.

Don’t

  • Don’t use a menu for a primary, always-visible action — use a Button.
  • Don’t pack long, scrolling lists in — consider a dedicated page or search.
  • Don’t mix destructive and routine actions without separating them.

Accessibility

Properties

Related