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: 54b4a40

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.

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

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


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


francinelucca

approving with non-blocking comments!

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

+'@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 🤔

Could you clarify what you mean by "default" here? 👀

right now the default is overflow="wrap", but part of me feels like it should be overflow="menu"

I see! probably a separate PR since this might change people's expectation, I'll keep it as is for this PR

primer-integration · 2026-04-15T20:34:43Z

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

primer-integration · 2026-04-15T20:43:35Z

Integration test results from github/github-ui:

CI Passed
VRT Passed
Projects Passed

All checks passed!

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 temporarily deployed to storybook-preview-7754 April 14, 2026 22:04 Inactive

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

if else blcok

9b01280

liuliu-dev deployed to github-pages April 15, 2026 18:47 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-7754 April 15, 2026 18:48 Inactive

Merge branch 'main' into liuliu/breadcrumbs-narrow-viewport

54b4a40

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

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

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

Merged via the queue into main with commit 9e3fe4b Apr 15, 2026
53 checks passed

liuliu-dev deleted the liuliu/breadcrumbs-narrow-viewport branch April 15, 2026 21:05

primer bot mentioned this pull request Apr 15, 2026

Release tracking #7761

Open

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 merged 7 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!

Copilot AI left a comment

Uh oh!

francinelucca left a comment

Uh oh!

Uh oh!

francinelucca Apr 15, 2026

Uh oh!

liuliu-dev Apr 15, 2026

Uh oh!

francinelucca Apr 15, 2026

Uh oh!

liuliu-dev Apr 15, 2026

Uh oh!

primer-integration bot commented Apr 15, 2026

Uh oh!

primer-integration bot commented Apr 15, 2026

Uh oh!

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!

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!

Uh oh!

francinelucca Apr 15, 2026

Choose a reason for hiding this comment

Uh oh!

liuliu-dev 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!

liuliu-dev Apr 15, 2026

Choose a reason for hiding this comment

Uh oh!

primer-integration bot commented Apr 15, 2026

Uh oh!

primer-integration bot commented Apr 15, 2026

Uh oh!

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