Nav

Usage

Each NeuNavItem has id, label and an icon key. route uses Angular routing and href is an external destination. children creates expandable groups, active marks the current entry and badge/badgeTone communicate status. Icons resolve through the application provider; an empty key omits the graphic.

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-nav
  [items]="items"
  ariaLabel="Example navigation"
  [collapsed]="collapsed()"
  [collapsible]="true"
  expandLabel="Expand navigation"
  collapseLabel="Collapse navigation"
  (collapsedChange)="collapsed.set($event)"
>
  <span neu-nav-brand class="menus-brand">
    <app-navigation-example-icon kind="home" size="24" />
    <span>Neural Studio</span>
  </span>
  <app-navigation-example-icon neu-nav-brand-icon kind="home" size="24" />
</neu-nav>

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

export const items = [
  {
    "id": "workspace",
    "label": "Workspace",
    "icon": "home",
    "route": "/en/components/nav",
    "active": true
  },
  {
    "id": "components",
    "label": "Components",
    "icon": "folder",
    "children": [
      {
        "id": "button",
        "label": "Button",
        "icon": "file",
        "route": "/en/components/button"
      },
      {
        "id": "table",
        "label": "Table",
        "icon": "file",
        "route": "/en/components/table",
        "badge": "3",
        "badgeTone": "info"
      },
      {
        "id": "forms",
        "label": "Form controls",
        "icon": "folder",
        "children": [
          {
            "id": "date-input",
            "label": "DateInput",
            "icon": "file",
            "route": "/en/components/date-input"
          }
        ]
      }
    ]
  },
  {
    "id": "settings",
    "label": "Settings",
    "icon": "settings",
    "route": "/en/getting-started/project-configuration",
    "disabled": true
  }
];

export const collapsed = signal(false);

Data and content

Provide collapsed and accept collapsedChange for controlled rail width; omit collapsed for internal state. collapsible controls whether the toggle is present, not the applied state. Core owns local group disclosure and collapsed-mode flyouts. The application owns route/active data. Project brand icon, brand text and footer with their dedicated attributes. Nav has no itemClick Output.

Accessibility and keyboard

Translate expandLabel/collapseLabel and name the navigation. Use native links/buttons with Tab and Enter/Space. Groups expose aria-expanded and active destinations expose aria-current. Collapsed flyouts retain labelled controls and Escape focus restoration. Keep brand/footer controls meaningful in both expanded and collapsed layouts.

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.

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 { NeuNavItem } from '@neural-ui/core/nav';

// Public declaration (reference only)
export interface NeuNavItem {
  active?: boolean;
  badge?: string;
  badgeTone?: 'neutral' | 'success' | 'warning' | 'danger' | 'info';
  children?: NeuNavItem[];
  disabled?: boolean;
  href?: string;
  icon: NeuIconKey;
  id: string;
  label: string;
  route?: string;
}

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