fix(Breadcrumbs): measure every element a crumb renders by mattcosta7 · Pull Request #8748 · primer/react

mattcosta7 · 2026-11-13T15:19:28Z

Closes #

Fix-forward for the dotcom regression found after #8683 (proposed revert: #8747).

On small screens the global header breadcrumbs (primer / react ▾) stopped collapsing to ··· / re… and instead spilled left over the GitHub logo. #8683 measured each crumb by its first element only. The header's repository crumb renders a link plus a sibling dropdown button (RepoPicker), so the button's width was never counted. The fit decided both crumbs still fit, nothing collapsed, and the end-aligned header region pushed the overflow out of its start edge. Before #8683 the whole li was measured, which is why it worked.

The fix measures a crumb as the extent of everything it renders, elements and text, excluding the separator. It uses a Range over the li contents: one rect read per crumb, and no change to the DOM structure. Consumers such as github-ui's header style li:has(> .repoPickerDropdownButton), so wrapping crumb content would break them.

Changelog

New

Changed

Breadcrumbs with overflow="menu" / "menu-with-root" collapses crumbs that render more than one element (for example a link with a sibling button) when they no longer fit, instead of overflowing the container.

Removed

Rollout strategy

Testing & Reviewing

New browser test in BreadcrumbsOverflow.test.tsx mirrors the header: a link + sibling button crumb in an end-aligned container, sized just below the crumbs' natural width. It fails without the fix (both crumbs stay visible and spill) and passes with it.
A width sweep of a header-shaped layout (left cluster, flex: 1; min-width: 0; justify-content: flex-end center, right cluster) showed the left spill at every narrow width before the fix. After the fix, crumbs collapse correctly wherever there's room, and the leaf truncates with ….
Perf is unchanged vs. perf(Breadcrumbs): rebuild overflow menu for fewer renders, cheaper layout and better SSR #8683 (Chromium, 3 runs): mount 1 render / 7 rect reads before and after; a 150↔1200px resize sweep 2 renders / 11 rect reads before and after. Single-element crumbs skip the separator before reading it, so they still cost one read. Resizes still reuse cached widths and never re-measure.
npx vitest run --project '@primer/react' packages/react/src/Breadcrumbs packages/react/src/__tests__/ssr.test.tsx: passed (52 tests)
npx eslint on changed files: passed
npm run type-check: passed
Not yet verified inside github-ui. Use the integration workflow to confirm against dotcom.

A crumb that renders a link plus a sibling button (e.g. github-ui's repository picker) was measured by its first element only, so the fit under-counted it and the crumbs never collapsed, spilling out of end-aligned containers. Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>

changeset-bot · 2026-11-13T15:19:38Z

🦋 Changeset detected

Latest commit: a4e90cc

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/react	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

github-actions · 2026-11-13T15:20:01Z

⚠️ Action required

👋 Hi, this pull request contains changes to the source code that github/github-ui depends on. If you are GitHub staff, test these changes with github/github-ui using the integration workflow. Check the integration testing docs for step-by-step instructions. Or, apply the integration-tests: skipped manually label to skip these checks.

Copilot

🔵 Needs a closer look

The RepoPicker markup and consumer CSS are outside this checkout, so unverified github-ui integration requires human confirmation of narrow-width collapse and leaf truncation before rollout.

No open issues 🎉

What changed in this PR

Fixes a Breadcrumbs overflow regression introduced by #8683: crumbs containing multiple elements could be under-measured and spill outside the global header.

Changes:

Measures the span of all elements rendered by a crumb, excluding its separator.
Adds a browser regression test for a link with a sibling picker button in an end-aligned container.
Adds a patch changeset for @primer/react.

File	Description
`packages/react/src/Breadcrumbs/Breadcrumbs.tsx`	Measures all crumb elements when calculating overflow.
`packages/react/src/Breadcrumbs/__tests__/BreadcrumbsOverflow.test.tsx`	Tests multi-element crumb collapse and container bounds.
`.changeset/breadcrumbs-measure-whole-crumb.md`	Documents the overflow fix for a patch release.

_{Review effort: Balanced}

Counts text nodes as well as elements, and reads one rect per crumb. Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>

primer-integration · 2026-11-13T15:30:39Z

Integration test results from github/github-ui PR:

Changes Running
CI Passed
VRT Waiting
Projects Waiting

mattcosta7 requested a review from a team as a code owner November 13, 2026 15:19

mattcosta7 requested review from liuliu-dev and a balanced review from Copilot November 13, 2026 15:19

Copilot started reviewing on behalf of mattcosta7 November 13, 2026 15:19

View session

github-actions Bot added the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label Nov 13, 2026

Copilot AI reviewed Nov 13, 2026

View reviewed changes

refactor(Breadcrumbs): measure a crumb's extent with a Range

a4e90cc

Counts text nodes as well as elements, and reads one rect per crumb. Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>

mattcosta7 self-assigned this Nov 13, 2026

mattcosta7 added the Canary Release Apply this label when you want CI to create a canary release of the current PR label Nov 13, 2026

github-actions Bot temporarily deployed to storybook-preview-8748 November 13, 2026 15:30 Inactive

francinelucca closed this Nov 13, 2026

francinelucca reopened this Nov 13, 2026

mattcosta7 had a problem deploying to github-pages November 13, 2026 15:37 — with GitHub Actions Failure

github-actions Bot requested a deployment to storybook-preview-8748 November 13, 2026 15:38 Abandoned

francinelucca deployed to github-pages November 13, 2026 15:49 — with GitHub Actions

View deployment

github-actions Bot temporarily deployed to storybook-preview-8748 November 13, 2026 15:50 Inactive

francinelucca merged commit 324b0aa into main Nov 13, 2026
111 of 135 checks passed

francinelucca deleted the mattcosta7-breadcrumbs-small-screen-truncation branch November 13, 2026 15:55

francinelucca approved these changes Nov 13, 2026

View reviewed changes

primer Bot mentioned this pull request Nov 13, 2026

Release tracking #8695

Merged

mattcosta7 mentioned this pull request Nov 13, 2026

fix(Breadcrumbs): let the nav shrink in a flex row so menu modes collapse #8750

Draft

1 of 5 tasks

Navigation Menu

Repository navigation

fix(Breadcrumbs): measure every element a crumb renders - #8748

fix(Breadcrumbs): measure every element a crumb renders#8748
francinelucca merged 2 commits into
mainfrom
mattcosta7-breadcrumbs-small-screen-truncation

mattcosta7 commented Nov 13, 2026 •

edited

Loading

Uh oh!

changeset-bot Bot commented Nov 13, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Nov 13, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

primer-integration Bot commented Nov 13, 2026 •

edited

Loading

Uh oh!

Uh oh!

This branch was successfully deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

mattcosta7 commented Nov 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changelog

New

Changed

Removed

Rollout strategy

Testing & Reviewing

Uh oh!

changeset-bot Bot commented Nov 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions Bot commented Nov 13, 2026

⚠️ Action required

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🔵 Needs a closer look

Uh oh!

primer-integration Bot commented Nov 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

This branch was successfully deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

mattcosta7 commented Nov 13, 2026 •

edited

Loading

changeset-bot Bot commented Nov 13, 2026 •

edited

Loading

primer-integration Bot commented Nov 13, 2026 •

edited

Loading