Menu item

A menu row, button[nol-menu-item], inside a MenuComponent: a label with an optional icon, tag, description, value, shortcut and check mark. An element marked nolMenuItemLead, such as a small AvatarComponent, takes the icon's place, at its start edge; give a row one or the other. Rows with a lead, an icon or neither keep their labels aligned, and a row with a lead keeps at least the space-1 token above and below it, growing to fit, so neighboring rows' avatars never touch. A label or a description too long for the menu ends with an ellipsis and shows its full text in a tooltip under the pointer; while the keys rest on the row, one tooltip beside the menu, level with the row, shows the label and description while either is cut, and hides while a submenu of the row's menu is open. The first Escape hides it and leaves the menu open. A focus from code counts as the keys' while the last input was a key, as when a menu the keys opened focuses its first row. Its CDK menu item's disabled input and triggered output keep those names on it: choosing the row emits triggered and closes the whole menu. A row that also uses MenuTriggerDirective opens a submenu and shows a chevron instead, and never emits triggered. Its role is menuitem, or menuitemcheckbox or menuitemradio while checked is not null.

Examples

Loading…

States

Loading…

API

Selector button[nol-menu-item]

Import from @noldova/ui.components.angular

Inputs

Name	Type	Default	Description
`label`	`string`	Required	The row's text, which type-ahead in the menu also matches.
`icon`	`string \| null`	`null`	The Material Symbols glyph before the label, or null, the default, for none.
`checked`	`boolean \| null`	`null`	Whether the row is checked, which shows a check mark, or null, the default, for a row that cannot be checked.
`checkbox`	`boolean`	`false`	Whether a checkable row is a checkbox, which turns on and off by itself, rather than a radio, one choice of a group; false, a radio, when not bound. It matters only while `checked` is not null.
`shortcut`	`string \| null`	`null`	The key shown at the row's end, such as `Ctrl+N`, or null, the default, for none. It is only shown; the row's owner handles the key.
`description`	`string \| null`	`null`	A second line under the label, at the label's start, in the muted text, such as the model and settings a person or a preset stands for, or null, the default, for none. The row grows to fit it; rows without one keep their height. Screen readers read it with the label.
`value`	`string \| null`	`null`	The value chosen for the row, shown at its end before its shortcut, check mark or chevron, in the muted text, such as the model chosen in a submenu, or null, the default, for none. The label gives way to it, ending with an ellipsis first. Screen readers read it with the label.
`tag`	`string \| null`	`null`	A short word shown in a small, muted, outlined chip right after the label, on the label's line, such as `Recommended` on a provider's default effort level, or null, the default, for none. A long label ends with an ellipsis first, and the tag only once the label is gone; the tag never wraps and stays clear of the row's end. Screen readers read it right after the label; type-ahead matches the label alone.
`danger`	`boolean`	`false`	Whether the row's action destroys something, such as Remove… or Delete: its label and icon take the theme's `error` color, over the same hover, focus and selected fills as any row, while its description, value and shortcut stay muted; under forced colors it is the plain row's `CanvasText`, and `HighlightText` while selected. False when not bound.

Accessibility

Key	Action
`Enter`	Runs the row and closes the whole menu; a checkable row asks its owner to change its checked state.
`Space`	Runs the row as Enter does.
`Arrow Right`	On a row that opens a submenu, opens it with its first checked row, or else its first row, focused.
`Arrow Left`	In a submenu, closes it and gives the focus back to its row.
`Escape`	Hides the tooltip of a row whose text is cut, if one shows; else closes a submenu back to its row, or the menu back to its trigger.

A row is a native button with the menuitem role; its label, description, value and tag are read together as its name, and its icon is hidden from assistive technology.

A row whose checked is true or false has the menuitemcheckbox role when checkbox is true, and the menuitemradio role otherwise, and reports aria-checked; its check mark is hidden from assistive technology.

A row that opens a submenu is marked aria-haspopup="menu" and reports aria-expanded; its chevron is hidden from assistive technology.

A disabled row is marked aria-disabled: the arrow keys still reach it, and it runs nothing.

Specification

Loading…