Breadcrumbs : Add overflow menu for responsive behavior #6561

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Closed

pksjce wants to merge 64 commits into main from pk/breadcrumbs

Contributor

pksjce commented Aug 11, 2025 •

edited

Loading

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 hideRoot is false then we show the root/overflow menu/leaf

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 bot commented Aug 11, 2025 •

edited

Loading

🦋 Changeset detected

Latest commit: a34f53f

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 bot added the integration-tests: recommended label

Contributor

github-actions bot commented Aug 11, 2025

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

Contributor

github-actions bot commented Aug 11, 2025 •

edited

Loading

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	90.85 KB (+0.92% 🔺)
packages/react/dist/browser.umd.js	90.96 KB (+0.82% 🔺)

pksjce deployed to github-pages

August 11, 2025 07:22

— with

GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-6561

August 11, 2025 07:23

Inactive

pksjce deployed to github-pages

August 11, 2025 12:53

— with

GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-6561

August 11, 2025 12:53

Inactive

pksjce deployed to github-pages

August 11, 2025 13:01

— with

GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-6561

August 11, 2025 13:01

Inactive

pksjce deployed to github-pages

August 12, 2025 05:49

— with

GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-6561

August 12, 2025 05:50

Inactive

github-actions bot requested a deployment to storybook-preview-6561

August 13, 2025 07:00

Abandoned

pksjce force-pushed the pk/breadcrumbs branch from 04fa5f5 to df369ce Compare

August 13, 2025 07:07

pksjce marked this pull request as ready for review

August 13, 2025 07:07

Copilot AI review requested due to automatic review settings

August 13, 2025 07:07

pksjce requested a review from a team as a code owner

August 13, 2025 07:07

pksjce requested a review from TylerJDev

August 13, 2025 07:07

pksjce changed the title ~~Spike for breadcrumbs overflow~~ Breadcrumbs : Add overflow menu for responsive behavior

github-actions bot requested a deployment to storybook-preview-6561

August 13, 2025 07:09

Abandoned

Copilot AI reviewed

View reviewed changes

Contributor

Copilot AI left a comment

Pull Request Overview

This PR implements overflow handling for the Breadcrumbs component to manage cases where breadcrumb items exceed container width or count limits. The implementation adds a menu-based overflow system that intelligently hides intermediate breadcrumb items behind an ellipsis menu.

Key Changes

Added overflow prop with 'wrap' (default) and 'menu' modes for different overflow behaviors
Implemented responsive overflow logic that adapts to container width using ResizeObserver
Added hideRoot prop to control whether the first breadcrumb item should be preserved when overflowing

Reviewed Changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 5 comments.

File	Description
packages/react/src/Breadcrumbs/Breadcrumbs.tsx	Core implementation adding overflow detection, menu creation, and responsive breadcrumb management
packages/react/src/Breadcrumbs/Breadcrumbs.stories.tsx	New Storybook stories demonstrating different overflow scenarios and configurations
packages/react/src/Breadcrumbs/Breadcrumbs.module.css	CSS updates to prevent wrapping when menu overflow is enabled
.changeset/good-cougars-hug.md	Changeset file for tracking this feature addition

_{You can also share your feedback on Copilot code review for a chance to win a $100 gift card. Take the survey.}

packages/react/src/Breadcrumbs/Breadcrumbs.tsx Outdated

+                      if (listElement && listElement.children.length > 0 && itemWidths.length === 0) {
+                        const widths = Array.from(listElement.children).map(child => (child as HTMLElement).offsetWidth)
+                        setItemWidths(widths)
+                      }

Preview

Copilot AI Aug 13, 2025

The width calculation runs inside the overflow calculation effect, which could cause performance issues during frequent resizes. Consider memoizing the width calculation or moving it to a separate effect that only runs when the DOM structure changes.

Suggested change

}

Copilot uses AI. Check for mistakes.

packages/react/src/Breadcrumbs/Breadcrumbs.tsx Outdated

+                        const widths = Array.from(listElement.children).map(child => (child as HTMLElement).offsetWidth)
+                        setItemWidths(widths)
+                      }
+                      const MENU_BUTTON_WIDTH = 50 // Approximate width of "..." button

Preview

Copilot AI Aug 13, 2025

Using a magic number for the menu button width makes the code fragile. Consider calculating this dynamically or defining it as a named constant at the module level with documentation explaining how this value was determined.

Suggested change

      
                    const MENU_BUTTON_WIDTH = 50 // Approximate width of "..." button
          
                    // Use module-level MENU_BUTTON_WIDTH constant (see top of file)

Copilot uses AI. Check for mistakes.

packages/react/src/Breadcrumbs/Breadcrumbs.tsx Outdated

+                        // Target: 4 visible items + 1 menu = 5 total
+                        const itemsToHide = childArray.slice(0, childArray.length - 4)
+                        currentMenuItems = itemsToHide
+                        currentVisibleItems = childArray.slice(childArray.length - 4)

Preview

Copilot AI Aug 13, 2025

The hardcoded value of 5 items should be extracted as a configurable constant. This makes the component more flexible and the business logic clearer.

Suggested change

      
                      currentVisibleItems = childArray.slice(childArray.length - 4)
          
                    // If more than DEFAULT_MAX_VISIBLE_BREADCRUMBS items, start by reducing to max visible items (including menu)
          
                    if (childArray.length > DEFAULT_MAX_VISIBLE_BREADCRUMBS) {
          
                      // Target: (max - 1) visible items + 1 menu = max total
          
                      const itemsToHide = childArray.slice(0, childArray.length - (DEFAULT_MAX_VISIBLE_BREADCRUMBS - 1))
          
                      currentMenuItems = itemsToHide
          
                      currentVisibleItems = childArray.slice(childArray.length - (DEFAULT_MAX_VISIBLE_BREADCRUMBS - 1))

Copilot uses AI. Check for mistakes.

packages/react/src/Breadcrumbs/Breadcrumbs.tsx Outdated

+                    setMenuItems(result.menuItems)
+                    setEffectiveHideRoot(result.effectiveHideRoot)
+                  }
+                }, [childArray, overflow, containerWidth, hideRoot, itemWidths])

This comment was marked as resolved.

Sign in to view

packages/react/src/Breadcrumbs/Breadcrumbs.tsx

+                const handleResize = useCallback((entries: ResizeObserverEntry[]) => {
+                  if (entries[0]) {
+                    setContainerWidth(entries[0].contentRect.width)
+                  }

This comment was marked as resolved.

Sign in to view

pksjce deployed to github-pages

August 13, 2025 07:18

— with

GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-6561

August 13, 2025 07:18

Inactive

github-actions bot temporarily deployed to storybook-preview-6561

August 13, 2025 12:24

Inactive

pksjce requested review from strackoverflow and langermank

August 13, 2025 12:28

github-actions bot requested a deployment to storybook-preview-6561

August 13, 2025 12:31

Abandoned

pksjce deployed to github-pages

August 13, 2025 12:40

— with

GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-6561

August 13, 2025 12:40

Inactive

github-actions bot temporarily deployed to storybook-preview-6561

August 13, 2025 13:42

Inactive

joshblack and others added 20 commits

August 25, 2025 12:11


          chore(migration): update styled-components migration script (#6640)

db0a421


          feat(styled-react): add all components as exports (#6612)

faff5ae


          chore(deps-dev): bump the storybook group with 5 updates (#6621)

690cf75

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: primer[bot] <119360173+primer[bot]@users.noreply.github.com>
Co-authored-by: Josh Black <[email protected]>


          Fix flaky test for SelectPanel vrt (#6623)

9f7655d

Co-authored-by: Jon Rohan <[email protected]>


          Remove deprecated AvatarPair component (#6595)

e99fb5d

Co-authored-by: copilot-swe-agent[bot] <[email protected]>
Co-authored-by: pksjce <[email protected]>
Co-authored-by: Pavithra Kodmad <[email protected]>
Co-authored-by: Jon Rohan <[email protected]>


          Migrate SelectPanel.features.stories.tsx from styled-components to CS…

68ec9a9

…S modules (#6508)

Co-authored-by: copilot-swe-agent[bot] <[email protected]>
Co-authored-by: hectahertz <[email protected]>
Co-authored-by: Hector Garcia <[email protected]>
Co-authored-by: Josh Black <[email protected]>


          Fix npm audit issues (#6648)

8f4f149


          chore(deps): update playwright to 1.55.0 (#6638)

32532ca


          fix(styled-react): update types output (#6649)

9b4c7a1

Co-authored-by: Copilot <[email protected]>


          Remove TypeScript ESLint plugins from package.json (#6472)

8f08bf5

Co-authored-by: primer[bot] <119360173+primer[bot]@users.noreply.github.com>
Co-authored-by: Jon Rohan <[email protected]>
Co-authored-by: Marie Lucca <[email protected]>


          Remove support for sx from ActionMenu component (#6626)

5520ce8


          Remove sx support from SplitPageLayout component (#6613)

bf13548


          Remove support for sx from AnchoredOverlay component (#6628)

65f0e8b


          Remove support for sx from Autocomplete component (#6629)

dd41923


          Update Overlay.stories.tsx to no longer use styled-components (#6494)

e5e5f1a

Co-authored-by: copilot-swe-agent[bot] <[email protected]>
Co-authored-by: hectahertz <[email protected]>
Co-authored-by: Hector Garcia <[email protected]>
Co-authored-by: Copilot <[email protected]>
Co-authored-by: Josh Black <[email protected]>


          test(e2e): skip flaky test (#6650)

31fac51


          chore(deps): update typescript to 5.9.2 (#6637)

129a753

Co-authored-by: Marie Lucca <[email protected]>


          chore(deps-dev): bump the eslint group with 7 updates (#6619)

3b11ca6

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Marie Lucca <[email protected]>
Co-authored-by: Marie Lucca <[email protected]>
Co-authored-by: Josh Black <[email protected]>


          Fix focus states

87488bb


          Fix focus states

0d61e88

pksjce added the update snapshots label


          Merge branch 'main' into pk/breadcrumbs

660dd11

github-actions bot requested a deployment to storybook-preview-6561

August 25, 2025 07:12

Abandoned


          test(vrt): update snapshots

a34f53f

github-actions bot removed the update snapshots label

github-actions bot temporarily deployed to storybook-preview-6561

August 25, 2025 07:19

Inactive

primer bot deployed to github-pages

August 25, 2025 07:29

View deployment

github-actions bot deployed to storybook-preview-6561

August 25, 2025 07:30

View deployment

Contributor Author

pksjce commented Aug 25, 2025

I've messed up this PR beyond repair. I will cherrypick my commits and open a new one

pksjce closed this

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

joshblack joshblack left review comments

Copilot code review Copilot Copilot left review comments

TylerJDev Awaiting requested review from TylerJDev TylerJDev is a code owner automatically assigned from primer/engineer-reviewers

strackoverflow Awaiting requested review from strackoverflow

langermank Awaiting requested review from langermank langermank is a code owner automatically assigned from primer/design-reviewers

Labels

integration-tests: recommended