Menubar

Basic and commands

Open Projects to explore nested actions. Commands update the status below; Archive and Settings are disabled.

Choose a command from the menu.

Templates

Add content at the start and end, and customize item content. The root context identifies top-level items.

Router

Navigate to component documentation or open Angular documentation in a new tab.

Responsive

Below 960px, the navigation button opens a vertical menu. Nested menus expand inline. Escape, selection and outside interaction close the menu.

Usage

import { AvMenubar, AvMenubarItem } from 'avero-ui';

items: AvMenubarItem[] = [
  { label: 'Home', routerLink: '/' },
  { label: 'Projects', items: [
    { label: 'New project', command: () => this.createProject() },
    { label: 'Archive', disabled: true }
  ] }
];

<av-menubar [model]="items" ariaLabel="Workspace">
  <ng-template #start><strong>Workspace</strong></ng-template>
  <ng-template #item let-item let-root="root">
    <span>{{ item.label }}</span>
  </ng-template>
  <ng-template #end><span>Alex Morgan</span></ng-template>
</av-menubar>

API and accessibility

Inputs: model, inputId, ariaLabel, ariaLabelledBy and buttonLabel. Output: onItemClick, with originalEvent and item. Import AvMenubar, AvMenubarItem and AvMenubarEvent from avero-ui.

Items support label, icon (CSS class), badge, shortcut (display only), separator, disabled, visible, nested items, command, routerLink, queryParams, fragment, url and target.

Templates: #start, #end and #item. The item template receives the item and root boolean; use non-interactive content because the component supplies the interactive link and submenu indicator. Give each item a meaningful label.

Tab enters and exits the menu. Left/Right moves between root items; Up/Down opens a root submenu. Within submenus, Up/Down moves between actions and Right opens nested menus. Left or Escape returns to the parent. Home/End jumps to the first/last action; typing finds labels. Enter/Space activates an item. Disabled and hidden items are skipped.

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