MegaMenu

Basic

Open Workspace to browse three columns of grouped actions. Commands update the status below.

Choose an action from the menu.

Vertical

A compact vertical bar opens the same grouped panel alongside the selected item.

Templates

Customize the start, end, group headings and item content. Open Explore to see descriptions.

Router

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

Usage

import { AvMegaMenu, AvMegaMenuItem } from 'avero-ui';

items: AvMegaMenuItem[] = [{
  label: 'Workspace',
  items: [
    [{ label: 'Projects', items: [
      { label: 'New project', command: () => this.createProject() }
    ] }],
    [{ label: 'Documentation', items: [
      { label: 'Menubar', routerLink: '/menubar' }
    ] }]
  ]
}];

<av-mega-menu [model]="items" ariaLabel="Workspace" />
<av-mega-menu [model]="items" orientation="vertical" />

API and accessibility

Inputs: model, orientation ('horizontal' or 'vertical'), inputId, ariaLabel, ariaLabelledBy and buttonLabel. Output: onItemClick with originalEvent and item.

AvMegaMenuItem.items is an array of columns. Each column contains AvMegaMenuGroup objects, and each group contains AvMegaMenuAction items. Groups support label, disabled and visible. Actions support label, icon (CSS class), description, badge, shortcut (display only), separator, disabled, visible, command, routerLink, queryParams, fragment, url and target.

Use #start and #end for additional content, #submenuheader for group labels, and #item with let-item and let-root="root" for item content. Item templates must contain non-interactive content; the component provides the link and arrow. Give actions and groups meaningful labels.

Left/Right moves between horizontal roots; Up/Down moves between vertical roots. Down/Up opens a horizontal panel at the first/last action; Right opens a vertical panel. Within a panel, Up/Down traverses actions and Left/Right moves between groups. Home/End jumps to the first/last action, and typing finds matching labels. Enter/Space activates; Escape restores focus to the root. Tab exits without trapping focus.

Below 960px, the menu collapses behind a navigation button and columns stack vertically. Disabled and hidden actions are skipped. Outside interaction and selection dismiss the panel.

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