Menubar

Usage

Pass a NeuMenuItem collection. Top-level leaves act directly; entries with children open MenuButton popups. visible:false hides entries and disabled prevents interaction. Item content can be replaced with neuMenuItem, including content in the child popup. Keep top-level labels short and give the bar a descriptive ariaLabel.

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-menubar
  [items]="items"
  ariaLabel="Example navigation"
  (itemClick)="selectItem($event)"
/>

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. */ }
  }
];

Data and content

itemClick reports an activated leaf. Commands belong to the item data and execute when activated. The open dropdown is owned by the component; no open Input is exposed. Moving across groups while a dropdown is open transfers the active dropdown rather than requiring another click.

Accessibility and keyboard

Tab enters the bar, left/right traverse available top-level items and Home/End reach its ends. Down/up opens a group at its first/last item; inside it, use the Menu keyboard controls. Escape closes the popup and restores trigger focus. Direction follows the document.

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 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.

• Menu
• MenuButton
• TieredMenu