GET STARTED

Import

Import only the canonical primitives used by the chosen data or projected composition.

import { NeuralBreadcrumb, NeuralBreadcrumbItemComponent,
  NeuralBreadcrumbSeparatorTemplate } from '@neural-ng/core/breadcrumb';

@Component({
  imports: [NeuralBreadcrumb, NeuralBreadcrumbItemComponent, NeuralBreadcrumbSeparatorTemplate],
})

Data-driven trail

Immutable items support Angular routes, native URLs, icons, disabled locations and explicit current state.

Semantic selection event

itemSelect reports the stable key, immutable item and original event for visible and overflow selections.

RouterLink and href

Router commands retain SPA navigation and query/fragment support. Native URLs retain target and rel semantics.

Responsive overflow

maxItems preserves the useful edges and moves the middle into the shared accessible Menu. The dots trigger also uses the shared Tooltip.

Projected items

Declarative source items provide the same normalized model. Use either projected items or [items], never both.

Icon and template separators

Use a Neural Icon class for the common case or a separator template for custom visual language.

Current and disabled states

The final item is current by default unless any item explicitly owns current. Disabled locations stay readable but inert.

readonly items = [
  { key: 'home', label: 'Home', routerLink: '/' },
  { key: 'locked', label: 'Locked', disabled: true },
  { key: 'active', label: 'Current section', current: true },
];

Unstyled and typed class slots

Navigation, routing, overflow, Tooltip and structural hooks remain while consumer classes own every visual.

Component boundaries

Named navigation landmark

The root is a native nav containing an ordered list. Localize ariaLabel when the application language is not English.

Current page

Exactly one location should expose aria-current="page". The final item is selected automatically unless an explicit current flag exists.

Native keyboard behavior

Links use browser and Angular Router keyboard semantics. Breadcrumb adds no arrow-key model and never turns readable disabled text into a fake link.

Accessible overflow

The overflow trigger is a native Button named by overflowLabel. The popup delegates focus and keyboard behavior to Neural Menu; Tooltip is supplementary only.

RTL

Flex layout and configured directional icon follow the document direction. Supply a culturally appropriate separator icon when mirroring is important.

NeuralBreadcrumb inputs

Output

NeuralBreadcrumbItemComponent inputs

Typed class slots

Public types

Container tokens

Item and separator tokens

State tokens