Breadcrumb

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

01 Hero Preview

Grid: 8px · Scale: 1:1

02 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>

03 Examples

Basic

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

Component Sheet

Grid: 8px · Scale: 1:1

Custom separator

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

Component Sheet

Grid: 8px · Scale: 1:1

Collapsed

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

Component Sheet

Grid: 8px · Scale: 1:1

Responsive

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

Component Sheet

Grid: 8px · Scale: 1:1

RTL support

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

Component Sheet

Grid: 8px · Scale: 1:1

04 Custom Styling

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

Component Sheet

Grid: 8px · Scale: 1:1

05 Token Inspector

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

06 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;