Navigation
Breadcrumb Item
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.
Preview
Section titled “Preview”<nana-breadcrumb>
<nana-breadcrumb-item href="#">Home</nana-breadcrumb-item>
<nana-breadcrumb-item current>Current</nana-breadcrumb-item>
</nana-breadcrumb>Installation
Section titled “Installation”npm install @nana-tec/ui-componentsImport
Section titled “Import”import "@nana-tec/ui-components/breadcrumb-item";Basic usage
Section titled “Basic usage”<nana-breadcrumb> <nana-breadcrumb-item href="#">Home</nana-breadcrumb-item> <nana-breadcrumb-item current>Current</nana-breadcrumb-item></nana-breadcrumb>Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
back | data-back | boolean | false | Compact "back" affordance — prepends a ← and hides the separator |
badge | badge | string | undefined | — | A small trailing badge (e.g. a count) |
complete | data-complete | boolean | false | Whether this step precedes the current one (step variant) |
current | current | boolean | false | Marks this item as the current page — rendered as text with aria-current="page" |
disabled | disabled | boolean | false | Disables the link |
dropdown | dropdown | boolean | false | Turns the item into a dropdown trigger; menu entries go in the menu slot |
ellipsis | ellipsis | boolean | false | Renders a static ⋯ (manual overflow indicator) |
href | href | string | undefined | — | Destination URL. When set (and not current), the item renders as a link. |
isOverflow | data-overflow | boolean | false | Renders as the overflow trigger (a button) instead of a link/text |
loading | loading | boolean | false | Shows a skeleton placeholder while route data loads |
rel | rel | string | undefined | — | Relationship of the linked resource |
size | size | BreadcrumbSize | undefined | — | Size — set by the parent nana-breadcrumb to keep the trail consistent |
status | status | BreadcrumbItemStatus | undefined | — | Status accent shown as a leading dot + tinted text |
step | data-step | string | undefined | — | Step number shown in the step variant marker |
target | target | '_blank' | '_self' | '_parent' | '_top' | undefined | — | Where to open the link |
variant | data-variant | BreadcrumbVariant | undefined | — | Visual style, propagated from the parent breadcrumb |
Events
| Event | Description |
|---|---|
nana-click | Fired when an interactive item (link or overflow trigger) is activated |
nana-toggle | Fired when a dropdown item opens or closes (detail.open) |
Slots
| Slot | Description |
|---|---|
(default) | The item label |
prefix | Content before the label (e.g. a leading nana-icon) |
menu | Dropdown 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 |
::part(trigger) | The overflow trigger button (it also carries the link part) |
CSS custom properties
| Property | 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 |
--nana-breadcrumb-badge-bg | Background of the trailing badge |
--nana-breadcrumb-badge-color | Text colour of the trailing badge |
--nana-breadcrumb-font-size | Item text size |
--nana-breadcrumb-gap | Space either side of the separator |
--nana-breadcrumb-pill-bg | Item background in the pill variant |
--nana-breadcrumb-separator | The separator glyph itself, as a CSS content value |
--nana-breadcrumb-status-color | Colour of the status dot |
Events
Section titled “Events”| Event | Type | Description |
|---|---|---|
nana-click | CustomEvent | Fired when an interactive item (link or overflow trigger) is activated |
nana-toggle | CustomEvent | Fired when a dropdown item opens or closes (detail.open) |
| Slot | Description |
|---|---|
(default) | The item label |
prefix | Content before the label (e.g. a leading nana-icon) |
menu | Dropdown menu entries (shown when dropdown is open) |
CSS Variables
Section titled “CSS Variables”| Variable | 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 |
CSS Parts
Section titled “CSS Parts”| Part | Description |
|---|---|
separator | The glyph before the item |
marker | The step number marker (step variant) |
link | The <a> / <button> element (non-current, interactive items) |
label | The text wrapper (current / static items) |
badge | The trailing badge |
status | The status dot |
skeleton | The loading placeholder |
menu | The item dropdown menu |
Related components
Section titled “Related components”Storybook
Section titled “Storybook” Explore Breadcrumb Item interactively Every state, prop, and edge case — with live controls — in Storybook.
View in Storybook