Breadcrumb Item

A single step in a breadcrumb trail. It renders as a link when href is set, or plain text otherwise. It is a standalone, separately-importable element — the parent nana-breadcrumb drives its size, variant, separator and collapse state, but the item carries all the per-step variants itself.

Anatomy

Products Laptops
item.html
html
1 <!-- Link (default) -->
2 <nana-breadcrumb-item href="/products">Products</nana-breadcrumb-item>
3
4 <!-- Current page -->
5 <nana-breadcrumb-item current>Laptops</nana-breadcrumb-item>

States

Default (link) Current Disabled

Item Variants

icon + icon-only

Files

status

successwarningerrorinfo

badge

Notifications

ellipsis

variants.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>

Dropdown

With dropdown, the item becomes a menu trigger. Put the entries in the menu slot; it opens on click and closes on outside click.

Products Electronics Phones Computers
dropdown.html
html
1 <nana-breadcrumb-item dropdown>
2 Products
3 <a slot="menu" href="/electronics">Electronics</a>
4 <a slot="menu" href="/phones">Phones</a>
5 <a slot="menu" href="/computers">Computers</a>
6 </nana-breadcrumb-item>

Import

main.ts
ts
1 import "@nana-tec/ui-components/breadcrumb-item";
2 // or get it together with the container:
3 import "@nana-tec/ui-components/breadcrumb";

Slots

Slot Description
(default)The item label
prefixContent before the label (e.g. a leading nana-icon)
menuDropdown menu entries (shown when dropdown is open)

Events

Event Detail
nana-click { href, originalEvent }
nana-toggle { open: boolean }

CSS Parts

Part Description
separator The glyph before the item
marker The step number marker (step variant)
link The <a> / <button> element
label The text wrapper (current items)
badge The trailing badge
status The status dot
skeleton The loading placeholder
menu The dropdown menu

Props

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, sets aria-busy
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

The data-variant, data-step, data-back and data-overflow attributes are set by the parent nana-breadcrumb — you don't set them by hand.