MegaMenu

Usage

Each root item has kind: link, command or panel. A link needs routerLink or url; a command needs its callback; a panel contains columns, groups and link/command leaves. Give every level a stable key. orientation chooses horizontal or vertical layout; breakpoint enables mobile navigation and scrollHeight limits the panel height.

Examples

Try the interaction and open Code for the complete implementation.

Selected: — · itemClick: 0 · Commands: 0

mobileActiveChange: closed

Try and configure

Change the options, try the result and see the template update. Open Code for the complete data model and implementation.

Selected: — · itemClick: 0 · Commands: 0

mobileActiveChange: closed

Advanced options · 3

Core options update this template. Item icons, badges and disabled actions belong to the data model shown in Code.

<neu-mega-menu
  [items]="items"
  ariaLabel="Example navigation"
  orientation="horizontal"
  direction="ltr"
  breakpoint="960px"
  scrollHeight="min(28rem, 70vh)"
  [disabled]="false"
  (itemClick)="selectItem($event)"
  (mobileActiveChange)="mobile.set($event)"
  [menuButtonAriaLabel]="'Toggle example navigation'"
/>

State and data for this configuration

These values match the current preview. Complete handlers, Core imports and templates are in Source.

export const items = [
  {
    "key": "home",
    "kind": "command",
    "label": "Workspace",
    "icon": "home",
    "command": () => { /* Handler in the complete example. */ }
  },
  {
    "key": "products",
    "kind": "panel",
    "label": "Components",
    "icon": "folder",
    "badge": "UI",
    "panel": {
      "columns": [
        {
          "key": "forms",
          "groups": [
            {
              "key": "controls",
              "label": "Form controls",
              "items": [
                {
                  "key": "button",
                  "kind": "link",
                  "label": "Button",
                  "routerLink": "/en/components/button"
                },
                {
                  "key": "date",
                  "kind": "link",
                  "label": "DateInput",
                  "routerLink": "/en/components/date-input"
                }
              ]
            }
          ]
        },
        {
          "key": "data",
          "groups": [
            {
              "key": "tables",
              "label": "Data and actions",
              "items": [
                {
                  "key": "table",
                  "kind": "link",
                  "label": "Table",
                  "routerLink": "/en/components/table"
                },
                {
                  "key": "report",
                  "kind": "command",
                  "label": "Prepare report",
                  "command": () => { /* Handler in the complete example. */ }
                }
              ]
            }
          ]
        }
      ]
    }
  },
  {
    "key": "guide",
    "kind": "link",
    "label": "Documentation",
    "routerLink": "/en/getting-started/introduction"
  },
  {
    "key": "settings",
    "kind": "command",
    "label": "Settings",
    "disabled": true,
    "icon": "settings",
    "command": () => { /* Handler in the complete example. */ }
  }
];

Data and content

itemClick emits activated links or commands, not disclosure-only panels. mobileActiveChange reports the mobile menu state. Core owns disclosure/focus and respects disabled entries; the application owns navigation destinations and command work. Start and End Templates add surrounding content. The Item Template receives item, active, index and level (0 for roots, 3 for leaves), not a callback to execute.

Accessibility and keyboard

Name the navigation and translate menuButtonAriaLabel. Use Tab/Shift+Tab to reach native links and buttons; Enter activates either, while Space activates buttons only. Tab from an open desktop panel trigger enters its first available link or button. Escape closes the panel and restores trigger focus; on the mobile toggle it closes mobile navigation. Arrow keys and Home/End retain browser behavior; this is navigation, not an application menu. Custom Item content remains inside Core links/buttons; Start/End may contain their own accessible controls.

Key	Action
`Tab`	Reach top-level actions, open-panel links and available mobile controls.
`Arrow keys`	Keep native browser scrolling; no arrow-key selection model is added to this navigation.
`Home / End`	Keep native browser behavior; use Tab and Shift+Tab to move between links and buttons.
`Enter`	Activate the focused native link or button, including a panel trigger.
`Space`	Activate the focused button or panel trigger; native links use Enter.
`Escape`	Close the panel and restore focus to its trigger.

API

Inputs and Outputs match the installed package. Named types link to definitions. Each available Template/projection has an executable example.

Inputs

Configure the component with [property]="value". Your application supplies these values; the component does not replace the state you pass in.

Name	Type	Default	Template binding	Description
`ariaLabel`	`string`	`'Main navigation'`	`[ariaLabel]`	Accessible navigation/menu name. Use a label specific to this region.
`ariaLabelledBy`	`string \| null`	`null`	`[ariaLabelledBy]`	Id of an existing element naming the navigation; takes precedence over ariaLabel.
`breakpoint`	`string`	`'960px'`	`[breakpoint]`	Viewport width threshold for compact mobile presentation, expressed as CSS pixels.
`direction`	`NeuTextDirection`	`'ltr'`	`[direction]`	Text/keyboard direction: ltr or rtl.
`disabled`	`boolean`	`false`	`[disabled]`	Disables the trigger/navigation. Individual item disabled states belong to items.
`id`	`string \| undefined`	No default	`[id]`	Optional stable host id. Keep ids unique when displaying several menus.
`items`	`readonly NeuMegaMenuItem[]`	`[]`	`[items]`	Discriminated root entries: link, command or panel with columns/groups/leaves.
`menuButtonAriaLabel`	`string`	`'Toggle navigation'`	`[menuButtonAriaLabel]`	Accessible mobile toggle name; translate it for your application.
`orientation`	`NeuMegaMenuOrientation`	`'horizontal'`	`[orientation]`	Root layout and keyboard orientation: horizontal or vertical.
`scrollHeight`	`string`	`'min(28rem, 70vh)'`	`[scrollHeight]`	Maximum panel height; panel content scrolls locally when needed.

Outputs

Listen to an event with (event)="handler($event)". The table explains the data your handler receives and how to use it.

Name	Payload	Template binding	Description
`itemClick`	`NeuMegaMenuItem \| NeuMegaMenuLeaf`	`(itemClick)="onItemClick($event)"`	Emits the activated leaf/action. The optional command runs first; disabled entries do not activate.
`mobileActiveChange`	`boolean`	`(mobileActiveChange)="onMobileActiveChange($event)"`	Reports whether mobile navigation is open; not a controlled-state Input.

Templates

ng-content projects content into the component. TemplateRef inputs receive a template; ng-template directives identify templates with a typed context. A directive shared by an entrypoint is not necessarily a slot of this component.

Name	Mechanism	Contract
`NeuMegaMenuEndDirective`View example	Public template directive (entrypoint)	`ng-template[neuMegaMenuEnd]`
`NeuMegaMenuItemDirective`View example	Public template directive (entrypoint)	`ng-template[neuMegaMenuItem]`
`NeuMegaMenuStartDirective`View example	Public template directive (entrypoint)	`ng-template[neuMegaMenuStart]`

NeuMegaMenuEndDirectiveView example

Public template directive (entrypoint)

ng-template[neuMegaMenuEnd]

Declaration

Full context

NeuMegaMenuItemDirectiveView example

Public template directive (entrypoint)

ng-template[neuMegaMenuItem]

Declaration

Full context

import type { NeuMegaMenuItemTemplateContext } from '@neural-ui/core/mega-menu';

import { NeuMegaMenuItemDirective } from '@neural-ui/core/mega-menu';

// Public declaration (reference only)
readonly templateRef: TemplateRef<NeuMegaMenuItemTemplateContext>;

NeuMegaMenuStartDirectiveView example

Public template directive (entrypoint)

ng-template[neuMegaMenuStart]

Declaration

Full context

Each example demonstrates a different template. Switch between Demo and Code to inspect its implementation, imports and state.

Public Types

Open a type to inspect its definition and interface fields.

NeuMegaMenuColumnTypeScript

import type { NeuMegaMenuGroup } from '@neural-ui/core/mega-menu';

import type { NeuMegaMenuColumn } from '@neural-ui/core/mega-menu';

// Public declaration (reference only)
export interface NeuMegaMenuColumn {
  readonly groups: readonly NeuMegaMenuGroup[];
  readonly key: string;
}

NeuMegaMenuGroupTypeScript

import type { NeuMegaMenuLeaf } from '@neural-ui/core/mega-menu';

import type { NeuMegaMenuGroup } from '@neural-ui/core/mega-menu';

// Public declaration (reference only)
export interface NeuMegaMenuGroup {
  readonly items: readonly NeuMegaMenuLeaf[];
  readonly key: string;
  readonly label?: string;
}

NeuMegaMenuItemTypeScript

import type { NeuMegaMenuPanel } from '@neural-ui/core/mega-menu';

import type { NeuMegaMenuItem } from '@neural-ui/core/mega-menu';

// Public declaration (reference only)
export type NeuMegaMenuItem = (NeuMegaMenuEntry & NeuMegaMenuDestination & {
    readonly kind: 'link';
    readonly command?: never;
    readonly panel?: never;
}) | (NeuMegaMenuEntry & {
    readonly kind: 'command';
    readonly command: NeuMegaMenuCommand;
    readonly url?: never;
    readonly routerLink?: never;
    readonly panel?: never;
}) | (NeuMegaMenuEntry & {
    readonly kind: 'panel';
    readonly panel: NeuMegaMenuPanel;
    readonly url?: never;
    readonly routerLink?: never;
    readonly command?: never;
});

NeuMegaMenuItemTemplateContextTypeScript

import type { NeuMegaMenuItem } from '@neural-ui/core/mega-menu';
import type { NeuMegaMenuLeaf } from '@neural-ui/core/mega-menu';

import type { NeuMegaMenuItemTemplateContext } from '@neural-ui/core/mega-menu';

// Public declaration (reference only)
export interface NeuMegaMenuItemTemplateContext {
  $implicit: NeuMegaMenuItem | NeuMegaMenuLeaf;
  active: boolean;
  index: number;
  level: 0 | 3;
}

NeuMegaMenuLeafTypeScript

import type { NeuMegaMenuLeaf } from '@neural-ui/core/mega-menu';

// Public declaration (reference only)
export type NeuMegaMenuLeaf = (NeuMegaMenuEntry & NeuMegaMenuDestination & {
    readonly kind: 'link';
    readonly command?: never;
    readonly panel?: never;
}) | (NeuMegaMenuEntry & {
    readonly kind: 'command';
    readonly command: NeuMegaMenuCommand;
    readonly url?: never;
    readonly routerLink?: never;
    readonly panel?: never;
});

NeuMegaMenuOrientationTypeScript

import type { NeuMegaMenuOrientation } from '@neural-ui/core/mega-menu';

// Public declaration (reference only)
export type NeuMegaMenuOrientation = 'horizontal' | 'vertical';

NeuMegaMenuPanelTypeScript

import type { NeuMegaMenuColumn } from '@neural-ui/core/mega-menu';

import type { NeuMegaMenuPanel } from '@neural-ui/core/mega-menu';

// Public declaration (reference only)
export interface NeuMegaMenuPanel {
  readonly columns: readonly NeuMegaMenuColumn[];
}

Styles and tokens

Use supported public tokens for the component. Icon resolution and surrounding example layout belong to the application. Check both themes and narrow screens.

Specific tokens

This component uses shared theme tokens rather than dedicated component hooks.

Shared tokens used

Override these on a local wrapper to affect this example. An override on :root affects other components that use the same token.

Token	Purpose here	Other impact	Default / fallback
`--neu-border`	Normal control and cell borders	Shared by other Core consumers; scope the override.	`rgba(15, 23, 42, 0.08)`
`--neu-primary`	Brand color for active controls and emphasis	Shared by other Core consumers; scope the override.	`#007aff`
`--neu-primary-soft`	Subtle selected or active surface	Shared by other Core consumers; scope the override.	`var(--neu-primary-50)`
`--neu-surface`	Main field, header or control surface	Shared by other Core consumers; scope the override.	`#ffffff`
`--neu-surface-2`	Secondary surfaces and alternating rows	Shared by other Core consumers; scope the override.	`#f1f5f9`
`--neu-text`	Main text and inherited icon color	Shared by other Core consumers; scope the override.	`#0f172a`
`--neu-shadow-lg`	Surface or overlay elevation	Shared by other Core consumers; scope the override.	`0 10px 30px rgba(15, 23, 42, 0.1), 0 4px 8px rgba(15, 23, 42, 0.04)`

Related components

Compare the related navigation components to choose the interaction that fits your interface.

Usage

Examples

Try and configure

Data and content

Accessibility and keyboard

API

Inputs

Outputs

Templates

Start content

Root and leaf content

End content

Public Types

Styles and tokens

Specific tokens

Shared tokens used