Breadcrumb: Add UI component

[ciampo]

What?

Closes #77039.

Adds a responsive Breadcrumb compound component to @wordpress/ui.

Why?

Consumers need a routing-agnostic breadcrumb trail that remains usable when space is limited.

How?

• Exposes the singular Breadcrumb.Root, Breadcrumb.LinkItem, and Breadcrumb.CurrentItem API from the singular breadcrumb source module.
• Renders semantic breadcrumb links and a current item.
• Collapses ancestor links into Menu while keeping the current item visible.
• Uses the shared small Button for overflow and shared component styles in the inert measurement copy.
• Supports truncated-label tooltips, custom link rendering, RTL, and focus preservation.

Testing Instructions

1. Start Storybook with npm run storybook:dev and open Design System / Components / Breadcrumb.
2. Resize Responsive States and confirm links move into the overflow menu while the current item stays visible.
3. Confirm the overflow trigger does not change the trail height or clip its focus outline.
4. Check the overflow order, RTL example, truncated-label tooltips, and router-link example.

Testing Instructions for Keyboard

1. Tab through the trail and open the overflow menu with Enter or Space.
2. Navigate with arrow keys, close with Escape, and confirm focus remains visible while resizing.

Screenshots or screencast

Kapture.2026-07-17.at.23.25.25.mp4

Use of AI Tools

Codex assisted with implementation, tests, and self-review. I reviewed and verified the changes locally.

[github-actions]

Size Change: +3.25 kB (+0.04%)

Total Size: 7.92 MB

📦 View Changed

Filename	Size	Change
build/modules/boot/index.min.js	57.7 kB	-536 B (-0.92%)
build/scripts/block-directory/index.min.js	44 kB	+9 B (+0.02%)
build/scripts/block-editor/index.min.js	478 kB	+351 B (+0.07%)
build/scripts/block-library/index.min.js	371 kB	+122 B (+0.03%)
build/scripts/components/index.min.js	266 kB	+100 B (+0.04%)
build/scripts/edit-post/index.min.js	52.7 kB	+9 B (+0.02%)
build/scripts/edit-site/index.min.js	382 kB	+1.43 kB (+0.37%)
build/scripts/editor/index.min.js	581 kB	+760 B (+0.13%)
build/scripts/format-library/index.min.js	39.9 kB	+366 B (+0.93%)
build/scripts/media-utils/index.min.js	200 kB	+549 B (+0.28%)
build/scripts/patterns/index.min.js	12.4 kB	+96 B (+0.78%)

_{compressed-size-action}

[github-actions]

Flaky tests detected in 06abee7.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/33389075567
📝 Reported tests:

Should navigate inner blocks with arrow keys in /test/e2e/specs/editor/various/writing-flow.spec.js, passed after 1 failed attempt.

TimeoutError: locator.click: Timeout 10000ms exceeded.
Call log:
  - waiting for getByRole('listbox', { name: 'Blocks' }).getByRole('option', { name: 'Paragraph' })

    at WritingFlowUtils.addDemoContent (/home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/various/writing-flow.spec.js:1482:5)
    at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/various/writing-flow.spec.js:30:3

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Unlinked Accounts

The following contributors have not linked their GitHub and WordPress.org accounts: @abd-RAHEEM.

Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Unlinked contributors: abd-RAHEEM.

Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
Co-authored-by: aduth <aduth@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[ciampo]

Also cc @grbicsanja as she co-authored the initial specs in #76709

[mirka]

Could you also take another look at the common.css defense? Some of our styles seem to be losing.

[ciampo]

Could you also take another look at the common.css defense? Some of our styles seem to be losing.

Extended the global CSS defense to ol and li. Can you stil see other common.ccs style leaks?

I also applied a few smaller improvements:

• fixed a few bugs with focus management (focusing while resizing, not losing focus while the previously focused item should collapse on resize..)
• improved intrinsic measument (it now takes the openInNew indicator into account, and supports custom renderers, all while trying to stay as close as possible to the visible react tree)

[ciampo]

One aspect that we may want to review is how to highlight a selected item when it's collapsed in a "..." menu, right now we don't have a way to signal that (cc @WordPress/gutenberg-design )

Edit: this is actually a non-issue, since the "current" page will never end up in the collapsed menu by design.

[mirka]

The ol/li defense covers the remaining common.css rules that hit this DOM. ol { list-style-type: decimal; margin-left: 2em }, ul, ol { padding: 0 }, and li, dd { margin-bottom: 6px }. I don't see another unlayered admin selector that would still win on the breadcrumb tree.

Earlier notes look addressed. Type export, openInNewTab, jest-console, and the use-with-caution manifest tag.

[ciampo]

Thank you! Given that is not recommended (and not used anywhere), we can merge and iterate as we go.

@simison , let's coordinate re. next steps in using Breadcrumb in admin ui

[mirka]

Woah, I'm experimenting with some new agent setups and it did an approval post without my explicit permission 😅

In this case it was fine, but I'll add some guardrails for this. Sorry if the text read as less human than usual.

[ciampo]

No worries about it, we're all experimenting with new tools.

Please leave feedback if you have more and I'll follow-up in a new PR.