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.

canonical

L3 article trail

<TuxBreadcrumbs :trail="[
  { label: 'Home',                       to: '/' },
  { label: 'Research',                   to: '/research' },
  { label: 'Transportation safety',      to: '/research/safety' },
  { label: 'Connected Vehicle Pilot' },
]" />

depths

L2 / L3 / Article

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

no home icon

Without the home glyph

Pass :home-icon="false" when the first crumb shouldn't be the home root — for example, an embedded sub-app where the breadcrumb starts mid-tree.

chevron mode

Chevron at all sizes

Pass chevron to use › separators at every viewport. Useful in tight chrome where the pipe rule looks heavy.

props

Props reference

  • trail — array of { label, to?, href? }. Required. Last item is the current page (no link).
  • homeIcon — show the home icon on the first crumb. Defaults to true.
  • chevron — use › separators at every viewport. Defaults to false (pipe rule, collapsing to chevron under 35rem).