Getting StartedInstall and bootstrap headless foundations 4
LayoutHeadless structural primitives for expandable and container patterns 6
OverlayHeadless modal and floating layer behavior 3
FeedbackHeadless notification and status communication patterns 5
FormHeadless input and selection contracts 17
UtilityReusable action, identity, and clipboard behavior 6
NavigationHeadless trails, trees, menus, and command surfaces 7
Overview API Styling Examples

Styling contract

Breadcrumb primitives emit stable slot attributes and little else. Owners style the visible trail, define current-segment emphasis, and decide how collapsed or disabled states should look.

CSS contract table

SelectorApplied onPurpose
[data-slot='breadcrumb']Root landmark containerOverall color, width, and layout shell for the trail.
[data-slot='breadcrumb-list']Ordered listRow layout, wrapping, spacing, and list reset.
[data-slot='breadcrumb-item']Segment wrapperSegment spacing and any owner-authored current or disabled styling hooks.
[data-slot='breadcrumb-link']Linked ancestor segmentLink color, hover affordance, and focus treatment.
[data-slot='breadcrumb-separator']Decorative separatorSeparator tone and spacing; remains non-focusable and aria-hidden.

Owner state

  • Style the current segment through [aria-current='page'] or your own current-state class.
  • Represent disabled segments with text nodes or an explicit disabled class if the path needs them.
  • Collapsed trails are owner-authored, so style ellipsis markers with your own selector rather than a built-in state attr.

Practical guidance

  • Keep separators decorative and lower contrast than the content-bearing segments.
  • Use stronger contrast and weight for the current segment than linked ancestors.
  • Allow wrapping on narrow screens if long route labels are common in your IA.
  • Prefer text or aria-current for the current segment unless your app truly needs a current-page link.