Breadcrumbs: Show only current page on narrow viewports with overflow menu by liuliu-dev · Pull Request #7754 · primer/react

liuliu-dev · 2026-04-14T17:25:11Z

Closes https://github.com/github/primer/issues/6371

Changelog

On narrow container width (<544px), when overflow="menu" is set, the Breadcrumbs component now collapses all items except the current page (last breadcrumb) into the overflow menu.

Before	After

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-14T17:25:18Z

🦋 Changeset detected

Latest commit: 29ad55e

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-14T17:27:29Z

Uh oh! @liuliu-dev, at least one image you shared is missing helpful alt text. Check your pull request body to fix the following violations:

Images should have meaningful alternative text (alt text) at line 13
Images should have meaningful alternative text (alt text) at line 13
Images should have meaningful alternative text (alt text) at line 13
Images should have meaningful alternative text (alt text) at line 13

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.

🤖 Beep boop! This comment was added automatically by github/accessibility-alt-text-bot.

github-actions · 2026-04-14T17:27:47Z

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

primer-integration · 2026-04-14T22:08:17Z

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

primer-integration · 2026-04-14T22:21:19Z

Integration test results from github/github-ui:

CI Passed
VRT Passed
Projects Passed

All checks passed!

Copilot

Pull request overview

Updates the Breadcrumbs overflow behavior to better support small-screen layouts by collapsing to fewer visible items when using menu overflow, and adds VRT coverage for the new/expected responsive rendering.

Changes:

Adjusted overflow calculation to reduce visible breadcrumb items at the <544px breakpoint for overflow="menu".
Added Playwright VRT cases for overflow-menu stories at narrow and wide viewport sizes.
Added new/updated Playwright snapshot baselines and a patch changeset entry.

Show a summary per file

File	Description
packages/react/src/Breadcrumbs/Breadcrumbs.tsx	Updates overflow/min-visible-items logic with a narrow breakpoint condition.
e2e/components/Breadcrumbs.test.ts	Adds VRT coverage for overflow menu behavior at narrow/wide viewports.
.playwright/snapshots/components/Breadcrumbs.test.ts-snapshots/Breadcrumbs-OverflowMenuWithRoot-narrow-linux.png	Adds new VRT baseline for overflow menu with root at narrow viewport.
.playwright/snapshots/components/Breadcrumbs.test.ts-snapshots/Breadcrumbs-OverflowMenu-wide-linux.png	Adds new VRT baseline for overflow menu at wide viewport.
.playwright/snapshots/components/Breadcrumbs.test.ts-snapshots/Breadcrumbs-OverflowMenu-narrow-linux.png	Adds new VRT baseline for overflow menu at narrow viewport.
.changeset/fast-pugs-camp.md	Patch changeset documenting the new narrow-viewport overflow-menu behavior.

Copilot's findings

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

packages/react/src/Breadcrumbs/Breadcrumbs.tsx

+      const NARROW_BREAKPOINT = 544
+      const isNarrow = availableWidth < NARROW_BREAKPOINT
+      const MIN_VISIBLE_ITEMS = isNarrow && eHideRoot ? 1 : !eHideRoot ? 3 : 4


packages/react/src/Breadcrumbs/Breadcrumbs.tsx

+      const NARROW_BREAKPOINT = 544
+      const isNarrow = availableWidth < NARROW_BREAKPOINT


francinelucca

approving with non-blocking comments!

francinelucca · 2026-04-15T03:06:23Z

packages/react/src/Breadcrumbs/Breadcrumbs.tsx

-      const MIN_VISIBLE_ITEMS = !eHideRoot ? 3 : 4
+      const NARROW_BREAKPOINT = 544
+      const isNarrow = availableWidth < NARROW_BREAKPOINT
+      const MIN_VISIBLE_ITEMS = isNarrow && eHideRoot ? 1 : !eHideRoot ? 3 : 4


nit: I feel like these double ternaries are hard to read. I'd split this into multiple lines or a function

francinelucca · 2026-04-15T03:11:07Z

.changeset/fast-pugs-camp.md

+'@primer/react': patch
+---
+
+Breadcrumbs: On narrow viewports, only show the current page breadcrumb and the overflow menu when `overflow="menu"` is set.


I wonder if this should be the default 🤔

liuliu-dev added 2 commits April 14, 2026 09:56

only show the current and menu on narrow

b579017

min:1

53e7bf7

liuliu-dev added the Canary Release Apply this label when you want CI to create a canary release of the current PR label Apr 14, 2026

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 14, 2026

liuliu-dev deployed to github-pages April 14, 2026 17:39 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-7754 April 14, 2026 17:39 Inactive

liuliu-dev deployed to github-pages April 14, 2026 21:05 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-7754 April 14, 2026 21:05 Inactive

add vrt tests

9f59f9e

liuliu-dev deployed to github-pages April 14, 2026 21:23 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-7754 April 14, 2026 21:23 Inactive

liuliu-dev added the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Apr 14, 2026

test(vrt): update snapshots

895b305

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

revert actionlist snapshot

29ad55e

github-actions bot temporarily deployed to storybook-preview-7754 April 14, 2026 21:54 Inactive

liuliu-dev deployed to github-pages April 14, 2026 22:04 — with GitHub Actions View deployment

github-actions bot deployed to storybook-preview-7754 April 14, 2026 22:04 View deployment

liuliu-dev requested a review from francinelucca April 14, 2026 22:22

liuliu-dev marked this pull request as ready for review April 14, 2026 22:22

liuliu-dev requested a review from a team as a code owner April 14, 2026 22:22

Copilot AI review requested due to automatic review settings April 14, 2026 22:22

Copilot started reviewing on behalf of liuliu-dev April 14, 2026 22:23 View session

Copilot AI reviewed Apr 14, 2026

View reviewed changes

francinelucca approved these changes Apr 15, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Breadcrumbs: Show only current page on narrow viewports with overflow menu#7754

Breadcrumbs: Show only current page on narrow viewports with overflow menu#7754
liuliu-dev wants to merge 5 commits intomainfrom
liuliu/breadcrumbs-narrow-viewport

liuliu-dev commented Apr 14, 2026 •

edited

Loading

Uh oh!

changeset-bot bot commented Apr 14, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Apr 14, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Apr 14, 2026

Uh oh!

primer-integration bot commented Apr 14, 2026

Uh oh!

primer-integration bot commented Apr 14, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

francinelucca left a comment

Uh oh!

francinelucca Apr 15, 2026

Uh oh!

francinelucca Apr 15, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

		const NARROW_BREAKPOINT = 544
		const isNarrow = availableWidth < NARROW_BREAKPOINT

Conversation

liuliu-dev commented Apr 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changelog

Rollout strategy

Testing & Reviewing

Merge checklist

Uh oh!

changeset-bot bot commented Apr 14, 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 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Apr 14, 2026

⚠️ Action required

Uh oh!

primer-integration bot commented Apr 14, 2026

Uh oh!

primer-integration bot commented Apr 14, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Copilot's findings

Uh oh!

francinelucca left a comment

Choose a reason for hiding this comment

Uh oh!

francinelucca Apr 15, 2026

Choose a reason for hiding this comment

Uh oh!

francinelucca Apr 15, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

liuliu-dev commented Apr 14, 2026 •

edited

Loading

changeset-bot bot commented Apr 14, 2026 •

edited

Loading

github-actions bot commented Apr 14, 2026 •

edited

Loading