Getting StartedInstallation and setup guides 5
LayoutWorkflow and structural layout components 7
OverlayModal and floating layer surfaces 3
FeedbackStatus, empty, progress, and loading placeholder patterns 5
FormInput and selection components 17
UtilityGeneral-purpose interface utilities 7
NavigationMenu surfaces and hierarchical actions 7
Overview API Styling Examples

Styling contract

Breadcrumb primitives expose stable slot attributes so teams can style either pure headless markup or wrapper components with the same selectors.

Primitive slot selectors

  • [data-slot="breadcrumb"] for the root navigation container.
  • [data-slot="breadcrumb-list"] for the ordered list track.
  • [data-slot="breadcrumb-item"] for each item wrapper.
  • [data-slot="breadcrumb-link"] for linked ancestor segments.
  • [data-slot="breadcrumb-separator"] for decorative separators.

Wrapper state hooks

  • [data-current="true"] on the resolved current page segment.
  • [data-disabled="true"] when an item is presentational but non-interactive.
  • [data-collapsed="true"] on the rendered ellipsis marker in collapsed mode.
  • [data-focused="true"] and [data-focus-visible="true"] during focus transitions.

Practical guidance

  • Keep separators decorative (aria-hidden) and non-focusable.
  • Use stronger contrast for the current segment than ancestor links.
  • In collapsed mode, preserve first and current items for orientation.
  • Avoid wrapping every segment to new lines unless your IA requires it on mobile.