Ivorie

Breadcrumb

Show the path to the current page.

import { … } from '@inlaylab/ivorie/breadcrumb'
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { RouterLink } from '@angular/router';
import { IV_BREADCRUMB_IMPORTS } from '@inlaylab/ivorie/breadcrumb';

@Component({
  selector: 'demo-breadcrumb',
  imports: [RouterLink, IV_BREADCRUMB_IMPORTS],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <nav ivBreadcrumb>
      <ol ivBreadcrumbList>
        <li ivBreadcrumbItem><a ivBreadcrumbLink routerLink="/docs/breadcrumb">Home</a></li>
        <li ivBreadcrumbSeparator></li>
        <li ivBreadcrumbItem><a ivBreadcrumbLink routerLink="/docs/breadcrumb">Settings</a></li>
        <li ivBreadcrumbSeparator></li>
        <li ivBreadcrumbItem><span ivBreadcrumbPage>Profile</span></li>
      </ol>
    </nav>
  `,
})
export default class BreadcrumbDemo {}

Installation

CLInpm
npx ivorie add breadcrumb

Ports the shadcn/ui Breadcrumb. Each part is an attribute selector on a native element, so there are no wrapper elements.

Usage

import { IV_BREADCRUMB_IMPORTS } from '@inlaylab/ivorie/breadcrumb';
<nav ivBreadcrumb>
  <ol ivBreadcrumbList>
    <li ivBreadcrumbItem><a ivBreadcrumbLink routerLink="/home">Home</a></li>
    <li ivBreadcrumbSeparator></li>
    <li ivBreadcrumbItem><span ivBreadcrumbPage>Profile</span></li>
  </ol>
</nav>

Examples

Ellipsis

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { RouterLink } from '@angular/router';
import { IV_BREADCRUMB_IMPORTS } from '@inlaylab/ivorie/breadcrumb';

@Component({
  selector: 'demo-breadcrumb-ellipsis',
  imports: [RouterLink, IV_BREADCRUMB_IMPORTS],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <nav ivBreadcrumb>
      <ol ivBreadcrumbList>
        <li ivBreadcrumbItem><a ivBreadcrumbLink routerLink="/docs/breadcrumb">Home</a></li>
        <li ivBreadcrumbSeparator></li>
        <li ivBreadcrumbItem><span ivBreadcrumbEllipsis></span></li>
        <li ivBreadcrumbSeparator></li>
        <li ivBreadcrumbItem><span ivBreadcrumbPage>Current page</span></li>
      </ol>
    </nav>
  `,
})
export default class BreadcrumbEllipsisDemo {}

Custom separator

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { RouterLink } from '@angular/router';
import { IV_BREADCRUMB_IMPORTS } from '@inlaylab/ivorie/breadcrumb';

@Component({
  selector: 'demo-breadcrumb-custom-separator',
  imports: [RouterLink, IV_BREADCRUMB_IMPORTS],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <nav ivBreadcrumb>
      <ol ivBreadcrumbList>
        <li ivBreadcrumbItem><a ivBreadcrumbLink routerLink="/docs/breadcrumb">Home</a></li>
        <li ivBreadcrumbSeparator [showDefault]="false">/</li>
        <li ivBreadcrumbItem><a ivBreadcrumbLink routerLink="/docs/breadcrumb">Settings</a></li>
        <li ivBreadcrumbSeparator [showDefault]="false">/</li>
        <li ivBreadcrumbItem><span ivBreadcrumbPage>Profile</span></li>
      </ol>
    </nav>
  `,
})
export default class BreadcrumbCustomSeparatorDemo {}

API

Every part also accepts class.

Root <nav>. No own inputs.

ol[ivBreadcrumbList]

Wrapping flex list. No own inputs.

li[ivBreadcrumbItem]

One crumb. No own inputs.

A navigable crumb. Works with href and routerLink. No own inputs.

span[ivBreadcrumbPage]

The current page. Not navigable. No own inputs.

li[ivBreadcrumbSeparator]

Place it between items. Shows a chevron by default.

Name Type Default Description
showDefault boolean true Show the built-in chevron. Set false when you project your own separator.

span[ivBreadcrumbEllipsis]

Marks collapsed crumbs. Put it inside an li[ivBreadcrumbItem]. No own inputs.

Accessibility

  • The root <nav> has aria-label="breadcrumb".
  • The current page has role="link", aria-disabled="true" and aria-current="page".
  • Separators have role="presentation" and aria-hidden="true". The chevron flips in RTL.
  • The ellipsis is aria-hidden and holds a screen-reader-only "More" text.

Notes

  • The separator is a sibling li, not a child of the item.