Skip to main content

component

TuxBreadcrumbs

Page-depth navigation. Sits above the page header on every non-landing page. Home crumb always present (icon + label, navy underlined). Intermediate crumbs are italic navy links. The final crumb is plain text — not a link to itself. Pipe separators at ≥35rem viewports, chevron below.

Interactive Component Playground

TuxBreadcrumbs Workbench

Presets:
Properties Inspector3 configurable knobs
Breadcrumb DepthtrailDepth
Delimiter Glyphdelimiter
Show Root Home IconhomeIcon
true
Dynamic Component Syntax
<tux-breadcrumbs trailDepth="article" delimiter="pipe" homeIcon></tux-breadcrumbs>

canonical

L3 article trail

<TuxBreadcrumbs :trail="[
  { label: 'Home',           to: '/' },
  { label: 'Components',     to: '/components' },
  { label: 'Navigation',     to: '/components' },
  { label: 'TuxBreadcrumbs' },
]" />

depths

L2 / L3 / Article

Same component handles every depth. Final crumb is always non-link, plain-text, current page. 

<TuxBreadcrumbs :trail="trailL2" />
<TuxBreadcrumbs :trail="trailL3" />
<TuxBreadcrumbs :trail="trailArticle" />