Menu

Basic

Choose an action. Demo commands update the status below.

Groups and navigation

Organize actions into one level of labeled groups. Angular documentation opens in a new tab.

Popup

Open the menu, move with Up/Down and close with Escape. Focus returns to the trigger.

Templates

Usage

import { AvMenu, AvMenuItem } from 'avero-ui';

items: AvMenuItem[] = [
  { label: 'New', command: () => this.createDocument() },
  { separator: true },
  { label: 'Dock', routerLink: '/dock' }
];

<av-menu [model]="items" ariaLabel="Workspace" />
<av-menu #menu [model]="items" [popup]="true" />
<button (click)="menu.toggle($event)" aria-haspopup="menu"
  [attr.aria-expanded]="menu.visible()" [attr.aria-controls]="menu.inputId()">
  Actions
</button>

API and accessibility

Inputs: model, popup, inputId, ariaLabel, ariaLabelledBy. Methods: toggle(event), show(event), hide(restoreFocus?). Read visible() and listen to onShow, onHide and onItemClick.

Items support label, icon (CSS class), badge, shortcut (display only), separator, disabled, visible, command, routerLink, queryParams, fragment, url and target. Use items for one level of groups.

Templates: #item and #submenuheader receive the item; #start and #end add content outside the menu. Item and group templates must contain non-interactive content. Give every action and group a meaningful label.

One Tab stop, Up/Down, Home/End, typing to find an action and Enter/Space activation. Disabled actions are skipped. Popup menus close on Escape, selection, outside click or Tab; Tab continues from the trigger. Focus returns on Escape or selection. Targets are at least 44px high; maintain text and focus contrast when overriding theme colors.