# Menu

Lists the commands for an item or a view, and short settings as rows to choose from.

* Kind: component
* Page: https://design.werklist.com/components/menu
* Version: 2.1.2

## When to use it

* Commands that do not earn a place on the toolbar
* A short setting such as the sort order, as rows where one applies
* Visible columns or filters, as rows where several apply
* The context menu of a row or a card

## When not to use it

* A value for a form field: use a select or a combobox
* A few controls for one item: use a popover
* A list of destinations: that is navigation
* A submenu of dozens of entries: open a combobox
* Leading icons on rows

## Anatomy

* Layer: above the page (--layer-popover)
* Width: 200 to 300 px from the longest label
* Padding around rows: 4 px (--space-1)
* Panel radius: 12 px (--radius-xl)
* Row radius: 8 px (--radius-lg)
* Row height: 36 px, 44 px on touch screens
* Row padding: 10 px each side
* Label: 13 px on 20 px, weight 400 (--type-caption, --text)
* Shortcut: 11 px on 16 px, tabular, at the row's end, at least 10 px from the label. Not in context menus (--text-muted)
* Check: 16 px check at the row's end, in the brand blue (--brand-blue)
* Submenu chevron: 16 px chevron pointing right, at the row's end (--text-muted)
* Separator: 1 px with 4 px above and below (--border-rule)
* Group label: 13 px on 20 px, 10 px inset, sentence case (--type-caption, --text-label)
* Surface with a mouse: raised fill and shadow. In the dark theme a 1 px top highlight and a 0.5 px ring (--glass-fill-raised, --elevation-3, --glass-highlight, --glass-ring-raised)
* Surface on a touch screen: opaque, no blur (--surface-1)
* Maximum height: 70 percent of the window, or the room on its side when that is less. The rows scroll on their own

## Variants

* Command: menuitem. Runs and closes
* Choose one: menuitemradio in a group. The chosen row carries the check. A pick closes
* Choose several: menuitemcheckbox. A pick toggles the check and the menu stays open
* Context menu: Opened at the pointer by a right click, or at the focused row by Shift+F10 or the Menu key. Relevant commands only. Unavailable ones hidden. No shortcuts
* Submenu: One level, a handful of rows, opens to the side of its row

## States

* Rest: No fill
* Hover: A fill of the text color at 6 percent in dark, 5.5 percent in light, with a mouse only
* Keyboard focus: 2 px ring inset in the row (--focus-ring, --focus-ring-width)
* Pressed: Fill (--glass-fill-active)
* Unavailable, button menu: Label in muted ink at half opacity, no hover fill, aria-disabled true, still focusable. Full opacity while it holds keyboard focus (--text-muted)
* Unavailable, context menu: Hidden
* Checked: The check shows and aria-checked is true (--brand-blue)
* Trigger open: Control fill and aria-expanded true (--surface-control)
* Opening: Fades in over 150 ms while it moves 4 px away from the trigger and grows from 98 percent (--duration-fast, --ease-soft)
* Closing: Reverse over 150 ms (--duration-fast, --ease-standard)

## Keyboard

* Enter, Space or Down arrow on the trigger: Opens, focus on the first row
* Up arrow on the trigger: Opens, focus on the last row
* Down arrow, Up arrow: Next or previous row, wrapping
* Home, End: First or last row
* A letter: Next row that starts with it
* Enter or Space: Runs the row, or toggles a checkbox row
* Right arrow on a submenu row: Opens the submenu on its first row
* Left arrow or Escape in a submenu: Closes the submenu only
* Escape: Closes the menu, focus to the trigger
* Tab: Closes the menu and moves on
* Shift+F10 or the Menu key: Opens the context menu of the focused row

## Accessibility

* role menu with aria-labelledby the trigger. A context menu takes an aria-label naming the item, such as Actions for Sunita Rai
* Rows menuitem, menuitemcheckbox or menuitemradio, with aria-checked on the last two. Role separator. A named group is role group with aria-labelledby
* Trigger and submenu rows: aria-haspopup menu, aria-expanded, aria-controls
* Focus moves from row to row, so a screen reader reads each row as it is reached
* A menu holds no form fields
* Rows 44 px high on touch screens
* One menu or popover open at a time. Escape closes a submenu before the menu

## Content

* A verb first, sentence case, no full stop
* The noun follows when the verb alone is ambiguous: Move to group, Send offer
* The same words for a command in the menu, the toolbar and the context menu
* No ellipsis. The dialog that opens carries its own title
* Destructive commands last, in their own group

## Tokens

* --layer-popover
* --glass-fill-raised
* --glass-ring-raised
* --elevation-3
* --surface-1
* --surface-control
* --radius-xl
* --radius-lg
* --space-1
* --space-2
* --type-caption
* --text
* --text-muted
* --text-label
* --brand-blue
* --error-ink
* --border-rule
* --glass-highlight
* --glass-fill-active
* --focus-ring
* --focus-ring-width
* --duration-fast
* --ease-soft
* --ease-standard