Skip to content
Nana UI

Navigation

Breadcrumb

A navigation trail showing the user's location in a hierarchy. Compose it from nana-breadcrumb-item children; the last item is usually current. One element covers the common professional patterns through orthogonal attributes: - Standard / Chevron / Path — separator (slash · chevron · arrow · dot, or any custom glyph) and variant="path". - Pill · Card · Step — variant. - Truncated / Dropdown — max-items collapses the middle into a …, either inline (collapse="expand") or into a menu (collapse="dropdown"). - Mobile compact / back-nav — responsive collapses to ← Parent below compact-width. - Underlined — underline emphasises the current page (composes with any variant).

View .md Download

Preview

Section titled “Preview”
Home Components Breadcrumb

Installation

Section titled “Installation”
npm install @nana-tec/ui-components

Import

Section titled “Import”
import "@nana-tec/ui-components/breadcrumb";

Basic usage

Section titled “Basic usage”
<nana-breadcrumb>
  <nana-breadcrumb-item href="#">Home</nana-breadcrumb-item>
  <nana-breadcrumb-item href="#">Components</nana-breadcrumb-item>
  <nana-breadcrumb-item>Breadcrumb</nana-breadcrumb-item>
</nana-breadcrumb>

Item states

Section titled “Item states”

current marks the active page; disabled dims a crumb.

Home Restricted Current

Variants

Section titled “Variants”

The variant attribute restyles the trail — default, path, pill, card, or step.

Home Library Data Cart Shipping Payment Home Docs Guide

API

Section titled “API”

Properties

PropertyAttributeTypeDefaultDescription
ariaLabelaria-labelstring | null'Breadcrumb'Accessible label for the landmark (maps to aria-label)
collapsecollapseBreadcrumbCollapse'expand'How a collapsed trail reveals hidden items
compactWidthcompact-widthnumber420Container width (px) below which responsive switches to the compact form
maxItemsmax-itemsnumber | undefined—Collapse the middle of the trail once there are more than this many items
responsiveresponsivebooleanfalseCollapse to a single ← Parent link below compact-width
separatorseparatorstring | undefined—Separator glyph: a preset name (slash/chevron/arrow/dot) or any string
sizesizeBreadcrumbSize'md'Size applied to every item so the whole trail stays consistent
underlineunderlinebooleanfalseUnderline the current page (composes with any variant)
variantvariantBreadcrumbVariant'default'Visual style of the trail

Events

EventDescription
nana-expandFired when a truncated trail is expanded inline

Slots

SlotDescription
(default)One or more nana-breadcrumb-item elements

CSS parts

PartDescription
::part(base)The <nav> landmark
::part(list)The <ol> that lays the items out
::part(menu)The overflow dropdown menu

CSS custom properties

PropertyDescription
--nana-breadcrumb-separatorSeparator glyph between items
--nana-breadcrumb-gapSpace around each separator

Events

Section titled “Events”
EventTypeDescription
nana-expandCustomEventFired when a truncated trail is expanded inline

Slots

Section titled “Slots”
SlotDescription
(default)One or more nana-breadcrumb-item elements

CSS Variables

Section titled “CSS Variables”
VariableDescription
--nana-breadcrumb-separatorSeparator glyph between items
--nana-breadcrumb-gapSpace around each separator

CSS Parts

Section titled “CSS Parts”
PartDescription
baseThe <nav> landmark
listThe <ol> that lays out the items
menuThe overflow dropdown menu

Accessibility

Section titled “Accessibility”
  • Keyboard accessible
  • Screen-reader labels
  • Focus-visible states
  • ARIA roles and states
  • WCAG 2.2 AA contrast
Section titled “Related components”

Storybook

Section titled “Storybook”
Explore Breadcrumb interactively Every state, prop, and edge case — with live controls — in Storybook.
View in Storybook