TieredMenu

Basic

Hover or select File, then New to open a second level of actions.

Choose an action from a menu.

Popup

Open a menu anchored to its trigger. Escape returns focus; clicking outside dismisses it.

Template

Customize item content with badges and displayed shortcuts.

Router and commands

Navigate to component pages, open an external resource, or select Help to run a command.

Usage

import { AvTieredMenu, AvTieredMenuItem } from 'avero-ui';

items: AvTieredMenuItem[] = [{
  label: 'File',
  items: [{ label: 'New', command: () => this.createFile() }]
}];

<av-tiered-menu [model]="items" ariaLabel="File actions" />
<button (click)="menu.toggle($event)">Actions</button>
<av-tiered-menu #menu [model]="items" [popup]="true" />

API and accessibility

Inputs: model, popup (false by default), inputId, ariaLabel and ariaLabelledBy. Methods: toggle(event), show(event) and hide(). Outputs: onShow, onHide and onItemClick. Item events contain originalEvent and item.

AvTieredMenuItem supports label, icon (CSS class), badge, shortcut (display only), disabled, visible, separator, nested items, command, routerLink, queryParams, fragment, url and target. Replace the model or item objects when updating data. Commands run on leaf activation; branches open submenus.

The #item template receives the item and hasSubmenu. Use non-interactive content; the component supplies the button or link and submenu arrow.

The inline root uses a vertical menubar; popup and nested lists use menu roles. Items expose disabled and expanded state, and submenus are labelled by their parent. Popup triggers receive ARIA attributes while open and regain their original attributes on close.

Up/Down moves between enabled siblings; Home/End moves to the first/last sibling. Right opens a submenu; Left or Escape returns to its parent. Enter/Space toggles a branch or activates a leaf. Typing finds labels. Tab leaves the menu and closes overlays. Escape at the popup root restores trigger focus.

Submenus flip and stay within the viewport. Theme variables: --av-tiered-menu-background, --av-tiered-menu-color, --av-tiered-menu-border, --av-tiered-menu-radius and --av-tiered-menu-hover.