Primitive contract

Breadcrumb

Provides a landmark and ordered route trail with decorative separators and an unlinked current page.

Current-location navigation trail · @sanchika/primitives

Purpose and semantics

Provides a landmark and ordered route trail with decorative separators and an unlinked current page.

Recommended semantic: Use nav with an accessible label containing an ordered list; mark the current item aria-current=page and normally do not link it.

Anatomy

landmark

Named breadcrumb navigation.

ordered list

Hierarchy order.

item

Route label or link.

separator

Decorative assistive-hidden marker.

current page

Unlinked current location.

Finite variants and important states

Required states: default, long-label, current-page
Class hooks: .sk-breadcrumb · .sk-breadcrumb__list · .sk-breadcrumb__item · .sk-breadcrumb__separator

Composed synthetic exemplar

Rendered state matrix

Breadcrumb: 3 required states

Each specimen starts from the package-owned example and contract state inventory. Simulated pointer and focus frames are labelled; consumers still verify real interaction in context.

defaultSettled and available for its documented job.

long labelThe long label contract remains visible and inspectable.

current pageThe current page contract remains visible and inspectable.

Accessibility and consumer responsibility

Keyboard and screen reader

Links keep native keyboard behavior
Current page is not a redundant focus target
Name the landmark
Use ordered list
Hide separators
Expose current page

Consumer owns

Provide correct route hierarchy
Keep current page unlinked
Own canonical and structured-data logic

Mobile

Trail wraps safely; visual truncation preserves full accessible name

Reduced motion and forced colors

No override is required.

Links and current-page text remain distinguishable

Compact API reference

Package: @sanchika/primitives
CSS: @sanchika/primitives/styles.css
Contract: primitiveSpecs.find((contract) => contract.name === "Breadcrumb")
Primary class: .sk-breadcrumb