Breadcrumb
Displays the path to the current resource using a hierarchy of links.
import { Component } from '@angular/core';
import { BrnMenuTrigger } from '@spartan-ng/brain/menu';
import {
HlmBreadcrumb,
HlmBreadcrumbEllipsis,
HlmBreadcrumbItem,
HlmBreadcrumbLink,
HlmBreadcrumbList,
HlmBreadcrumbPage,
HlmBreadcrumbSeparator,
} from '@spartan-ng/helm/breadcrumb';
import { HlmMenu, HlmMenuItem } from '@spartan-ng/helm/menu';
@Component({
selector: 'spartan-breadcrumb-preview',
imports: [
HlmBreadcrumb,
HlmBreadcrumbSeparator,
HlmBreadcrumbEllipsis,
HlmBreadcrumbList,
HlmBreadcrumbItem,
HlmBreadcrumbPage,
HlmBreadcrumbLink,
BrnMenuTrigger,
HlmMenu,
HlmMenuItem,
],
template: `
<nav hlmBreadcrumb>
<ol hlmBreadcrumbList>
<li hlmBreadcrumbItem>
<a hlmBreadcrumbLink link="/">Home</a>
</li>
<li hlmBreadcrumbSeparator></li>
<li hlmBreadcrumbItem>
<button [brnMenuTriggerFor]="breadcrumbDropdown">
<hlm-breadcrumb-ellipsis class="size-4" />
<span class="sr-only">Toggle menu</span>
</button>
<ng-template #breadcrumbDropdown>
<hlm-menu>
<button hlmMenuItem id="document">
<span>Documentation</span>
</button>
<button hlmMenuItem id="themes">
<span>Themes</span>
</button>
<button hlmMenuItem id="github">
<span>Github</span>
</button>
</hlm-menu>
</ng-template>
</li>
<li hlmBreadcrumbSeparator></li>
<li hlmBreadcrumbItem>
<a hlmBreadcrumbLink link="/components">Components</a>
</li>
<li hlmBreadcrumbSeparator></li>
<li hlmBreadcrumbItem>
<span hlmBreadcrumbPage>Breadcrumb</span>
</li>
</ol>
</nav>
`,
})
export class BreadcrumbPreview {}Installation
npx nx g @spartan-ng/cli:ui breadcrumb
ng g @spartan-ng/cli:ui breadcrumb
Usage
import {
HlmBreadcrumb
HlmBreadcrumbEllipsis
HlmBreadcrumbItem
HlmBreadcrumbLink
HlmBreadcrumbList
HlmBreadcrumbPage
HlmBreadcrumbSeparator
} from '@spartan-ng/helm/breadcrumb';<nav hlmBreadcrumb>
<ol hlmBreadcrumbList>
<li hlmBreadcrumbItem>
<a hlmBreadcrumbLink link="/">Home</a>
</li>
<li hlmBreadcrumbSeparator></li>
<li hlmBreadcrumbItem>
<hlm-breadcrumb-ellipsis />
</li>
<li hlmBreadcrumbSeparator></li>
<li hlmBreadcrumbItem>
<a hlmBreadcrumbLink link="/components">Components</a>
</li>
<li hlmBreadcrumbSeparator></li>
<li hlmBreadcrumbItem>
<span hlmBreadcrumbPage>Breadcrumb</span>
</li>
</ol>
</nav>Helm API
HlmBreadcrumbEllipsis
Selector: hlm-breadcrumb-ellipsis
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| class | ClassValue | - | - |
| srOnlyText | string | More | Screen reader only text for the ellipsis |
HlmBreadcrumbItem
Selector: [hlmBreadcrumbItem]
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| class | ClassValue | - | - |
HlmBreadcrumbLink
Selector: [hlmBreadcrumbLink]
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| class | ClassValue | - | - |
| link | RouterLink['routerLink'] | - | The link to navigate to the page. |
HlmBreadcrumbList
Selector: [hlmBreadcrumbList]
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| class | ClassValue | - | - |
HlmBreadcrumbPage
Selector: [hlmBreadcrumbPage]
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| class | ClassValue | - | - |
HlmBreadcrumbSeparator
Selector: [hlmBreadcrumbSeparator]
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| class | ClassValue | - | - |
HlmBreadcrumb
Selector: [hlmBreadcrumb]
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| class | ClassValue | - | - |
| aria-label | string | breadcrumb | - |
Examples
Custom separator
Use a custom component as children for HlmBreadcrumbSeparator to create a custom separator.
import { Component } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideSlash } from '@ng-icons/lucide';
import {
HlmBreadcrumb,
HlmBreadcrumbItem,
HlmBreadcrumbLink,
HlmBreadcrumbList,
HlmBreadcrumbPage,
HlmBreadcrumbSeparator,
} from '@spartan-ng/helm/breadcrumb';
@Component({
selector: 'spartan-breadcrumb-custom-separator',
providers: [provideIcons({ lucideSlash })],
imports: [
HlmBreadcrumb,
HlmBreadcrumbSeparator,
HlmBreadcrumbList,
HlmBreadcrumbItem,
HlmBreadcrumbPage,
HlmBreadcrumbLink,
NgIcon,
],
template: `
<nav hlmBreadcrumb>
<ol hlmBreadcrumbList>
<li hlmBreadcrumbItem>
<a hlmBreadcrumbLink link="/">Home</a>
</li>
<li hlmBreadcrumbSeparator>
<ng-icon name="lucideSlash" />
</li>
<li hlmBreadcrumbItem>
<a hlmBreadcrumbLink link="/components">Components</a>
</li>
<li hlmBreadcrumbSeparator>
<ng-icon name="lucideSlash" />
</li>
<li hlmBreadcrumbItem>
<span hlmBreadcrumbPage>Breadcrumb</span>
</li>
</ol>
</nav>
`,
})
export class BreadcrumbCustomSeparator {}Dropdown
You can compose HlmBreadcrumbItem for HlmDropdownMenu to create a custom separator.
import { Component } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideChevronDown, lucideSlash } from '@ng-icons/lucide';
import { BrnMenuTrigger } from '@spartan-ng/brain/menu';
import {
HlmBreadcrumb,
HlmBreadcrumbItem,
HlmBreadcrumbLink,
HlmBreadcrumbList,
HlmBreadcrumbPage,
HlmBreadcrumbSeparator,
} from '@spartan-ng/helm/breadcrumb';
import { HlmIcon } from '@spartan-ng/helm/icon';
import { HlmMenu, HlmMenuItem } from '@spartan-ng/helm/menu';
@Component({
selector: 'spartan-breadcrumb-dropdown',
providers: [provideIcons({ lucideChevronDown, lucideSlash })],
imports: [
HlmBreadcrumb,
HlmBreadcrumbSeparator,
HlmBreadcrumbList,
HlmBreadcrumbItem,
HlmBreadcrumbPage,
HlmBreadcrumbLink,
NgIcon,
HlmIcon,
BrnMenuTrigger,
HlmMenu,
HlmMenuItem,
],
template: `
<nav hlmBreadcrumb>
<ol hlmBreadcrumbList>
<li hlmBreadcrumbItem>
<a hlmBreadcrumbLink link="/">Home</a>
</li>
<li hlmBreadcrumbSeparator>
<ng-icon hlm size="sm" name="lucideSlash" />
</li>
<li hlmBreadcrumbItem>
<button class="flex items-center gap-1" [brnMenuTriggerFor]="breadcrumbDropdown">
Components
<ng-icon hlm size="sm" name="lucideChevronDown" />
</button>
<ng-template #breadcrumbDropdown>
<hlm-menu>
<button hlmMenuItem id="document">
<span>Documentation</span>
</button>
<button hlmMenuItem id="themes">
<span>Themes</span>
</button>
<button hlmMenuItem id="github">
<span>Github</span>
</button>
</hlm-menu>
</ng-template>
</li>
<li hlmBreadcrumbSeparator>
<ng-icon hlm size="sm" name="lucideSlash" />
</li>
<li hlmBreadcrumbItem>
<span hlmBreadcrumbPage>Breadcrumb</span>
</li>
</ol>
</nav>
`,
})
export class BreadcrumbDropdown {}Collapsed
We provide a HlmBreadcrumbEllipsisComponent component to show a collapsed state when the breadcrumb is too long.
import { Component } from '@angular/core';
import {
HlmBreadcrumb,
HlmBreadcrumbEllipsis,
HlmBreadcrumbItem,
HlmBreadcrumbLink,
HlmBreadcrumbList,
HlmBreadcrumbPage,
HlmBreadcrumbSeparator,
} from '@spartan-ng/helm/breadcrumb';
@Component({
selector: 'spartan-breadcrumb-collapsed',
imports: [
HlmBreadcrumb,
HlmBreadcrumbSeparator,
HlmBreadcrumbEllipsis,
HlmBreadcrumbList,
HlmBreadcrumbItem,
HlmBreadcrumbPage,
HlmBreadcrumbLink,
],
template: `
<nav hlmBreadcrumb>
<ol hlmBreadcrumbList>
<li hlmBreadcrumbItem>
<a hlmBreadcrumbLink link="/">Home</a>
</li>
<li hlmBreadcrumbSeparator></li>
<li hlmBreadcrumbItem>
<hlm-breadcrumb-ellipsis />
</li>
<li hlmBreadcrumbSeparator></li>
<li hlmBreadcrumbItem>
<a hlmBreadcrumbLink link="/components">Components</a>
</li>
<li hlmBreadcrumbSeparator></li>
<li hlmBreadcrumbItem>
<span hlmBreadcrumbPage>Breadcrumb</span>
</li>
</ol>
</nav>
`,
})
export class BreadcrumbCollapsed {}