Spartans get ready! v1 is coming!

We are very close to our first stable release. Expect more announcements in the coming weeks. v1 was made possible by our partner Zerops.

Breadcrumb

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

import { Component } from '@angular/core';
import { BrnMenuImports } from '@spartan-ng/brain/menu';
import { HlmBreadCrumbImports } from '@spartan-ng/helm/breadcrumb';
import { HlmMenuImports } from '@spartan-ng/helm/menu';

@Component({
	selector: 'spartan-breadcrumb-preview',
	imports: [HlmBreadCrumbImports, BrnMenuImports, HlmMenuImports],
	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

Usage

import { HlmBreadCrumbImports } 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>

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 { HlmBreadCrumbImports } from '@spartan-ng/helm/breadcrumb';

@Component({
	selector: 'spartan-breadcrumb-custom-separator',
	providers: [provideIcons({ lucideSlash })],
	imports: [HlmBreadCrumbImports, 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 { BrnMenuImports } from '@spartan-ng/brain/menu';
import { HlmBreadCrumbImports } from '@spartan-ng/helm/breadcrumb';
import { HlmIconImports } from '@spartan-ng/helm/icon';
import { HlmMenuImports } from '@spartan-ng/helm/menu';

@Component({
	selector: 'spartan-breadcrumb-dropdown',
	providers: [provideIcons({ lucideChevronDown, lucideSlash })],
	imports: [HlmBreadCrumbImports, NgIcon, HlmIconImports, BrnMenuImports, HlmMenuImports],
	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 HlmBreadcrumbEllipsis component to show a collapsed state when the breadcrumb is too long.

import { Component } from '@angular/core';
import { HlmBreadCrumbImports } from '@spartan-ng/helm/breadcrumb';

@Component({
	selector: 'spartan-breadcrumb-collapsed',
	imports: [HlmBreadCrumbImports],
	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 {}

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	-

Button

Badge