PanelMenu

Basic

Open Files, then Documents to explore nested actions. Opening another root panel closes the previous one.

Choose an action from a panel.

Multiple

Allow several root panels to stay open at the same time.

Controlled

Use two-way model binding and update expanded on items to control the menu programmatically.

Template

Customize item content, badges and displayed shortcuts. Arrow icons stay aligned with the label.

Router and commands

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

Usage

import { AvPanelMenu, AvPanelMenuItem } from 'avero-ui';

items: AvPanelMenuItem[] = [{
  label: 'Files', expanded: true,
  items: [
    { label: 'New', command: () => this.createFile() },
    { label: 'Docs', routerLink: '/installation' }
  ]
}];

<av-panel-menu [model]="items" ariaLabel="Workspace" />
<av-panel-menu [(model)]="items" [multiple]="true" />

API and accessibility

Inputs: model, multiple (false by default), inputId, ariaLabel and ariaLabelledBy. Outputs: modelChange, onItemClick, onExpand and onCollapse. Event payloads contain originalEvent and item.

AvPanelMenuItem supports label, icon (CSS class), badge, shortcut (display only), expanded, disabled, visible, separator, nested items, command, routerLink, queryParams, fragment, url and target. The component updates its model immutably; bind [(model)] to receive updates. Replace the model or its items when changing state programmatically. Single mode displays only the first expanded root if multiple roots are marked expanded.

The #item template receives the item, root and expanded context. Use non-interactive template content; the component supplies the button or link. Give every item a meaningful label.

Root buttons expose aria-expanded and aria-controls with labeled regions. Nested entries use tree, treeitem and group roles. One Tab stop enters the menu; Tab exits. Up/Down traverses visible enabled entries, Home/End jumps to the first/last header or tree entry, Right expands or enters a branch, and Left collapses or returns to its parent. Enter/Space activates. Typing finds labels. Hidden and disabled entries are skipped.

Theme variables: --av-panel-menu-background, --av-panel-menu-color, --av-panel-menu-border, --av-panel-menu-radius, --av-panel-menu-hover and --av-panel-menu-focus.