Menu for Angular

import { AuiMenu } from '@absoluteui/angular/menu';

Styles are included with the component. Behavior, keyboard and screen-reader support, design tokens, and limitations are described on the Menu page; this page covers the Angular API.

Defaults for every instance: provideAbsoluteUIConfig({ components: { menu: { ... } } }) (see Configuration).

Example

import { Component } from '@angular/core';
import type { MenuItem, MenuSelectDetail } from '@absoluteui/components/menu';
import { AuiMenu } from '@absoluteui/angular/menu';
import { AuiButton } from '@absoluteui/angular/button';

@Component({
  selector: 'app-row-actions',
  imports: [AuiMenu, AuiButton],
  template: `<button type="button" auiButton [auiMenu]="items" placement="bottom-end" (selected)="onSelect($event)">Actions</button>`,
})
export class RowActionsComponent {
  readonly items: MenuItem[] = [
    { id: 'edit', label: 'Edit' },
    { id: 'delete', label: 'Delete', tone: 'danger' },
  ];

  onSelect(detail: MenuSelectDetail): void {
    if (detail.id === 'delete') {
      // confirm and delete
    }
  }
}

button[auiMenu]

Class AuiMenu; template reference #ref="auiMenu".

AbsoluteUI Menu on its trigger: <button [auiMenu]="items" (selected)="run($event.id)">Actions</button>.

Server rendering: Renders in the browser only; on the server the element stays empty.

Inputs

Input	Type	Default	Description
auiMenu	readonly MenuItem[]		Required. Items: action (with optional submenu items), checkbox, radio, separator, and group. Ids are unique across the whole tree.
menuLabel	string		Menu aria-label. Default: the menu is labelled by the trigger (aria-labelledby).
placement	"bottom" | "top" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end"	'bottom-start'	Top-level popup placement relative to the trigger. Submenus always use right-start (left-start in RTL).
closeOnSelect	boolean	true	Close after activating a checkbox or radio item. Action items always close the menu.
typeahead	boolean	true	Printable characters move focus to the next item whose label starts with them.
direction	"ltr" | "rtl"	'ltr'	Submenu side, submenu arrow keys, and chevron mirroring.
icons	Partial<MenuIcons>		Icon slot overrides.
renderItem	MenuRenderItem		Custom item content as a function; or put <ng-template auiItem let-item> inside the host (since 0.9.0).

Outputs

Output	Payload	Description
(selected)	MenuSelectDetail	Dispatched on the trigger when the user activates an enabled item. checked is the new state for checkbox and radio items. Re-emits aui-select.
(opened)	null	Dispatched on the menu element after the top level opened. Re-emits aui-open.
(closed)	null	Dispatched on the menu element after all levels closed. Re-emits aui-close.

Methods

Call them through a viewChild query or a template reference.

Method	Description
open(focus?: "first" | "last" | undefined): void	Open the menu and focus its first (or last) item.
close(): void	Close the menu (and its submenus).

Test harness

AuiMenuHarness from @absoluteui/angular/testing. button[auiMenu]: the trigger; the menu renders next to it, so items are read from the document.