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

API reference

Headless breadcrumb primitives are intentionally thin. They expose stable slot hooks and the separator accessibility contract, while leaving trail semantics, current-page resolution, and collapse behavior to the owner.

Root slots

DirectivePurposeHost hook
tngBreadcrumbRoot breadcrumb landmark container.data-slot="breadcrumb"
tngBreadcrumbListOrdered list container for the visible trail.data-slot="breadcrumb-list"

Item slots

DirectivePurposeHost hook
tngBreadcrumbItemList item wrapper for each visible segment.data-slot="breadcrumb-item"
tngBreadcrumbLinkOptional linked ancestor segment.data-slot="breadcrumb-link"

Separator contract

DirectiveBehaviorHost hook
tngBreadcrumbSeparatorMarks decorative separators and applies aria-hidden="true".data-slot="breadcrumb-separator"

Owner responsibilities

  • Choose the landmark label with aria-label or surrounding context.
  • Author the current page state with aria-current="page" on the visible current segment.
  • Decide whether disabled or collapsed segments render as links, text, or ellipsis nodes.
  • Bring your own collapse logic if long trails need summarization.