TieredMenu | Neural UI v2

Usage

Use the NeuMenuItem model with stable keys and children. Unlike inline Menu groups, TieredMenu opens child levels in connected overlays. Leaf entries support application commands and link destinations. Hidden, disabled and separator entries retain their menu behavior. neuMenuItem replaces the visible content at every level.

Examples

Try the interaction and open Code for the complete implementation.

Selected: — · itemClick: 0 · Commands: 0

expandedKeys: —

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

expandedKeys: —

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

<neu-tiered-menu
  [items]="items"
  ariaLabel="Example navigation"
  [expandedKeys]="expandedKeys()"
  (expandedKeysChange)="expandedKeys.set($event)"
  (itemClick)="selectItem($event)"
/>

State and data for this configuration

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

import { signal } from '@angular/core';

export const items = [
  {
    "key": "new",
    "label": "New document",
    "icon": "file",
    "shortcut": "Ctrl+N",
    "command": () => { /* Handler in the complete example. */ }
  },
  {
    "key": "workspace",
    "label": "Workspace",
    "icon": "folder",
    "badge": 3,
    "children": [
      {
        "key": "drafts",
        "label": "Drafts",
        "children": [
          {
            "key": "review",
            "label": "Review drafts",
            "command": () => { /* Handler in the complete example. */ }
          }
        ]
      },
      {
        "key": "shared",
        "label": "Shared documents",
        "command": () => { /* Handler in the complete example. */ }
      }
    ]
  },
  {
    "key": "divider",
    "label": "",
    "separator": true
  },
  {
    "key": "export",
    "label": "Export report",
    "icon": "file",
    "disabled": true,
    "command": () => { /* Handler in the complete example. */ }
  },
  {
    "key": "search",
    "label": "Search documents",
    "icon": "search",
    "visible": false,
    "command": () => { /* Handler in the complete example. */ }
  }
];

export const expandedKeys = signal([]);

Data and content

Provide expandedKeys for a controlled open path and accept expandedKeysChange; omit it for internal state. A new branch path replaces the previous sibling path. Leaf activation executes command, emits itemClick and proposes closing all submenus. Pointer interaction outside the menu also proposes closing.

Accessibility and keyboard

Use up/down and Home/End within a level, right/left to enter or return from a submenu (reversed for RTL), and Escape to close the deepest level and restore focus. Typeahead finds labels. Keep custom item content presentational so the owning menu control remains the only focus target.

Key	Action
`Tab`	Enter or leave the available menu actions.
`ArrowUp / ArrowDown`	Move through available actions in the current level.
`ArrowRight / ArrowLeft`	Enter or return from a submenu; directions reverse in RTL.
`Home`	Focus the first available action in the level.
`End`	Focus the last available action in the level.
`Enter`	Activate the focused enabled action or open its group.
`Space`	Activate the focused enabled action or open its group.
`A–Z`	Find available actions by their label.
`Escape`	Close the deepest open submenu; a popup restores trigger focus.

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`	`'Tiered menu'`	`[ariaLabel]`	Accessible navigation/menu name. Use a label specific to this region.
`expandedKeys`	`readonly string[] \| undefined`	`undefined`	`[expandedKeys]`	Applied branch keys; undefined enables component-owned expansion.
`items`	`NeuMenuItem[]`	`[]`	`[items]`	Action data with unique keys; children create groups. Core does not mutate this array.

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
`expandedKeysChange`	`string[]`	`(expandedKeysChange)="onExpandedKeysChange($event)"`	Proposes the next branch keys. Update expandedKeys to accept a controlled change.
`itemClick`	`NeuMenuItem`	`(itemClick)="onItemClick($event)"`	Emits the activated leaf/action. The optional command runs first; disabled entries do not activate.

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
`ng-template[neuMenuItem]`	Content projection	`<ng-content select="ng-template[neuMenuItem]" />`
`NeuMenuItemDirective`View example	Public template directive (entrypoint)	`ng-template[neuMenuItem]`

ng-template[neuMenuItem] Content projection <ng-content select="ng-template[neuMenuItem]" />

NeuMenuItemDirectiveView example

Public template directive (entrypoint)

ng-template[neuMenuItem]

Declaration

Full context

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

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

// Public declaration (reference only)
readonly templateRef: TemplateRef<{
    $implicit: NeuMenuItem;
}>;

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.

NeuIconKeyTypeScript

NeuMenuItemTypeScript

import type { NeuIconKey } from '@neural-ui/core/foundation';

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

// Public declaration (reference only)
interface NeuMenuItem {
  active?: boolean;
  badge?: string | number;
  children?: NeuMenuItem[];
  command?: (event: {
    originalEvent: Event;
    item: NeuMenuItem;
}) => void;
  data?: unknown;
  disabled?: boolean;
  icon?: NeuIconKey;
  key: string;
  label: string;
  rel?: string;
  routerLink?: string | unknown[];
  separator?: boolean;
  shortcut?: string;
  target?: string;
  tooltip?: string;
  url?: string;
  visible?: boolean;
}

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
No data

Related components

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