Breadcrumbs
Hierarchy trails built from native navigation, lists, links, and current-page text.
Breadcrumbs use directives on native list, link, and text elements.
import {
KuiBreadcrumbItemDirective,
KuiBreadcrumbSeparatorComponent,
KuiBreadcrumbsDirective,
} from '@kikita-labs/ui';Wrap the ordered list in a labelled navigation landmark and mark the final crumb as current.
<nav class="basic-breadcrumbs-example" aria-label="Breadcrumb">
<ol kuiBreadcrumbs>
<li><a kuiBreadcrumbItem href="/components">Components</a></li>
<li kuiBreadcrumbSeparator></li>
<li><span kuiBreadcrumbItem>Surfaces</span></li>
<li kuiBreadcrumbSeparator></li>
<li><span kuiBreadcrumbItem current>Breadcrumbs</span></li>
</ol>
</nav>Inputs verified against @kikita-labs/ui v1.6.1 public typings.
| Name | Type | Default | Description |
|---|---|---|---|
| ol[kuiBreadcrumbs].size | 'sm' | 'md' | 'lg' | 'md' | Font size, separator scale, and spacing for the full trail. |
| a[kuiBreadcrumbItem] | directive | - | Native link crumb for navigable hierarchy levels. |
| span[kuiBreadcrumbItem] | directive | - | Plain-text crumb for grouping labels or the current page. |
| span[kuiBreadcrumbItem].current | boolean | false | Marks the final crumb as the current page and sets aria-current. |
| li[kuiBreadcrumbSeparator] | component | - | Decorative separator list item hidden from assistive technology. |
The component keeps native semantics visible instead of replacing navigation with custom widgets.