Breadcrumbs : Add overflow menu for responsive behavior #6664

pksjce · 2025-08-25T11:48:50Z

Closes #https://github.com/github/primer/issues/5122

Changelog

Breadcrumbs now show an overflow menu with the following features

If no of items in the breadcrumbs is >5 then we show the menu
If the screen width can't accomodate the items then we show the menu
if overflow==="menu-with-root" show the root item.

https://www.loom.com/share/8902798416b741c9959fc7bb501185a5

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 (Learn more about how to run integration tests)

changeset-bot · 2025-08-25T11:48:55Z

🦋 Changeset detected

Latest commit: 2854259

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

This PR includes changesets to release 2 packages

Name	Type
@primer/react	Patch
@primer/styled-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 · 2025-08-25T11:49:21Z

👋 Hi, this pull request contains changes to the source code that github/github depends on. If you are GitHub staff, we recommend testing these changes with github/github using the integration workflow. Thanks!

github-actions · 2025-08-25T11:52:59Z

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	90.72 KB (+1% 🔺)
packages/react/dist/browser.umd.js	91.03 KB (+1.14% 🔺)

…m/primer/react into pk/breadcrumbs-with-overflow-menu

pksjce · 2025-09-01T12:14:46Z

Summary of changes since last review

@strackoverflow - Nice catch on the looping behavior. This is now resolved.
@francinelucca
- I have added the ally recommendations.
- Also added the feature flag - primer_react_breadcrumbs_overflow_menu
- Removed the extra changeset file
@joshblack
- I have fixed the issue of wrong update on saving the file
- Worked on the memoized resize calculation
- Used Details to implement disclosure pattern
- Changed the overflow property to have values menu and menu-with-root eliminating hideRoot boolean. cc- Thanks @siddharthkp
- Removed unnecessary slice
Notes on Accessibility improvements
ActionMenu has been replaced by an implementation using Details and Details.Summary.
aria-expanded property moves from false to true as required.
There are no more menuitem roles. All are li tags with the inbuilt role
The tooltip has been positioned on the right.
Esc and outside click will work to close the menu
Tabbing is continous inside and outside the menu without any focus traps.

Advice needed

Tabbing into the menubutton will not open it automatically nor Tabbing out will close it automatically. This was recommended in the session but did not seem standard to disclosure implementations eg UnderlineNav.

langermank

This is purely a CSS review! Will take a closer look at behavior next.

packages/react/src/Breadcrumbs/Breadcrumbs.module.css

packages/react/src/Breadcrumbs/Breadcrumbs.tsx

langermank · 2025-09-03T00:19:55Z

packages/react/src/Breadcrumbs/Breadcrumbs.module.css

+}
+
+.MenuOverlay {
+  position: absolute;


We need to have an offset between the trigger and the menu, but I'm not sure how you want to implement that with this custom overlay. The variable for this is var(--overlay-offset) which is 4px, so you might need to use a calc to achieve that.

packages/react/src/Breadcrumbs/Breadcrumbs.module.css

langermank · 2025-09-03T00:41:21Z

packages/react/src/Breadcrumbs/Breadcrumbs.tsx

    <BoxWithFallback as="nav" className={clsx(className, classes.BreadcrumbsBase)} aria-label="Breadcrumbs" sx={sxProp}>
      <BreadcrumbsList>{wrappedChildren}</BreadcrumbsList>
    </BoxWithFallback>
  )
 }

+const ItemSeparator = () => {
+  return (
+    <span className={classes.ItemSeparator}>


You might need some labeling on this for a11y support (just a hunch, would look it up)

It's not focusable. I'm not sure if the label is required. What would you expect in the label?
cc - @janmaarten-a11y

packages/react/src/Breadcrumbs/Breadcrumbs.module.css

pksjce added 22 commits August 25, 2025 21:46

Spike for breadcrumbs overflow

a7208d4

Add changeset for breadcrumbs overflow

54c9148

Add review comments and change behavior

dc5dac1

Fix up some issues.

7df321a

check for zero children

611d703

Fix bug with hideRoot

1a84b8a

Add test cases

c567b15

Add docs

35c0971

Breadcrumbs can have more stories

901ba0c

Add features stories for breadcrumbs

f8fd857

Add wrapped breadcrumbs in story

f415276

Fix for ssr and child key

68eba14

Add IconButton

f4bba96

Fix for SSR

b55755c

Fix for SSR

9477af7

Final changes for SSR

df9aa0f

Rework calculations

fcd8a8e

Tests are passing

0a09e45

Small fixes to menu button

3b9891a

Fix styling issues with button

273a055

Fix focus states

08637ae

Fix focus states

17a3107

Copilot AI review requested due to automatic review settings August 25, 2025 11:48

pksjce requested a review from a team as a code owner August 25, 2025 11:48

pksjce requested a review from francinelucca August 25, 2025 11:48

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 Aug 25, 2025

This comment was marked as spam.

Sign in to view

pksjce added 2 commits September 1, 2025 13:01

Merge branch 'pk/breadcrumbs-with-overflow-menu' of https://github.co…

a5b9c20

…m/primer/react into pk/breadcrumbs-with-overflow-menu

Delete .changeset/good-cougars-hug.md

bb5aa77

github-actions bot requested a deployment to storybook-preview-6664 September 1, 2025 03:05 Abandoned

Add different prop to hideRoot

b8063b8

pksjce deployed to github-pages September 1, 2025 03:14 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-6664 September 1, 2025 03:14 Inactive

pksjce added 3 commits September 1, 2025 16:08

Add tests

c7669d6

Merge branch 'pk/breadcrumbs-with-overflow-menu' of https://github.co…

5c3fc21

…m/primer/react into pk/breadcrumbs-with-overflow-menu

Merge branch 'main' into pk/breadcrumbs-with-overflow-menu

e2f34c5

github-actions bot requested a deployment to storybook-preview-6664 September 1, 2025 06:14 Abandoned

pksjce deployed to github-pages September 1, 2025 06:23 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-6664 September 1, 2025 06:24 Inactive

pksjce added 2 commits September 1, 2025 17:37

Fix lint and test issue

a7418b7

Merge branch 'pk/breadcrumbs-with-overflow-menu' of https://github.co…

7c2ced8

…m/primer/react into pk/breadcrumbs-with-overflow-menu

pksjce deployed to github-pages September 1, 2025 07:47 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-6664 September 1, 2025 07:48 Inactive

Dont use story in aat

0846a5a

pksjce deployed to github-pages September 1, 2025 07:58 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-6664 September 1, 2025 07:58 Inactive

Fix for aat

7df8356

pksjce deployed to github-pages September 1, 2025 08:09 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-6664 September 1, 2025 08:09 Inactive

Story color needs changed

92b813e

pksjce deployed to github-pages September 1, 2025 11:40 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-6664 September 1, 2025 11:40 Inactive

langermank reviewed Sep 3, 2025

View reviewed changes

Some css improvements

2854259

pksjce deployed to github-pages September 3, 2025 06:28 — with GitHub Actions View deployment

github-actions bot deployed to storybook-preview-6664 September 3, 2025 06:29 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Breadcrumbs : Add overflow menu for responsive behavior #6664

Breadcrumbs : Add overflow menu for responsive behavior #6664

Uh oh!

pksjce commented Aug 25, 2025 •

edited

Loading

Uh oh!

changeset-bot bot commented Aug 25, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Aug 25, 2025

Uh oh!

This comment was marked as spam.

Uh oh!

github-actions bot commented Aug 25, 2025 •

edited

Loading

Uh oh!

pksjce commented Sep 1, 2025 •

edited

Loading

Uh oh!

langermank left a comment

Uh oh!

Uh oh!

Uh oh!

langermank Sep 3, 2025

Uh oh!

Uh oh!

Uh oh!

langermank Sep 3, 2025

Uh oh!

pksjce Sep 3, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Breadcrumbs : Add overflow menu for responsive behavior #6664

Are you sure you want to change the base?

Breadcrumbs : Add overflow menu for responsive behavior #6664

Uh oh!

Conversation

pksjce commented Aug 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changelog

New

Changed

Removed

Rollout strategy

Testing & Reviewing

Merge checklist

Uh oh!

changeset-bot bot commented Aug 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions bot commented Aug 25, 2025

Uh oh!

This comment was marked as spam.

Uh oh!

github-actions bot commented Aug 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

size-limit report 📦

Uh oh!

pksjce commented Sep 1, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

langermank left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

langermank Sep 3, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

langermank Sep 3, 2025

Choose a reason for hiding this comment

Uh oh!

pksjce Sep 3, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

pksjce commented Aug 25, 2025 •

edited

Loading

changeset-bot bot commented Aug 25, 2025 •

edited

Loading

github-actions bot commented Aug 25, 2025 •

edited

Loading

pksjce commented Sep 1, 2025 •

edited

Loading