fix(Breadcrumbs): Do not show overflow menu when breadcrumb has only two items by liuliu-dev · Pull Request #7797 · primer/react

liuliu-dev · 2026-04-28T21:05:36Z

Closes #

Changelog

New

Changed

Removed

Rollout strategy

Patch release
Minor release
Major release; if selected, include a written rollout or migration plan
None; if selected, include a brief description as to why

Testing & Reviewing

Merge checklist

Added/updated tests
Added/updated documentation
Added/updated previews (Storybook)
Changes are SSR compatible
Tested in Chrome
Tested in Firefox
Tested in Safari
Tested in Edge
(GitHub staff only) Integration tests pass at github/github-ui (Learn more about how to run integration tests)

changeset-bot · 2026-04-28T21:05:43Z

🦋 Changeset detected

Latest commit: a2680e6

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-04-28T21:06:17Z

⚠️ 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.

To publish a canary release for integration testing, apply the Canary Release label to this PR.

…mb-items

liuliu-dev · 2026-04-28T21:37:52Z

could check the change in the failed vrt on dotcom:
https://github-65bccf37a8-56576033.drafts.github.io/vrt/#?testId=dafa9a1a1c0134c0cb28-b8597cd8878517f4418b

Copilot

Pull request overview

Adjusts Breadcrumbs overflow-menu behavior so that a narrow viewport does not force-collapse into an overflow menu when there are only two breadcrumb items, aligning the component with expected UX for small breadcrumb sets.

Changes:

Update overflow calculation to only apply the narrow “min visible items = 1” rule when there are more than two items.
Add Storybook feature stories covering the two-item overflow="menu" and overflow="menu-with-root" cases.
Add Playwright VRT coverage + new snapshot baselines for the two-item scenarios, and a patch changeset entry.

Show a summary per file

File	Description
packages/react/src/Breadcrumbs/Breadcrumbs.tsx	Prevents narrow-mode overflow collapsing when there are only 2 items.
packages/react/src/Breadcrumbs/Breadcrumbs.features.stories.tsx	Adds stories to exercise two-item overflow props.
e2e/components/Breadcrumbs.test.ts	Adds VRT tests for two-item overflow scenarios.
.playwright/snapshots/components/Breadcrumbs.test.ts-snapshots/Breadcrumbs-TwoItemsOverflowMenu-narrow-linux.png	New VRT baseline for two-item `overflow="menu"` story.
.playwright/snapshots/components/Breadcrumbs.test.ts-snapshots/Breadcrumbs-TwoItemsOverflowMenuWithRoot-narrow-linux.png	New VRT baseline for two-item `overflow="menu-with-root"` story.
.changeset/free-wasps-drop.md	Patch changeset entry for the behavior fix.

Copilot's findings

Files reviewed: 4/6 changed files
Comments generated: 2

Copilot · 2026-04-28T21:40:22Z

+export const TwoItemsWithOverflowMenu = () => (
+  <Breadcrumbs overflow="menu">
+    <Breadcrumbs.Item href="#">Home</Breadcrumbs.Item>
+    <Breadcrumbs.Item href="#" selected>
+      Current Page
+    </Breadcrumbs.Item>
+  </Breadcrumbs>
+)
+
+export const TwoItemsWithOverflowMenuWithRoot = () => (
+  <Breadcrumbs overflow="menu-with-root">
+    <Breadcrumbs.Item href="#">Home</Breadcrumbs.Item>
+    <Breadcrumbs.Item href="#" selected>
+      Current Page
+    </Breadcrumbs.Item>
+  </Breadcrumbs>
+)


The new Storybook exports are named as if an overflow menu is expected to render, but the PR’s stated behavior is that the overflow menu should not appear when there are only two items. Consider renaming these stories to reflect the intent (e.g., that overflow="menu"/"menu-with-root" does not render a menu with two items) to avoid confusing future readers and consumers of the story IDs.

Copilot · 2026-04-28T21:40:23Z

+  test.describe('Two Items With Overflow Menu', () => {
+    test('narrow viewport @vrt', async ({page}) => {
+      await visit(page, {
+        id: 'components-breadcrumbs-features--two-items-with-overflow-menu',
+        globals: {
+          colorScheme: 'light',
+        },
+      })
+
+      await page.setViewportSize({width: viewports['primer.breakpoint.xs'] - 1, height: 768})
+      await expect(page).toHaveScreenshot('Breadcrumbs.TwoItemsOverflowMenu.narrow.png')
+    })
+  })
+
+  test.describe('Two Items With Overflow Menu With Root', () => {
+    test('narrow viewport @vrt', async ({page}) => {
+      await visit(page, {
+        id: 'components-breadcrumbs-features--two-items-with-overflow-menu-with-root',
+        globals: {
+          colorScheme: 'light',
+        },
+      })
+
+      await page.setViewportSize({width: viewports['primer.breakpoint.xs'] - 1, height: 768})
+      await expect(page).toHaveScreenshot('Breadcrumbs.TwoItemsOverflowMenuWithRoot.narrow.png')
+    })


Test/screenshot naming here suggests an overflow menu should be present ("Two Items With Overflow Menu" / "TwoItemsOverflowMenu"), but the intended behavior is that no overflow menu renders for two items. Renaming the describe block and screenshot baselines to match the expected UI would make the VRT coverage easier to understand and maintain.

primer-integration · 2026-04-28T21:48:52Z

👋 Hi from github/github-ui! Your integration PR is ready: https://github.com/github/github-ui/pull/19578

primer-integration · 2026-04-28T22:01:05Z

Integration test results from github/github-ui:

CI Passed
VRT Passed
Projects Passed

All checks passed!

strackoverflow

Thank you!

liuliu-dev added 2 commits April 28, 2026 14:04

>2, tests, stories

b95e575

changeset

deb1587

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 Apr 28, 2026

liuliu-dev added Canary Release Apply this label when you want CI to create a canary release of the current PR update snapshots 🤖 Command that updates VRT snapshots on the pull request labels Apr 28, 2026

Merge branch 'main' into liuliu/do-not-show-menu-when-only-2-breadcru…

68978b6

…mb-items

github-actions Bot temporarily deployed to storybook-preview-7797 April 28, 2026 21:15 Inactive

liuliu-dev added update snapshots 🤖 Command that updates VRT snapshots on the pull request and removed update snapshots 🤖 Command that updates VRT snapshots on the pull request labels Apr 28, 2026

test(vrt): update snapshots

a2680e6

github-actions Bot removed the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Apr 28, 2026

github-actions Bot temporarily deployed to storybook-preview-7797 April 28, 2026 21:26 Inactive

primer Bot deployed to github-pages April 28, 2026 21:35 View deployment

github-actions Bot deployed to storybook-preview-7797 April 28, 2026 21:35 View deployment

liuliu-dev marked this pull request as ready for review April 28, 2026 21:37

liuliu-dev requested a review from a team as a code owner April 28, 2026 21:37

liuliu-dev requested review from Copilot and francinelucca April 28, 2026 21:37

Copilot started reviewing on behalf of liuliu-dev April 28, 2026 21:37 View session

Copilot AI reviewed Apr 28, 2026

View reviewed changes

strackoverflow approved these changes Apr 28, 2026

View reviewed changes

llastflowers approved these changes Apr 28, 2026

View reviewed changes

liuliu-dev added this pull request to the merge queue Apr 28, 2026

github-merge-queue Bot removed this pull request from the merge queue due to failed status checks Apr 28, 2026

liuliu-dev added this pull request to the merge queue Apr 28, 2026

Merged via the queue into main with commit 3e05935 Apr 28, 2026
57 checks passed

liuliu-dev deleted the liuliu/do-not-show-menu-when-only-2-breadcrumb-items branch April 28, 2026 23:41

primer Bot mentioned this pull request Apr 28, 2026

Release tracking #7793

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(Breadcrumbs): Do not show overflow menu when breadcrumb has only two items#7797

fix(Breadcrumbs): Do not show overflow menu when breadcrumb has only two items#7797
liuliu-dev merged 4 commits intomainfrom
liuliu/do-not-show-menu-when-only-2-breadcrumb-items

liuliu-dev commented Apr 28, 2026

Uh oh!

changeset-bot Bot commented Apr 28, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Apr 28, 2026

Uh oh!

liuliu-dev commented Apr 28, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Apr 28, 2026

Uh oh!

Copilot AI Apr 28, 2026

Uh oh!

primer-integration Bot commented Apr 28, 2026

Uh oh!

primer-integration Bot commented Apr 28, 2026

Uh oh!

strackoverflow left a comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

liuliu-dev commented Apr 28, 2026

Changelog

New

Changed

Removed

Rollout strategy

Testing & Reviewing

Merge checklist

Uh oh!

changeset-bot Bot commented Apr 28, 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 Apr 28, 2026

⚠️ Action required

Uh oh!

liuliu-dev commented Apr 28, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Copilot's findings

Uh oh!

Copilot AI Apr 28, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 28, 2026

Choose a reason for hiding this comment

Uh oh!

primer-integration Bot commented Apr 28, 2026

Uh oh!

primer-integration Bot commented Apr 28, 2026

Uh oh!

strackoverflow left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

changeset-bot Bot commented Apr 28, 2026 •

edited

Loading