Menu | Neural Native

Jump to a section

Examples

Import ExampleComponent into its parent and place <app-example /> inside your application’s root neu-theme. The preview supplies the device frame and safe areas; use the root setup from Installation in your app.

The right action, in the right place

Use the menu to reveal a project summary or prepare an invitation locally. The active release cannot be archived; menu items keep descriptive labels.

View and copy the complete example

basic.component.ts

import { Component, signal } from '@angular/core';
import { NeuButtonComponent } from '@neural-ui/native/button';
import { NeuInputComponent } from '@neural-ui/native/input';
import { NeuCardComponent } from '@neural-ui/native/card';
import { NeuBadgeComponent } from '@neural-ui/native/badge';
import { NeuMenuComponent } from '@neural-ui/native/menu';
import { NeuProgressBarComponent } from '@neural-ui/native/progress-bar';
import { View, Text, ScrollView } from '@ng-native/components';

@Component({
  selector: 'app-example',
  imports: [NeuButtonComponent, NeuInputComponent, NeuCardComponent, NeuBadgeComponent, NeuMenuComponent, NeuProgressBarComponent, View, Text, ScrollView],
  template: `
    <scroll-view class="product-scroll" keyboardShouldPersistTaps="handled" [showsVerticalScrollIndicator]="true"><view class="product-stack"><view class="product-section"><text class="product-title" accessibilityRole="header">The right action, in the right place</text><text class="product-caption">A project menu with useful outcomes</text></view>
    <neu-card title="Mobile launch" description="Product workspace" variant="outlined"><view class="product-section"><neu-badge label="In progress" tone="info" /><view class="product-actions"><neu-menu label="Project actions" [items]="actions" (activated)="action.set($event)" /></view></view></neu-card>@if (action() === 'details') { <neu-card title="Project summary" description="Mobile launch · Friday milestone" variant="outlined"><view class="product-section"><neu-progress-bar label="Release readiness" [value]="72" /><text>Prepare the onboarding flow and final release notes.</text></view></neu-card> }
    @if (action() === 'invite') { <view class="product-surface"><text class="product-heading">Invite a teammate</text><neu-input label="Teammate name" [(value)]="invitee" /><view class="product-actions"><neu-button label="Preview invitation" size="sm" [disabled]="!invitee().trim()" (pressed)="prepare()" /></view>@if (prepared()) { <text class="product-caption">Invitation prepared locally for {{ prepared() }}</text> }</view> }</view></scroll-view>
  `,
  styles: `
.actions { gap: 12px; align-items: flex-start; } text { color: var(--neu-text, #172033); font-size: 16px; }

:host { flex: 1; flex-shrink: 1; min-height: 0; }
.product-scroll { flex: 1; flex-shrink: 1; height: 0px; min-height: 0; }
.product-stack { gap: 24px; padding-bottom: 20px; }
.product-section { gap: 12px; }
.product-row { flex-direction: row; align-items: center; gap: 12px; }
.product-copy { flex: 1; min-width: 0; gap: 4px; }
.product-title { color: var(--neu-text, #172033); font-size: 24px; line-height: 30px; font-weight: 600; }
.product-heading { color: var(--neu-text, #172033); font-size: 17px; line-height: 23px; font-weight: 600; }
.product-caption { color: var(--neu-muted, #596477); font-size: 14px; line-height: 20px; }
.product-actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
.product-surface { gap: 16px; padding: 16px; border-radius: 16px; background-color: var(--neu-surface, #ffffff); border-width: 1px; border-color: var(--neu-border, #a5afbf); }

  `,
})
export class ExampleComponent {
  readonly actions = [{ id: 'details', label: 'Open details', description: 'View the project summary' }, { id: 'invite', label: 'Prepare invitation', description: 'Choose a teammate for this project' }, { id: 'archive', label: 'Archive project', disabled: true }];
  readonly action = signal('');
  readonly invitee = signal('');
  readonly prepared = signal('');
  prepare() { if (this.invitee().trim()) this.prepared.set(this.invitee().trim()); }
}

Interactive playground

Change the settings and try the result.

Device captures shown in English.

Menu · android · native capture — **Android**Native screenshot

Menu · ios · native capture — **iOS**Native screenshot

API reference

Inputs

Name	Type	Default	Binding	Description
label	string	Required	Input	Human-readable name for the control, action or group.
showTrigger	boolean	true	Input	Displays the built-in action that opens this presentation.
closeLabel	string	'Dismiss menu'	Input	Text or accessible name used for close. It does not perform the action by itself.
items	readonly NeuOption[]	[]	Input	Ordered data for the component. Use the data contract below and stable, unique item IDs.
disabled	boolean	false	Input	Disables user interaction. Values can still be supplied by the application.

Models

Name	Type	Default	Binding	Description
open	boolean	false	Model · two-way	Whether the presentation or message is requested to be open. Bind a writable signal with [(open)].

Outputs

Name	Payload	When it emits
openChange	boolean	Emits the updated open value. [(open)] binds this output together with its model input.
activated	string	Emits the activated item ID. Your application performs the action.

Model state

Bind the signal with [(modelName)] without calling it. Use modelName() to read its value.

model-fields.ts

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

// Fields inside your component class
readonly open = signal<boolean>(false);

Types and data interfaces

Use the imports in your application. The definitions below are provided for reference.

NeuOption

NeuOption.ts

import type { NeuOption } from '@neural-ui/native';

// Public definition for reference only. Import this type; do not redeclare it.
export interface NeuOption {
    readonly id: string;
    readonly label: string;
    readonly description?: string;
    readonly disabled?: boolean;
}

Field	Type	Requirement	Meaning
id	string	Required	Stable, unique identifier used for tracking and selection.
label	string	Required	Human-readable item name.
description	string	Optional	Optional supporting text; rendering depends on the control.
disabled	boolean	Optional	Prevents activating or selecting this item.