Breadcrumb

Horizontal trail of ancestor links ending in the current page.

Preview

Home / Jobs / #4412

Preview

Home/Jobs/#4412

HTMLReact

Copy

<nav class="nx-breadcrumb" aria-label="Breadcrumb"><a href="#">Home</a><span class="nx-breadcrumb__sep" aria-hidden="true">/</span><a href="#">Jobs</a><span class="nx-breadcrumb__sep" aria-hidden="true">/</span><span class="nx-breadcrumb__current" aria-current="page">#4412</span></nav>

Copy

<NxBreadcrumb items={[{ label: "Home", href: "/" }, { label: "Jobs", href: "/jobs" }, { label: "#4412" }]} />

API

React props (NxKit)

React (NxKit) props

Prop	Type	Default	Required	Description
items	{label,href?}[]	—	Required	Trail; the last item (no href) renders as the current page.

Classes

Framework-agnostic classes

Class	Description
.nx-breadcrumb	nav, wraps
.nx-breadcrumb__sep	Decorative separator, aria-hidden
.nx-breadcrumb__current	aria-current="page"

Accessibility

• Wrapped in <nav aria-label="Breadcrumb">; the current page is a <span aria-current="page">, not a link.
• Separators are aria-hidden — they're visual only, not read by a screen reader.

Do / Don’t

• ✓Do: End with the current page as plain text, not a link.✕Don’t: Don't add more than ~5 levels — collapse deep trails.

Related

Menu

View in spec →

View source: registry.js ↗