Breadcrumb

Semantic navigation trails with links, current page, separators, ellipsis, and RTL support.

Preview

Usage

import { FrBreadcrumbModule } from '@frame-ui-ng/components/breadcrumb';

HTML

<nav frBreadcrumb aria-label="Breadcrumb">
  <ol frBreadcrumbList>
    <li frBreadcrumbItem>
      <a frBreadcrumbLink href="/">Home</a>
    </li>
    <li frBreadcrumbSeparator></li>
    <li frBreadcrumbItem>
      <a frBreadcrumbLink href="/docs/components">Components</a>
    </li>
    <li frBreadcrumbSeparator></li>
    <li frBreadcrumbItem>
      <span frBreadcrumbPage>Breadcrumb</span>
    </li>
  </ol>
</nav>

Examples

Basic

Use a nav landmark with an ordered list so the trail has clear navigation semantics and predictable screen reader output.

Custom separator

Place content inside FrBreadcrumbSeparator when the default slash should be replaced by a product-specific glyph.

Collapsed

Use FrBreadcrumbEllipsis to represent omitted levels while keeping an accessible label for assistive technology.

Responsive

Hide lower-value ancestors at smaller breakpoints and truncate long current pages to preserve layout stability.

RTL support

Breadcrumb layout follows document direction, so separators, spacing, and wrapping work in right-to-left contexts too.

Custom Styling

Override breadcrumb tokens on a local wrapper when navigation needs stronger brand color, wider spacing, or a custom hover treatment.

Token Inspector

Hover the breadcrumb root, list, link, separator, or current page to inspect the tokens that shape the navigation trail.

Design Tokens

Use these CSS custom properties to tune breadcrumb color, spacing, focus treatment, separators, and ellipsis affordance.

SCSS


  --frame-breadcrumb-root-color: var(--frame-muted-foreground);
  --frame-breadcrumb-root-font-size: 0.875rem;
  --frame-breadcrumb-root-line-height: 1.25rem;
  --frame-breadcrumb-list-gap: 0.375rem;
  --frame-breadcrumb-link-color: var(--frame-muted-foreground);
  --frame-breadcrumb-link-hover-color: var(--frame-foreground);
  --frame-breadcrumb-link-focus-shadow: 0 0 0 3px color-mix(in srgb, var(--frame-ring) 24%, transparent);
  --frame-breadcrumb-page-color: var(--frame-foreground);
  --frame-breadcrumb-separator-color: var(--frame-muted-foreground);
  --frame-breadcrumb-separator-size: 0.875rem;
  --frame-breadcrumb-ellipsis-size: 1.5rem;
  --frame-breadcrumb-ellipsis-radius: var(--frame-radius-sm);
  --frame-breadcrumb-ellipsis-hover-bg: var(--frame-muted);
  --frame-breadcrumb-transition-duration: 150ms;