@styloviz/breadcrumb

4 visual variants, 5 separator styles, a sibling-page dropdown switcher, badges, disabled crumbs, collapsible middle crumbs, a loading skeleton, and full keyboard support.

Part of the Styloviz UI Kit — a premium Angular 21 + Tailwind CSS 4 dashboard component library. Standalone, OnPush, strongly typed, dark-mode ready.

Installation

npm install @styloviz/breadcrumb

Requires @angular/core and @angular/common >= 21. Self-contained — no other Styloviz packages required. Prefer everything at once? @styloviz/all installs the whole free tier in one command.

Usage

import { SvBreadcrumbComponent } from '@styloviz/breadcrumb';

@Component({
  standalone: true,
  imports: [SvBreadcrumbComponent],
  template: `
    <sv-breadcrumb [items]="crumbs" />
  `,
})
export class DemoComponent {}

Inputs

| Input | Type | Default | Description | | --- | --- | --- | --- | | items | BreadcrumbItem[] | [] | Ordered list of crumbs. The last item is treated as the current page. | | separator | BreadcrumbSeparator | 'chevron' | Separator style between crumbs. Use custom with customSeparatorPath. | | customSeparatorPath | string | '' | SVG <path d="..."> used when separator="custom". | | variant | BreadcrumbVariant | 'plain' | Visual style of the crumb trail. | | size | BreadcrumbSize | 'md' | Size of the breadcrumb text and icons. | | maxVisible | number | 0 | Maximum number of crumbs to show before collapsing the middle ones. Set to 0 to always show all. | | expandable | boolean | true | Allow the collapsed ellipsis to be clicked to reveal the hidden middle crumbs. When false the ellipsis is purely decorative. | | showHomeIcon | boolean | false | Prepends a home icon to the first crumb when it has no explicit iconPath. | | truncateLabels | boolean | false | Clips long labels to a fixed width with an ellipsis and a title tooltip. | | collapseOnMobile | boolean | false | Hides middle crumbs below the sm breakpoint (pure CSS) to keep long trails compact on phones. | | loading | boolean | false | Shows an animated skeleton in place of the crumb trail while data is loading. | | skeletonCount | number | 3 | Number of skeleton segments rendered when loading is true. | | ariaLabel | string | 'Breadcrumb' | Accessible label for the breadcrumb navigation landmark. | | customClass | string | '' | Additional CSS classes on the root <nav> element. |

Outputs

| Output | Type | Description | | --- | --- | --- | | crumbClick | BreadcrumbItem | Emitted when a crumb with a routerLink is clicked. | | expand | void | Emitted when the collapsed ellipsis is expanded to reveal hidden crumbs. | | collapse | void | Emitted when an expanded trail is collapsed back via the toggle. | | menuItemSelect | BreadcrumbMenuItem | Emitted when a sibling page is chosen from a crumb's dropdown switcher. |

Documentation

Full API reference and live demos: https://styloviz.dev/docs/breadcrumb

License

MIT