MenuButton | Neural UI v2

Usage

Provide items and a trigger label. disabled prevents opening. The popup uses the same item model as Menu, including nested groups, optional commands, disabled entries and separators. The default trigger is a compact neutral button; projected content replaces its visible label while the native button keeps the menu relationship.

Examples

Try the interaction and open Code for the complete implementation.

Selected: — · itemClick: 0 · Commands: 0

openChange: 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

openChange: closed

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

<neu-menu-button
  [items]="items"
  label="Actions"
  [disabled]="false"
  (itemClick)="selectItem($event)"
  (openChange)="open.set($event)"
/>

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": "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

openChange reports the actual popup state; it is an Output, not an open Input. A leaf command runs before itemClick is emitted and the popup closes. Outside pointer interaction or Escape closes it. neuMenuItem customizes popup item content; ordinary projected content customizes the trigger.

Accessibility and keyboard

Enter, Space or Arrow Down opens and focuses the first available action; Arrow Up can open at the last action. Use the Menu keyboard controls inside the popup. Escape returns focus to the trigger. Custom trigger content needs a clear visible or accessible name and must not contain another button or link.

Key	Action
`Tab`	Focus the enabled trigger.
`Enter`	Open the menu from the trigger; inside the menu, activate the focused action.
`Space`	Open the menu from the trigger; inside the menu, activate the focused action.
`ArrowDown`	From the trigger, open at the first available action; inside, move to the next action.
`ArrowUp`	From the trigger, open at the last available action; inside, move to the previous action.
`ArrowRight / ArrowLeft`	Navigate menu groups according to text direction.
`Home / End`	Reach the first or last available action in the current level.
`Escape`	Close the popup and return focus to the 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
`disabled`	`boolean`	`false`	`[disabled]`	Disables the trigger/navigation. Individual item disabled states belong to items.
`items`	`NeuMenuItem[]`	`[]`	`[items]`	Action data with unique keys; children create groups. Core does not mutate this array.
`label`	`string`	`'Menu'`	`[label]`	Visible fallback trigger text when no content is projected.

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`	`NeuMenuItem`	`(itemClick)="onItemClick($event)"`	Emits the activated leaf/action. The optional command runs first; disabled entries do not activate.
`openChange`	`boolean`	`(openChange)="onOpenChange($event)"`	Reports the actual popup state: true on open, false on close.

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]" />`
`*` Projected content View example	Content projection Application-provided content.	`<ng-content />` Context used: `—`
`NeuMenuItemDirective`View example	Public template directive (entrypoint)	`ng-template[neuMenuItem]`

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

*

Projected content

View example

Content projection

Application-provided content.

<ng-content />

Context used: —

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.