Primitives

Breadcrumbs

A labelled navigation landmark for a breadcrumb trail: links with aria-current='page' on the current page and decorative separators hidden from assistive technology.

forty-cdk/breadcrumbs WAI-ARIA APG

Walk the trail with Tab: the last crumb is the page you are on, so it carries aria-current="page" and is not a link back to itself.

Source

import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
import { ForBreadcrumbItem, ForBreadcrumbSeparator, ForBreadcrumbs } from 'forty-cdk/breadcrumbs';

interface Crumb {
  readonly label: string;
  readonly href: string;
}

@Component({
  selector: 'app-breadcrumbs-default-example',
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [ForBreadcrumbs, ForBreadcrumbItem, ForBreadcrumbSeparator],
  template: `
    <nav forBreadcrumbs class="bc">
      <ol class="bc-list">
        @for (crumb of crumbs(); track crumb.href; let last = $last) {
          <li class="bc-li">
            <a
              forBreadcrumbItem
              class="bc-link"
              [href]="crumb.href"
              [current]="last"
              (click)="$event.preventDefault()"
            >
              {{ crumb.label }}
            </a>
          </li>
          @if (!last) {
            <li forBreadcrumbSeparator class="bc-sep">
              <svg viewBox="0 0 24 24" aria-hidden="true">
                <path
                  d="m8.25 4.5 7.5 7.5-7.5 7.5"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="1.75"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
              </svg>
            </li>
          }
        }
      </ol>
    </nav>
  `,
  styles: `
    :host {
      display: contents;
    }

    .bc {
      width: 100%;
    }

    .bc-list {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      margin: 0;
      padding: 0;
      list-style: none;
      font-size: 0.9rem;
    }

    .bc-li {
      display: inline-flex;
    }

    .bc-link {
      color: var(--ex-muted, #585d66);
      text-decoration: none;
      border-radius: var(--ex-radius-sm, 14px);
      padding: 0.15rem 0.4rem;
      transition: color 0.15s ease;
    }

    .bc-link:hover {
      color: var(--ex-text, #17191c);
      text-decoration: underline;
    }

    .bc-link[aria-current='page'] {
      color: var(--ex-text, #17191c);
      font-weight: 700;
      pointer-events: none;
    }

    .bc-sep {
      display: inline-flex;
      align-items: center;
      color: var(--ex-border-strong, #d0c9bc);
      user-select: none;
    }

    .bc-sep svg {
      width: 14px;
      height: 14px;
      display: block;
    }

    @media (prefers-reduced-motion: reduce) {
      .bc-link {
        transition: none;
      }
    }
  `,
})
export class BreadcrumbsDefaultExample {
  protected readonly crumbs = signal<readonly Crumb[]>([
    { label: 'Home', href: '/' },
    { label: 'Components', href: '/components' },
    { label: 'Navigation', href: '/components/navigation' },
    { label: 'Breadcrumbs', href: '/components/navigation/breadcrumbs' },
  ]);
}

Anatomy

<nav forBreadcrumbs>
  <ol>
    <li><a forBreadcrumbItem href="/">Home</a></li>
    <li forBreadcrumbSeparator>/</li>
    <li><a forBreadcrumbItem href="/data" current>Data</a></li>
  </ol>
</nav>

Examples

Collapsing a long trail

The primitive renders whatever items you give it, so collapsing a deep path is a consumer decision. Here the middle is folded into an expandable ellipsis button that reveals the hidden crumbs. The trail stays a single accessible navigation landmark either way.

Source

import { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';
import { ForBreadcrumbItem, ForBreadcrumbSeparator, ForBreadcrumbs } from 'forty-cdk/breadcrumbs';

interface Crumb {
  readonly label: string;
  readonly href: string;
}

@Component({
  selector: 'app-breadcrumbs-collapsed-example',
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [ForBreadcrumbs, ForBreadcrumbItem, ForBreadcrumbSeparator],
  template: `
    <nav forBreadcrumbs ariaLabel="Project files" class="bc">
      <ol class="bc-list">
        @for (crumb of visible(); track crumb.href; let last = $last; let first = $first) {
          @if (!first) {
            <li forBreadcrumbSeparator class="bc-sep">
              <svg viewBox="0 0 24 24" aria-hidden="true">
                <path
                  d="m8.25 4.5 7.5 7.5-7.5 7.5"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="1.75"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
              </svg>
            </li>
          }
          <li class="bc-li">
            <a
              forBreadcrumbItem
              class="bc-link"
              [href]="crumb.href"
              [current]="last"
              (click)="$event.preventDefault()"
            >
              {{ crumb.label }}
            </a>
          </li>

          @if (first && expanded()) {
            @for (hidden of middle(); track hidden.href) {
              <li forBreadcrumbSeparator class="bc-sep">
                <svg viewBox="0 0 24 24" aria-hidden="true">
                  <path
                    d="m8.25 4.5 7.5 7.5-7.5 7.5"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="1.75"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  />
                </svg>
              </li>
              <li class="bc-li">
                <a
                  forBreadcrumbItem
                  class="bc-link"
                  [href]="hidden.href"
                  (click)="$event.preventDefault()"
                >
                  {{ hidden.label }}
                </a>
              </li>
            }
          } @else if (first) {
            <li forBreadcrumbSeparator class="bc-sep">
              <svg viewBox="0 0 24 24" aria-hidden="true">
                <path
                  d="m8.25 4.5 7.5 7.5-7.5 7.5"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="1.75"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
              </svg>
            </li>
            <li class="bc-li">
              <button
                type="button"
                class="bc-ellipsis"
                aria-label="Show hidden path segments"
                (click)="expanded.set(true)"
              >
                …
              </button>
            </li>
          }
        }
      </ol>
    </nav>
  `,
  styles: `
    :host {
      display: contents;
    }

    .bc {
      width: 100%;
    }

    .bc-list {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      margin: 0;
      padding: 0;
      list-style: none;
      font-size: 0.9rem;
    }

    .bc-li {
      display: inline-flex;
    }

    .bc-link {
      color: var(--ex-muted, #585d66);
      text-decoration: none;
      border-radius: var(--ex-radius-sm, 14px);
      padding: 0.15rem 0.4rem;
    }

    .bc-link:hover {
      color: var(--ex-text, #17191c);
      text-decoration: underline;
    }

    .bc-link[aria-current='page'] {
      color: var(--ex-text, #17191c);
      font-weight: 700;
      pointer-events: none;
    }

    .bc-ellipsis {
      font: inherit;
      line-height: 1;
      padding: 0.05rem 0.45rem 0.3rem;
      color: var(--ex-muted, #585d66);
      background: var(--ex-surface-2, #f2eee6);
      border: 1px solid var(--ex-border, #e5e0d6);
      border-radius: var(--ex-radius-sm, 14px);
      cursor: pointer;
    }

    .bc-ellipsis:hover {
      color: var(--ex-text, #17191c);
      border-color: var(--ex-border-strong, #d0c9bc);
    }

    .bc-sep {
      display: inline-flex;
      align-items: center;
      color: var(--ex-border-strong, #d0c9bc);
      user-select: none;
    }

    .bc-sep svg {
      width: 14px;
      height: 14px;
      display: block;
    }
  `,
})
export class BreadcrumbsCollapsedExample {
  protected readonly expanded = signal(false);

  protected readonly trail = signal<readonly Crumb[]>([
    { label: 'Home', href: '/' },
    { label: 'Workspace', href: '/workspace' },
    { label: 'Projects', href: '/workspace/projects' },
    { label: 'forty-cdk', href: '/workspace/projects/forty-cdk' },
    { label: 'Docs', href: '/workspace/projects/forty-cdk/docs' },
    { label: 'Breadcrumbs', href: '/workspace/projects/forty-cdk/docs/breadcrumbs' },
  ]);

  protected readonly visible = computed<readonly Crumb[]>(() => {
    const trail = this.trail();
    return [trail[0]!, ...trail.slice(-2)];
  });

  protected readonly middle = computed<readonly Crumb[]>(() => this.trail().slice(1, -2));
}

Localizing the label

Breadcrumb is verbalized by screen readers, so translate it per injector scope with provideForBreadcrumbsDefaults. Configure it at the application root, or in any component's providers to scope the translation to a subtree. A per-instance [ariaLabel] still wins over the scope default.

import { provideForBreadcrumbsDefaults } from 'forty-cdk/defaults';

bootstrapApplication(App, {
  providers: [provideForBreadcrumbsDefaults({ label: 'Ruta de navegación' })],
});

For a language the app sets or switches after bootstrap, pass label as a function and the overrides as a factory, as Localizing default text shows.

API

`ForBreadcrumbs`

Property	Type	Description
`ariaLabel`	`input`	Accessible label for the `navigation` landmark. Override when a page hosts more than one breadcrumb trail. Default: `'Breadcrumb'`

`ForBreadcrumbItem`

Property	Type	Description
`current`	`input`	When true, reflects `aria-current="page"` on the link. Default: —

Accessibility

Implements the WAI-ARIA Breadcrumb pattern.

Navigation landmark. [forBreadcrumbs] applies role="navigation" and labels it aria-label="Breadcrumb" by default, creating a named landmark that screen-reader users can jump to directly. When a page hosts more than one trail, name each with [ariaLabel], or point a native aria-labelledby at a visible heading.
Current page. Set current on [forBreadcrumbItem] for the active page; the directive reflects aria-current="page" so assistive technology announces the user's location in the trail.
Decorative separators. [forBreadcrumbSeparator] reflects aria-hidden="true" so the visual divider (e.g. /) is skipped by screen readers.

Styling

forty-cdk ships no styles. Style the current item via [aria-current="page"].

[forBreadcrumbItem][aria-current='page'] {
  font-weight: bold;
  color: inherit;
  text-decoration: none;
}