Breadcrumb

Show the current page in its navigation hierarchy.

Category: Navigation
Import: @neural-ui/core/breadcrumb
Selector: neu-breadcrumb

import { NeuBreadcrumbComponent } from '@neural-ui/core/breadcrumb';

Usage

Supply items in ancestor-to-current order. route uses Angular RouterLink; url opens an external destination in a new tab. The final item is always the current page and is not a link. separator is decorative. Optional item icon keys are resolved by the application icon resolver.

Examples

Try the behavior and inspect the executable source in Code.

Previous levels are router links; the last item is the current page, not a link.

Try and configure

Change the options, try the result and inspect its generated template. Open Code for the full implementation.

Separator

Current page label

Item icons

New-tab destination

Ancestor without destination

<neu-breadcrumb
  [items]="items()"
  separator="/"
/>

State and data for this configuration

These values match the current preview. Complete handlers, Core imports and templates are in Source.

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

export const items = signal([
  {
    "label": "Home",
    "route": "/en",
    "icon": undefined
  },
  {
    "label": "Components",
    "route": "/en/components"
  },
  {
    "label": "Breadcrumb"
  }
]);

import { signal } from "@angular/core";
import type { NeuBreadcrumbItem } from "@neural-ui/core/breadcrumb";

export const items = signal<NeuBreadcrumbItem[]>([
  {
    "label": "Home",
    "route": "/en"
  },
  {
    "label": "Components",
    "route": "/en/components"
  },
  {
    "label": "Breadcrumb"
  }
]);

Data and content

items and separator are Inputs. Breadcrumb has no Outputs; navigation belongs to RouterLink or the browser. Do not put action buttons or mutable selection state in the item list.

Accessibility and keyboard

Breadcrumb is a navigation landmark containing an ordered list. The final item has aria-current="page". Ancestor links support native keyboard navigation; separators and optional icons are hidden from assistive technology.

Key	Action
`Tab`	Reach ancestor links; the current page is not another navigation action.
`Enter`	Follow the focused ancestor link.

API

Inputs and Outputs match the pinned Core package. Named types link to their definitions. Templates include executable examples for each supported region.

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
`items`	`NeuBreadcrumbItem[]`	`[]`	`[items]`	Ordered navigation items; the last item is always current.
`separator`	`string`	`'/'`	`[separator]`	Decorative text between items.

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.

This component does not expose content projection or public customization templates.

Public Types

Open a type to inspect its definition and interface fields.

NeuBreadcrumbItemTypeScript

import type { NeuIconKey } from '@neural-ui/core/foundation';

import type { NeuBreadcrumbItem } from '@neural-ui/core/breadcrumb';

// Public declaration (reference only)
export interface NeuBreadcrumbItem {
  icon?: NeuIconKey;
  label: string;
  route?: string | string[];
  url?: string;
}

NeuIconKeyTypeScript

Styles and tokens

Use public tokens for surfaces, text, spacing and focus. Test your content in both themes and at narrow widths.

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
`--neu-primary`	Brand color for active controls and emphasis	Shared by other Core consumers; scope the override.	`#007aff`
`--neu-text`	Main text and inherited icon color	Shared by other Core consumers; scope the override.	`#0f172a`
`--neu-text-disabled`	Text of disabled controls	Shared by other Core consumers; scope the override.	`#64748b`
`--neu-font-sans`	Text typography	Shared by other Core consumers; scope the override.	`'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif`
`--neu-radius-xs`	Corner radius	Shared by other Core consumers; scope the override.	`2px`
`--neu-text-sm`	Text size	Shared by other Core consumers; scope the override.	`0.875rem`
`--neu-text-xs`	Text size	Shared by other Core consumers; scope the override.	`0.75rem`
`--neu-transition`	Timing of state changes	Shared by other Core consumers; scope the override.	`200ms ease`