Skip to content

feat(Breadcrumbs): declarative compound component with overflow #81

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Draft
johnleider wants to merge 1 commit into
base: master
Choose a base branch
from
Draft

feat(Breadcrumbs): declarative compound component with overflow #81

johnleider wants to merge 1 commit into from

Conversation

@johnleider
Copy link
Member

@johnleider johnleider commented Jan 8, 2026

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
@johnleider
feat(Breadcrumbs): declarative compound component with overflow
a46ad9f 
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
@johnleider johnleider force-pushed the master branch 2 times, most recently from 167b915 to e38b4e4 Compare January 28, 2026 03:45
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

1 participant

@johnleider