A single step in a nana-breadcrumb trail. Renders as a link when href is set, otherwise as plain text. Mark the final step with current so it is announced as the current page and rendered as non-interactive text. Item variants compose through attributes: - Icon / Icon-only — slot a nana-icon into prefix (add aria-label when there is no text). - Disabled / Loading — disabled, loading (skeleton placeholder). - Dropdown — dropdown turns the item into a menu trigger; put the menu entries in the menu slot. - Ellipsis — ellipsis renders a static ⋯. - Status / Badge — status (success·warning·error·info) and badge. The data-* attributes are driven by the parent nana-breadcrumb (variant, step index, collapse/compact state) — you normally don’t set them by hand.
Home
Current
Show code Copy < nana-breadcrumb > < nana-breadcrumb-item href = "#" >Home</ nana-breadcrumb-item > < nana-breadcrumb-item current >Current</ nana-breadcrumb-item > </ nana-breadcrumb >
npm install @nana-tec/ui-components
import " @nana-tec/ui-components/breadcrumb-item " ;
< nana-breadcrumb-item href = " # " > Home </ nana-breadcrumb-item >
< nana-breadcrumb-item current > Current </ nana-breadcrumb-item >
Properties Property Attribute Type Default Description backdata-backbooleanfalseCompact "back" affordance — prepends a ← and hides the separator badge— string | undefined—A small trailing badge (e.g. a count) completedata-completebooleanfalseWhether this step precedes the current one (step variant) current— booleanfalseMarks this item as the current page — rendered as text with `aria-current="page"` disabled— booleanfalseDisables the link dropdown— booleanfalseTurns the item into a dropdown trigger; menu entries go in the `menu` slot ellipsis— booleanfalseRenders a static `⋯` (manual overflow indicator) href— string | undefined—Destination URL. When set (and not `current`), the item renders as a link. isOverflowdata-overflowbooleanfalseRenders as the overflow trigger (a button) instead of a link/text loading— booleanfalseShows a skeleton placeholder while route data loads rel— string | undefined—Relationship of the linked resource size— BreadcrumbSize | undefined—Size — set by the parent `nana-breadcrumb` to keep the trail consistent status— BreadcrumbItemStatus | undefined—Status accent shown as a leading dot + tinted text stepdata-stepstring | undefined—Step number shown in the `step` variant marker target— '_blank' | '_self' | '_parent' | '_top' | undefined—Where to open the link variantdata-variantBreadcrumbVariant | undefined—Visual style, propagated from the parent breadcrumb
Events Event Description nana-clickFired when an interactive item (link or overflow trigger) is activated nana-toggleFired when a `dropdown` item opens or closes (`detail.open`)
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)
CSS parts Part Description ::part(separator)The glyph before the item ::part(marker)The step number marker (step variant) ::part(link)The `<a>`/`<button>` element (non-current items) ::part(label)The text wrapper (current items) ::part(badge)The trailing badge ::part(status)The status dot ::part(skeleton)The loading placeholder ::part(menu)The item dropdown menu
CSS custom properties Property Description --nana-breadcrumb-colorLink/label text colour --nana-breadcrumb-color-hoverLink text colour on hover --nana-breadcrumb-current-colorCurrent page text colour --nana-breadcrumb-separator-colorSeparator glyph colour
Event Type Description nana-clickCustomEventFired when an interactive item (link or overflow trigger) is activated nana-toggleCustomEventFired when a dropdown item opens or closes (detail.open)
Slot Description (default)The item label prefixContent before the label (e.g. a leading nana-icon) menuDropdown menu entries (shown when dropdown is open)
Variable Default Description --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
Part Description separatorThe glyph before the item markerThe step number marker (step variant) linkThe <a> / <button> element (non-current, interactive items) labelThe text wrapper (current / static items) badgeThe trailing badge statusThe status dot skeletonThe loading placeholder menuThe item dropdown menu
Explore Breadcrumb Item interactively Every state, prop, and edge case — with live controls — in Storybook.
