Skip to content

TicFrame v5.7.0-alpha.1 is available - read the changelog.

TicFrame

Components

Breadcrumb

Breadcrumb reference for TicFrame components, covering usage, accessibility, responsive behavior, dark mode, RTL, source examples, and production guidance.

Requirements

Breadcrumb is implemented with semantic HTML, TicFrame classes, design tokens, responsive utilities, and documented data attributes. It does not require website-specific CSS.

Use the tf-* namespace consistently so the class validator can prove every visual dependency ships from TicFrame.

Usage Guidance

Start with the semantic element, add the matching TicFrame component or utility classes, and use data attributes only for behavior that TicFrame documents. Keep labels, headings, and landmarks visible to assistive technology.

Responsive

Mobile-first utilities such as md:tf-grid-cols-3 scale the layout.

Dark mode

Colors resolve through data-tf-theme and semantic tokens.

RTL

Logical spacing and direction-aware JS keep the component mirrored safely.

Live Example

Every variant below is the same .tf-breadcrumb markup with a different separator modifier, surface, icon treatment, or responsive strategy. aria-current="page" always marks the current page instead of linking it.

Basic (default slash separator)

The default. No modifier class needed.

HTML
<nav aria-label="Breadcrumb">
  <ol class="tf-breadcrumb">
    <li class="tf-breadcrumb-item"><a href="/">Home</a></li>
    <li class="tf-breadcrumb-item"><a href="/components/">Components</a></li>
    <li class="tf-breadcrumb-item" aria-current="page">Breadcrumb</li>
  </ol>
</nav>

Chevron and dot separators

Add tf-breadcrumb-chevron or tf-breadcrumb-dot to the list. The separator is CSS content, not an icon, so it needs no markup change per item.

HTML
<ol class="tf-breadcrumb tf-breadcrumb-chevron">...</ol>
<ol class="tf-breadcrumb tf-breadcrumb-dot">...</ol>
<ol class="tf-breadcrumb tf-breadcrumb-arrow">...</ol>

With icons

Icons are real <i> elements inside each item, using UID Ticons classes -- not CSS content, so they stay accessible and themeable.

HTML
<ol class="tf-breadcrumb tf-breadcrumb-chevron">
  <li class="tf-breadcrumb-item">
    <a href="/" aria-label="Home"><i class="ti ti-013816" aria-hidden="true"></i></a>
  </li>
  <li class="tf-breadcrumb-item">
    <a href="/components/"><i class="ti ti-011636" aria-hidden="true"></i> Components</a>
  </li>
  <li class="tf-breadcrumb-item" aria-current="page">Breadcrumb</li>
</ol>

Surface (muted background chrome)

Add tf-breadcrumb-surface for a padded, rounded strip -- common under an app-shell page header instead of plain inline text.

HTML
<ol class="tf-breadcrumb tf-breadcrumb-surface">...</ol>

Collapsed (long path with hidden middle steps)

Deep paths collapse the middle into a dropdown trigger. It's the existing .tf-dropdown primitive composed inside a breadcrumb item -- no new JavaScript.

HTML
<ol class="tf-breadcrumb tf-breadcrumb-chevron">
  <li class="tf-breadcrumb-item"><a href="/">Home</a></li>
  <li class="tf-breadcrumb-item">
    <div class="tf-dropdown" data-tf-dropdown-hover>
      <button type="button" class="tf-btn tf-btn-ghost tf-btn-icon tf-btn-sm"
              data-tf-dropdown-trigger aria-label="Show hidden path segments">&hellip;</button>
      <div class="tf-dropdown-menu" role="menu" data-state="closed" hidden>
        <a class="tf-dropdown-item" role="menuitem" href="/components/">Components</a>
        <a class="tf-dropdown-item" role="menuitem" href="/components/navbar">Navbar</a>
        <a class="tf-dropdown-item" role="menuitem" href="/components/menu">Menu</a>
      </div>
    </div>
  </li>
  <li class="tf-breadcrumb-item" aria-current="page">Breadcrumb</li>
</ol>

Responsive (collapses on narrow viewports)

Middle items carry tf-hidden md:tf-inline-flex so only Home and the current page show under 768px, avoiding wrapping or overflow on phones. Resize the window to see it collapse.

HTML
<ol class="tf-breadcrumb tf-breadcrumb-chevron">
  <li class="tf-breadcrumb-item"><a href="/">Home</a></li>
  <li class="tf-breadcrumb-item tf-hidden md:tf-inline-flex"><a href="/components/">Components</a></li>
  <li class="tf-breadcrumb-item tf-hidden md:tf-inline-flex"><a href="/components/navbar">Navbar</a></li>
  <li class="tf-breadcrumb-item" aria-current="page">Breadcrumb</li>
</ol>

Reference

AreaContract
Classestf-breadcrumb, tf-breadcrumb-item, and separator/surface modifiers: tf-breadcrumb-chevron, tf-breadcrumb-dot, tf-breadcrumb-arrow, tf-breadcrumb-surface.
AccessibilityWrap the list in <nav aria-label="Breadcrumb">. Mark the current page with aria-current="page" on the item instead of linking it. Icon-only links (e.g. a Home icon) need their own aria-label.
JavaScriptNone for the breadcrumb itself. The collapsed variant composes the existing .tf-dropdown component, which initializes automatically through TicFrame.init().
Tokens--tf-text-muted, --tf-text-main, --tf-border-strong, --tf-surface-inset, --tf-space-*, --tf-radius-4.