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

Preview

Home Components Breadcrumb

Show code Copy

Installation

npm install @nana-tec/ui-components

Import

import "@nana-tec/ui-components/breadcrumb";

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

current marks the active page; disabled dims a crumb.

Home Restricted Current

Show code Copy

Variants

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

Home Library Data Cart Shipping Payment Home Docs Guide

Show code Copy

API

Properties

Property	Attribute	Type	Default	Description
ariaLabel	aria-label	string | null	'Breadcrumb'	Accessible label for the landmark (maps to `aria-label`)
collapse	—	BreadcrumbCollapse	'expand'	How a collapsed trail reveals hidden items
compactWidth	compact-width	number	420	Container width (px) below which `responsive` switches to the compact form
maxItems	max-items	number | undefined	—	Collapse the middle of the trail once there are more than this many items
responsive	—	boolean	false	Collapse to a single `← Parent` link below `compact-width`
separator	—	string | undefined	—	Separator glyph: a preset name (`slash`/`chevron`/`arrow`/`dot`) or any string
size	—	BreadcrumbSize	'md'	Size applied to every item so the whole trail stays consistent
underline	—	boolean	false	Underline the current page (composes with any variant)
variant	—	BreadcrumbVariant	'default'	Visual style of the trail

Events

Event	Description
nana-expand	Fired when a truncated trail is expanded inline

Slots

Slot	Description
(default)	One or more `nana-breadcrumb-item` elements

CSS parts

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

CSS custom properties

Property	Description
--nana-breadcrumb-separator	Separator glyph between items
--nana-breadcrumb-gap	Space around each separator

Events

Event	Type	Description
nana-expand	CustomEvent	Fired when a truncated trail is expanded inline

Slots

Slot	Description
(default)	One or more nana-breadcrumb-item elements

CSS Variables

Variable	Default	Description
--nana-breadcrumb-separator	—	Separator glyph between items
--nana-breadcrumb-gap	—	Space around each separator

CSS Parts

Part	Description
base	The <nav> landmark
list	The <ol> that lays out the items
menu	The overflow dropdown menu

Accessibility

• Keyboard accessible
• Screen-reader labels
• Focus-visible states
• ARIA roles and states
• WCAG 2.2 AA contrast

Related components

• Breadcrumb Item
• Menu
• Menu Item
• Menu Label
• Menubar

Storybook

Explore Breadcrumb interactively Every state, prop, and edge case — with live controls — in Storybook.

View in Storybook