Skip to content

Conversation

@johnleider
Copy link
Member

Summary

  • New declarative Breadcrumbs architecture using Group + Overflow contexts
  • Items/Dividers/Ellipsis register and self-measure
  • Visibility controlled via selection state
  • Ellipsis auto-hides when everything fits, shows when truncating

Components

  • BreadcrumbsRoot - context provider, manages visibility
  • BreadcrumbsList - semantic ol wrapper
  • BreadcrumbsItem - breadcrumb link/text
  • BreadcrumbsDivider - separator with inline override support
  • BreadcrumbsEllipsis - truncation indicator

Usage

<Breadcrumbs.Root divider="/" as="nav">
  <Breadcrumbs.List as="ol">
    <Breadcrumbs.Item as="li"><a href="/">Home</a></Breadcrumbs.Item>
    <Breadcrumbs.Divider />
    <Breadcrumbs.Ellipsis />
    <Breadcrumbs.Divider />
    <Breadcrumbs.Item as="li"><a href="/about">About</a></Breadcrumbs.Item>
  </Breadcrumbs.List>
</Breadcrumbs.Root>

Test plan

  • Manual testing in playground
  • Add unit tests for Breadcrumbs components
  • Test overflow behavior at various widths
  • Verify ellipsis visibility logic

New architecture using Group + Overflow contexts:
- Root creates Group (enroll: true) + Overflow for width tracking
- Item/Divider/Ellipsis register and self-measure
- Visibility controlled via selection state
- Ellipsis auto-hides when everything fits, shows when truncating

Components:
- BreadcrumbsRoot - context provider, manages visibility
- BreadcrumbsList - semantic ol wrapper
- BreadcrumbsItem - breadcrumb link/text
- BreadcrumbsDivider - separator with inline override support
- BreadcrumbsEllipsis - truncation indicator
@pkg-pr-new
Copy link

pkg-pr-new bot commented Jan 8, 2026

Open in StackBlitz

commit: a46ad9f

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant