Menu

Usage

Build items with unique keys and readable labels. children creates an inline group; separator creates a divider, visible:false removes an entry and disabled prevents activation. icon resolves through your application icon provider. badge and shortcut add compact context; shortcut is a visual hint, not a registered keyboard shortcut.

Examples

Try the interaction and open Code for the complete implementation.

Try and configure

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

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

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([]);

Activate from code

Use activate(item) to trigger an action from your application. An enabled leaf runs its optional command and emits itemClick; a branch changes expansion instead. Disabled, hidden and separator entries cannot be activated.

Data and content

Set expandedKeys and accept expandedKeysChange to control the open groups. Omit expandedKeys to use local expansion; inline groups initially expand. Activating a leaf calls its optional command and emits itemClick. Branch activation only proposes expansion. Use a command or itemClick to connect an action to application behavior, including navigation. activate(item) exposes the same guarded action flow for programmatic activation.

Accessibility and keyboard

Tab enters the action list. Up/down, Home/End and typeahead move focus through available items. Enter/Space activate a leaf; left/right expand, enter or return from a group according to text direction. Hidden entries, separators and disabled actions are excluded from keyboard navigation. Custom Templates replace item content, not its native interactive wrapper.

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.

Outputs

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

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

// Public declaration (reference only)
export declare class NeuMenuItemDirective {
}

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

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

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

Public methods

Public Types

Open a type to inspect its definition and interface fields.

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

// Public declaration (reference only)
export type NeuIconKey = string;

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.

Related components

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

• MenuButton
• TieredMenu
• Menubar