• Overview
@angular/aria/menu

A list of menu items.

API

    
      class Menu<V> {  readonly element: HTMLElement;  readonly textDirection: WritableSignal<Direction>;  readonly @Input() id: InputSignal<any>;  readonly @Input() wrap: InputSignalWithTransform<boolean, unknown>;  readonly @Input() typeaheadDelay: InputSignal<number>;  readonly @Input() disabled: InputSignalWithTransform<boolean, unknown>;  readonly parent: WritableSignal<MenuTrigger<V> | MenuItem<V> | undefined>;  readonly visible: Signal<boolean>;  readonly tabIndex: Signal<0 | -1>;  @Output() onSelect: OutputEmitterRef<V>;  readonly @Input() expansionDelay: InputSignal<number>;  close(): void;}
    
    

element

HTMLElement

A reference to the host element.

textDirection

WritableSignal<Direction>

The directionality (LTR / RTL) context for the application (or a subtree of it).

id

InputSignal<any>

The unique ID of the menu.

wrap

InputSignalWithTransform<boolean, unknown>

Whether the menu should wrap its items.

typeaheadDelay

InputSignal<number>

The delay in milliseconds before the typeahead buffer is cleared.

disabled

InputSignalWithTransform<boolean, unknown>

Whether the menu is disabled.

parent

WritableSignal<MenuTrigger<V> | MenuItem<V> | undefined>

A reference to the parent menu item or menu trigger.

visible

Signal<boolean>

Whether the menu is visible.

tabIndex

Signal<0 | -1>

The tab index of the menu.

onSelect

OutputEmitterRef<V>

A callback function triggered when a menu item is selected.

expansionDelay

InputSignal<number>

The delay in milliseconds before expanding sub-menus on hover.

close

void

Closes the menu.

@returnsvoid

Description

A list of menu items.

A ngMenu is used to offer a list of menu item choices to users. Menus can be nested within other menus to create sub-menus. It works in conjunction with ngMenuTrigger and ngMenuItem directives.

<button ngMenuTrigger [menu]="myMenu">Options</button><div ngMenu #myMenu="ngMenu">  <div ngMenuItem>Star</div>  <div ngMenuItem>Edit</div>  <div ngMenuItem [submenu]="subMenu">More</div></div><div ngMenu #subMenu="ngMenu">  <div ngMenuItem>Sub Item 1</div>  <div ngMenuItem>Sub Item 2</div></div>
Jump to details