@kit-ng-ui/breadcrumb

Hierarchical navigation trail. Separators render via CSS ::before so projected children compose without extra wrapper logic.

Install

pnpm add @kit-ng-ui/breadcrumb

@use '@kit-ng-ui/breadcrumb/styles' as breadcrumb;

Usage

Data-driven

<kit-breadcrumb [items]="trail"></kit-breadcrumb>

import { KitBreadcrumbComponent, type KitBreadcrumbItem } from '@kit-ng-ui/breadcrumb';

trail: KitBreadcrumbItem[] = [
  { title: 'Home', path: '/' },
  { title: 'Orders', path: '/orders' },
  { title: '#1024' },
];

The last item always renders as plain text. Earlier items render as router links when path is set, or <a href> links when href is set.

Declarative

<kit-breadcrumb separator=">">
  <kit-breadcrumb-item path="/">Home</kit-breadcrumb-item>
  <kit-breadcrumb-item path="/orders">Orders</kit-breadcrumb-item>
  <kit-breadcrumb-item>#1024</kit-breadcrumb-item>
</kit-breadcrumb>

API

<kit-breadcrumb>

| Input | Type | Default | Description | | ------------- | --------------------------------- | ------- | ------------------------------------ | | items | ReadonlyArray<KitBreadcrumbItem> | [] | Data-driven trail. Empty for slot mode. | | separator | string | '/' | Separator character / string. |

<kit-breadcrumb-item>

| Input | Type | Default | Description | | ------ | -------------------------------------- | ------- | -------------------------- | | path | string \| ReadonlyArray<unknown> \| null | null | Router link target. | | href | string \| null | null | External URL target. |