Visitar URL original
USWDS - Breadcrumb: Wrap by default instead of truncating by AKnassa · Pull Request #6722 · uswds/uswds · GitHub
Skip to content

USWDS - Breadcrumb: Wrap by default instead of truncating - #6722

Merged
annepetersen merged 4 commits into
uswds:developfrom
AKnassa:6689-breadcrumb-wrap-by-default
Jul 28, 2026
Merged

annepetersen merged 4 commits into
uswds:developfrom
AKnassa:6689-breadcrumb-wrap-by-default

Conversation

@AKnassa

@AKnassa AKnassa commented Jun 21, 2026 •

Copy link
Copy Markdown
Contributor

Summary

In one breath: Long breadcrumb trails used to get cut off with a "…". Now they wrap to the next line, so you can always read the whole path — even when you zoom in or make text bigger.

Breadcrumbs now wrap by default instead of truncating. The old single-line, cut-off style is still available as an opt-in usa-breadcrumb--truncate variant.

Breaking change

This is potentially a breaking change.

Existing breadcrumbs that showed one clipped line will now wrap to more than one line, so the component can get a little taller. Easy to adjust:

  • Want the old single-line look back? Add usa-breadcrumb--truncate.
  • Using usa-breadcrumb--wrap today? You can remove it — wrapping is the default now (the class still works, it just doesn't do anything).

Related issue

Closes #6689

Related pull requests

A small companion docs update in uswds-site is still needed (the component's variant list). Not opened yet.

Problem

By default, long breadcrumbs were squeezed onto one line and cut off with a "…". When someone zoomed in or enlarged text, even more of the trail vanished — usually the most useful part (the current page and its parent). The hidden text stays in the page for screen readers, so this mostly hurts sighted people who zoom, magnify, or use voice control.

Solution

Make wrapping the default. USWDS already shipped this behavior as the usa-breadcrumb--wrap variant, so this just promotes it to the default and moves the old truncation behind a new opt-in usa-breadcrumb--truncate class. It's CSS only — markup and ARIA are unchanged.

Testing

  • npm run lint, npm run test:sass, and prettier all pass.
  • New Storybook play tests pass, and axe-core finds 0 violations on both stories.
  • To check by hand: npm start → Components → Breadcrumb. Zoom or narrow the Default story → it wraps and nothing is cut off. The Truncate story still clips, on purpose.

Breadcrumbs now wrap to multiple lines by default so the full trail stays
visible at high zoom and large text sizes, resolving the WCAG 1.4.4 / 1.4.10
truncation concern. The legacy single-line ellipsis behavior moves to an
opt-in .usa-breadcrumb--truncate variant, and .usa-breadcrumb--wrap is
deprecated to a no-op (existing markup still wraps). Adds Storybook play-tests
that guard the behavior against regression.

Closes uswds#6689
@chandracarney chandracarney added Affects: Accessibility 🟡 Affects access for disabled users or assistive tech. Record the barrier; not a severity score. Role: A11Y A11Y expertise is relevant. Project Active Role tracks ownership; this label is not an assignment. labels Jun 30, 2026
@chandracarney chandracarney added the Package: Breadcrumb Work affecting Breadcrumb. Apply only when this area helps route or find the issue. label Jun 30, 2026

@iamjolly iamjolly left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks like really good work @AKnassa, and I appreciate (and agree with) the thinking behind this PR to change the default to be more accessible and usable.

Since this is a potential breaking change, I want us to be deliberate and thoughtful about introducing this into the system. I don't know if this will cause problems or headaches for many, so I'll look for input from @annepetersen, @chandracarney, @ethangardner, and others before this is fully approved and merged.

Some questions I'm thinking about are:

  • Do we have any numbers on sites using USWDS (this version) that may be impacted?
  • How should we communicate this change so that there is clarity for implementors on problems to look for and how to address them?
  • If the number of sites using the current version is below a certain threshold, should we publish now with the appropriate caveats/documentation addressed in the previous question?

@annepetersen

Copy link
Copy Markdown
Contributor

Agreed with @iamjolly: thanks for this, and I also don't love truncation. Truncation, as Karen McGrane so memorably puts it, is not a content strategy.

But I also agree with @iamjolly in terms of needing to anticipate possible pain points for teams adopting versions of the design system that don't behave like they used to. In the interest of that:

  • Do we have any numbers on sites using USWDS (this version) that may be impacted?

No firm numbers that I have on hand at the moment, but to broad-brush this, we know that a majority of the federal-level sites using USWDS we can track that list a version number (the vast majority do not, I should note) are using version 2.0 or earlier. (I know, I know: I'd very much like that to be different too.)

Then keep in mind that not every team will update right away — there seems to be a tendency to batch version changes, from my memory of the research on the subject. Then keep in mind that many teams that could ingest this may be shortstaffed, which speaks both to updating being potentially a low priority, and also the care with which they may look at the changes involved (this item could go either way, to be honest).

  • How should we communicate this change so that there is clarity for implementors on problems to look for and how to address them?

Great question: in the past USWDS has had more options available. The monthly call was certainly a primary venue, plus the newsletter, plus the public Slack channel, plus of course the release notes. It's possible to announce through some but not all of these, considering current staffing, unless someone in the community wants to step in to help.

  • If the number of sites using the current version is below a certain threshold, should we publish now with the appropriate caveats/documentation addressed in the previous question?

So just now I pulled up the metrics that I do have available (that's a protected link, but anyone could fetch the info separately: thank you Site Scanning), and again, big caveat that these are only the sites that list a version number, but the grand total of sites tracked there that are using 3.10.0 or later is... 49. And a solid majority of those are TTS- or GSA-based sites, whose teams are much easier to communicate with.

So, long and short, definitely glad we're considering this together, but in this case I think the stats point toward being in fairly good shape to make this change, as long as there's some careful consideration to communication involved. (Which is, in the end, my responsibility.)

@github-actions

Copy link
Copy Markdown
Contributor

✅ All commits on this PR have a verified signature. Thanks!

@annepetersen
annepetersen self-requested a review July 14, 2026 16:23
annepetersen
annepetersen previously approved these changes Jul 14, 2026

@annepetersen annepetersen left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Per my previous novel of a comment 😆, I'm prepared to move forward on this one as long as @ethangardner or @jonathanbobel can also give it a thorough review

@jonathanbobel

Copy link
Copy Markdown
Contributor

I think this looks good. I appreciate the .usa-breadcrumb--truncate fallback. Approved.

jonathanbobel
jonathanbobel previously approved these changes Jul 27, 2026
@annepetersen

Copy link
Copy Markdown
Contributor

Will just need to resolve these conflicts first 👇

package-lock.json
package.json

Resolve package.json conflict by keeping Storybook 9 from develop and
updating breadcrumb play tests to import expect from storybook/test.

Co-authored-by: Cursor <cursoragent@cursor.com>
@jonathanbobel
jonathanbobel dismissed stale reviews from annepetersen and themself via 9caba77 July 27, 2026 20:28
@jonathanbobel

Copy link
Copy Markdown
Contributor

@annepetersen need your approval one more time since I did the last commit

@annepetersen
annepetersen merged commit 3ad6ebf into uswds:develop Jul 28, 2026
6 checks passed
@github-project-automation github-project-automation Bot moved this from Triage to Fed Final Review in USWDS Core Project Data Jul 28, 2026
@AKnassa
AKnassa deleted the 6689-breadcrumb-wrap-by-default branch July 28, 2026 16:06
@ethangardner ethangardner added this to the uswds 3.14.0 - Aug 2026 milestone Aug 4, 2026
@annepetersen annepetersen added the ❤️ Thanks Historical appreciation marker. Prefer a reaction; not required for triage. label Aug 5, 2026
@chandracarney chandracarney moved this from Fed Final Review to Done in USWDS Core Project Data Aug 21, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Affects: Accessibility 🟡 Affects access for disabled users or assistive tech. Record the barrier; not a severity score. Package: Breadcrumb Work affecting Breadcrumb. Apply only when this area helps route or find the issue. Role: A11Y A11Y expertise is relevant. Project Active Role tracks ownership; this label is not an assignment. ❤️ Thanks Historical appreciation marker. Prefer a reaction; not required for triage.

Projects

No open projects
Status: Done

Development

Successfully merging this pull request may close these issues.

USWDS - Bug: Breadcrumbs become truncated and lose meaning when text is enlarged

6 participants