Breadcrumb

A navigation trail showing where the user is in a hierarchy. Compose it from nana-breadcrumb-item children; the last item is usually current. One element covers the common patterns through orthogonal attributes — separator, variant, truncation, and a responsive compact mode.

Anatomy

Home Products Electronics Laptops
breadcrumb.html
html
1 <nana-breadcrumb separator="chevron">
2 <nana-breadcrumb-item href="/">Home</nana-breadcrumb-item>
3 <nana-breadcrumb-item href="/products">Products</nana-breadcrumb-item>
4 <nana-breadcrumb-item href="/products/electronics">Electronics</nana-breadcrumb-item>
5 <nana-breadcrumb-item current>Laptops</nana-breadcrumb-item>
6 </nana-breadcrumb>

Separators

slash Home Products Laptops
chevron Home Products Laptops
arrow Home Products Laptops
dot Home Products Laptops

Variants

variant="default"

Home Products Electronics Laptops

variant="path"

Home Products Electronics Laptops

variant="pill"

Home Products Electronics Laptops

variant="card"

Home Products Electronics Laptops

variant="step"

Home Products Electronics Laptops
variants.html
html
1 <nana-breadcrumb variant="default">…</nana-breadcrumb>
2 <nana-breadcrumb variant="path">…</nana-breadcrumb>
3 <nana-breadcrumb variant="pill">…</nana-breadcrumb>
4 <nana-breadcrumb variant="card">…</nana-breadcrumb>
5 <nana-breadcrumb variant="step">…</nana-breadcrumb>

Sizes

sm Home Products Laptops
md Home Products Laptops
lg Home Products Laptops

Truncation

Set max-items to collapse the middle of a deep trail. Choose how it reveals: inline (collapse="expand") or a dropdown menu.

max-items="3" — click the … to expand

Home Category Subcategory Group Product

collapse="dropdown" — hidden levels in a menu

Home Category Subcategory Group Product
truncation.html
html
1 <!-- Inline expand on click -->
2 <nana-breadcrumb max-items="3" separator="chevron">…</nana-breadcrumb>
3
4 <!-- Hidden levels in a dropdown menu -->
5 <nana-breadcrumb max-items="3" collapse="dropdown" separator="chevron">…</nana-breadcrumb>

Responsive (Mobile Compact)

With responsive, the trail collapses to a single ← Parent link below compact-width. Drag the handle to resize.

Home Products Electronics Gaming Laptops
responsive.html
html
1 <!-- Collapses to "← Parent" below compact-width (default 420px) -->
2 <nana-breadcrumb responsive compact-width="420" separator="chevron">…</nana-breadcrumb>

Item Variants

icon + icon-only

Files Report

status + badge

Home Notifications Pending Review

disabled + loading

Home Archived

status accents

Dashboard success Dashboard warning Dashboard error Dashboard info
items.html
html
1 <!-- Icon (and icon-only) -->
2 <nana-breadcrumb-item href="/" aria-label="Home">
3 <nana-icon slot="prefix" name="building-office"></nana-icon>
4 </nana-breadcrumb-item>
5
6 <!-- Status + badge -->
7 <nana-breadcrumb-item status="warning" current>Pending Review</nana-breadcrumb-item>
8 <nana-breadcrumb-item href="/inbox" badge="12">Notifications</nana-breadcrumb-item>
9
10 <!-- Disabled + loading -->
11 <nana-breadcrumb-item disabled>Archived</nana-breadcrumb-item>
12 <nana-breadcrumb-item loading></nana-breadcrumb-item>
13
14 <!-- Item-level dropdown -->
15 <nana-breadcrumb-item dropdown>
16 Products
17 <a slot="menu" href="/electronics">Electronics</a>
18 <a slot="menu" href="/phones">Phones</a>
19 </nana-breadcrumb-item>

Import

main.ts
ts
1 import "@nana-tec/ui-components/breadcrumb";
2 // the item registers with it, or import on its own:
3 import "@nana-tec/ui-components/breadcrumb-item";

Events

Event Fired by Detail
nana-click item { href, originalEvent }
nana-toggle dropdown item { open: boolean }
nana-expand breadcrumb —

Customization

Override the accent variables, or reach into internals with ::part().

Home Products Laptops
breadcrumb.css
css
1 nana-breadcrumb.brand {
2 --nana-breadcrumb-color-hover: #2563eb;
3 --nana-breadcrumb-current-color: #2563eb;
4 --nana-breadcrumb-separator-color: #93c5fd;
5 }
CSS Variable Description
--nana-breadcrumb-separator Separator glyph between items
--nana-breadcrumb-gap Space around each separator
--nana-breadcrumb-color Link / label text colour
--nana-breadcrumb-color-hover Link text colour on hover
--nana-breadcrumb-current-color Current page text colour
--nana-breadcrumb-separator-color Separator glyph colour

Styling internals with ::part()

When a CSS variable isn't enough, target the exposed parts — base, list, separator, link, label.

Home Products Laptops
parts.css
css
1 nana-breadcrumb-item::part(link) {
2 text-transform: uppercase;
3 letter-spacing: 0.06em;
4 font-size: 0.75rem;
5 }
6 nana-breadcrumb-item::part(separator) { color: #cbd5e1; }

Usage recipes

Page header — icon home + chevrons

Reports Q4 Revenue

E-commerce — deep trail collapsed into a dropdown

Home Clothing Men Shoes Running

Dashboard — status + count badge

Workspace Review Queue Pending

IDE — file path

src components breadcrumb index.ts

Props — nana-breadcrumb

Attribute Type Default Description
variant default | path | pill | card | step default Visual style of the trail
separator slash | chevron | arrow | dot | string — Separator glyph (preset or custom)
size sm | md | lg md Size applied to every item
underline boolean false Underline the current page
max-items number — Collapse the middle past this many items
collapse expand | dropdown expand How a collapsed trail reveals items
responsive boolean false Collapse to ← Parent on narrow widths
compact-width number 420 Width (px) that triggers compact mode

Props — nana-breadcrumb-item

Attribute Type Default Description
href string — Destination URL (renders as a link)
current boolean false Marks the current page (aria-current)
disabled boolean false Disables the link
loading boolean false Shows a skeleton placeholder
dropdown boolean false Turns the item into a menu trigger (menu slot)
ellipsis boolean false Renders a static ⋯
status success | warning | error | info — Status accent (dot + tinted text)
badge string — Small trailing badge
target _blank | _self | _parent | _top — Link target
rel string — Link relationship

Accessibility

  • Rendered as a nav labelled "Breadcrumb" wrapping an ol; items carry role="listitem".
  • The current page is text (not a link) with aria-current="page"; separators are aria-hidden.
  • Icon-only items need an aria-label; loading items expose aria-busy.
  • Dropdown triggers expose aria-haspopup / aria-expanded and close on outside click.