Sidebar

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.

Product workspace

Compare a compact drawer with full-width navigation. Each destination shows its own content, and preferences stay selected when you return.

View and copy the complete example

basic.component.ts

import { Component, signal } from '@angular/core';
import { NeuButtonComponent } from '@neural-ui/native/button';
import { NeuSwitchComponent } from '@neural-ui/native/switch';
import { NeuCardComponent } from '@neural-ui/native/card';
import { NeuBadgeComponent } from '@neural-ui/native/badge';
import { NeuAvatarComponent } from '@neural-ui/native/avatar';
import { NeuProgressBarComponent } from '@neural-ui/native/progress-bar';
import { NeuSidebarComponent } from '@neural-ui/native/sidebar';
import { View, Text, ScrollView } from '@ng-native/components';
import type { NeuOption } from '@neural-ui/native';

@Component({
  selector: 'app-example',
  imports: [NeuButtonComponent, NeuSwitchComponent, NeuCardComponent, NeuBadgeComponent, NeuAvatarComponent, NeuProgressBarComponent, NeuSidebarComponent, 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">Product workspace</text><text class="product-caption">Keep your destinations close</text></view>
    <neu-switch label="Full-width navigation" [(checked)]="fullWidth" />
    <view class="product-actions"><neu-button label="Open navigation" size="sm" (pressed)="open.set(true)" /></view>
    @switch (destination()) {
      @case ('team') {
        <view class="product-section"><text class="product-heading">Your team</text>
          @for (person of members; track person.label) { <view class="product-row"><neu-avatar [label]="person.label" size="md" /><view class="product-copy"><text class="product-heading">{{ person.label }}</text><text class="product-caption">{{ person.role }}</text></view></view> }
        </view>
      }
      @case ('settings') {
        <view class="product-surface"><text class="product-heading">Notification preferences</text><neu-switch label="Email updates" [(checked)]="updates" /><text class="product-caption">{{ updates() ? 'Email updates enabled' : 'Email updates disabled' }}</text></view>
      }
      @default {
        <neu-card title="Mobile launch" description="Next milestone · Friday" variant="outlined"><view class="product-section"><neu-badge label="In progress" tone="info" /><neu-progress-bar label="Release readiness" [value]="72" /></view></neu-card>
        <neu-card title="Website refresh" description="Design team · In review" variant="outlined"><neu-badge label="In review" tone="warning" /></neu-card>
      }
    }
    <neu-sidebar title="Workspace" [items]="destinations" [fullWidth]="fullWidth()" [(open)]="open" [(value)]="destination">
      <text class="product-caption">Product workspace</text>
    </neu-sidebar></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 destinations: readonly NeuOption[] = [{ id: 'projects', label: 'Projects' }, { id: 'team', label: 'Team' }, { id: 'settings', label: 'Settings' }];
  readonly members = [{ label: 'Ada Lovelace', role: 'Product designer' }, { label: 'Grace Hopper', role: 'Engineering lead' }, { label: 'Alan Turing', role: 'Mobile developer' }];
  readonly open = signal(false);
  readonly fullWidth = signal(false);
  readonly destination = signal('projects');
  readonly updates = signal(true);
}

Selected destination

Open navigation to change the destination displayed in the content.

View and copy the complete example

selected-destination.component.ts

import { Component, signal, computed } from '@angular/core';
import { NeuButtonComponent } from '@neural-ui/native/button';
import { NeuCardComponent } from '@neural-ui/native/card';
import { NeuSidebarComponent } from '@neural-ui/native/sidebar';
import { View, Text, ScrollView } from '@ng-native/components';
import type { NeuOption } from '@neural-ui/native';

@Component({
  selector: 'app-example',
  imports: [NeuButtonComponent, NeuCardComponent, NeuSidebarComponent, View, Text, ScrollView],
  template: `
    <scroll-view class="usage-scroll" keyboardShouldPersistTaps="handled"><view class="usage-stack">
    <neu-button label="Open navigation" (pressed)="open.set(true)" />
    <neu-sidebar title="Workspace" [items]="destinations" [(open)]="open" [(value)]="destination" />
    <text class="usage-caption">Current destination: {{ destination() || 'None' }}</text><neu-card [title]="destinationLabel()" description="Application content"><text>The selected navigation destination updates this screen.</text></neu-card>
    </view></scroll-view>
  `,
  styles: `
.actions { gap: 12px; align-items: flex-start; } text { color: var(--neu-text, #172033); font-size: 16px; }

.usage-scroll { flex: 1; }
.usage-stack { gap: 20px; padding-bottom: 20px; }
.usage-section { gap: 12px; }
.usage-heading { color: var(--neu-text, #172033); font-size: 16px; font-weight: 600; }
.usage-caption { color: var(--neu-muted, #64748b); font-size: 14px; }
.usage-row { flex-direction: row; flex-wrap: wrap; gap: 12px; align-items: center; }
.usage-actions { flex-direction: row; flex-wrap: wrap; gap: 8px; align-items: center; }


  `,
})
export class ExampleComponent {
  readonly destinations: readonly NeuOption[] = [
    {
      "id": "projects",
      "label": "Projects"
    },
    {
      "id": "team",
      "label": "Team"
    },
    {
      "id": "settings",
      "label": "Settings"
    }
  ];
  readonly open = signal(false);
  readonly destination = signal('projects');
  readonly destinationLabel = computed(() => this.destinations.find(item => item.id === this.destination())?.label ?? 'Workspace');
}

Interactive playground

Change the settings and try the result.

Device captures shown in English.

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

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

API reference

Inputs

Name	Type	Default	Binding	Description
title	string	Required	Input	Heading for the surface, section or presentation.
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.
fullWidth	boolean	false	Input	Fill the available viewport width when true. The default keeps the 86% drawer capped at 360 points. Opening and closing use the measured panel width, including after rotation or a width change.
closeLabel	string	'Close navigation'	Input	Text or accessible name used for close. It does not perform the action by itself.

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)].
value	string	''	Model · two-way	Current edited value or selected ID(s), using the declared type. Bind a writable signal with [(value)].

Outputs

Name	Payload	When it emits
openChange	boolean	Emits the updated open value. [(open)] binds this output together with its model input.
valueChange	string	Emits the updated value value. [(value)] binds this output together with its model input.
navigate	string	Reports a requested navigation target; application routes remain application-owned.
opened	void	Reports that the native presentation has opened.
dismissed	void	Reports completion of native dismissal.

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);
readonly value = signal<string>('');

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.

Import