Menu API · Needless UI

Import

import-menu.ts

import {
  NuiMenu,
  NuiMenuItem,
  NuiMenuSeparator,
  NuiMenuShortcut,
  NuiMenuTrigger,
} from '@needless-ui/angular/menu';

Opens a menu. Usually applied to a nuiButton.

NuiMenuTrigger: Properties
Name	Type	Default	Description
`nuiMenuTrigger`Input	`Menu`		The menu to open: the `ngMenu` reference of a `nuiMenu`.

A menu of items, rendered as a popover next to its trigger. Its ngMenu export is the Angular Aria menu that triggers and submenus take.

NuiMenu: Properties
Name	Type	Default	Description
`wrap`Input	`boolean`	`true`	Whether arrow keys wrap from the last item to the first.
`typeaheadDelay`Input	`number`	`500`	Milliseconds before the typeahead search resets.
`disabled`Input	`boolean`	`false`	Disables the whole menu.
`enter`Input	`NuiEnter`		How it arrives: `zoom`, `fade`, `drop`, `rise`, `unfold`, `flip`, `swing`, `slide` or `none`.
`motion`Input	`NuiMotion`		The spring it moves with: `snappy`, `bouncy`, `jelly`, `elastic`, `lazy`, `mechanical` or `none`.
`spring`Input	`NuiSpring`		Any spring, as `{ stiffness, damping, mass }`, compiled to CSS at runtime. It overrides `motion`.
`corners`Input	`NuiCorners`		The shape of its corners: `round`, `squircle`, `bevel`, `scoop`, `notch` or `square`.
`radius`Input	`NuiRadius`		How big its corners are: `none`, `small`, `medium`, `large` or `full`.
`density`Input	`NuiDensity`		How much room it takes: `compact`, `regular` or `roomy`.
`itemSelected`Output	`V`		Emits the value of the chosen item. On the root menu it fires for submenu items too.

Customization inputs you leave unset follow the nearest data-nui-* attribute. See the customization guide.

An item in a nuiMenu.

NuiMenuItem: Properties
Name	Type	Default	Description
`value`Input	`V`		Identifies the item. Must be unique across the whole menu, submenus included.
`disabled`Input	`boolean`	`false`	Disables the item. It stays reachable with the arrow keys but can’t be chosen.
`submenu`Input	`Menu`		A nested `nuiMenu` that this item opens.
`role`Input	`'menuitem' \| 'menuitemcheckbox' \| 'menuitemradio'`	`'menuitem'`	`menuitem`, `menuitemcheckbox` or `menuitemradio`.
`checked`Input	`boolean \| undefined`		Checked state of a checkbox or radio item.
`tone`Input	`'neutral' \| 'danger'`	`'neutral'`	`danger` for destructive actions.
`searchTerm`Input	`string`		Text matched by typeahead. Defaults to the item’s label.
`selected`Output	`V`		Emits the item’s value when it’s chosen with the mouse or the keyboard.

A line between groups of items.

A keyboard shortcut hint, aligned to the end of an item.