Breadcrumb

Displays the path to the current resource using a hierarchy of links.

Default

A standard breadcrumb with an ellipsis dropdown.

Custom Separator

Replace the default chevron with a custom icon to match your design language.

Dropdown

Compose breadcrumb items with a dropdown menu for quick navigation.

Collapsed

Use the ellipsis component to collapse long paths while keeping context.

Installation & Usage

Installation

Imports

Basic Skeleton

API Reference

Helm API

The breadcrumb directives provide the default spartan/ui styling.

Directive / ComponentSelectorInputs
HlmBreadcrumb[hlmBreadcrumb]
  • aria-label: string (default: breadcrumb)
HlmBreadcrumbList[hlmBreadcrumbList]—
HlmBreadcrumbItem[hlmBreadcrumbItem]—
HlmBreadcrumbSeparator[hlmBreadcrumbSeparator]— (can contain custom icon)
HlmBreadcrumbLink[hlmBreadcrumbLink]— (uses Angular RouterLink under the hood)
HlmBreadcrumbPage[hlmBreadcrumbPage]—
HlmBreadcrumbEllipsishlm-breadcrumb-ellipsis
  • class: ClassValue
  • srOnlyText: string (default: More)