fix(breadcrumbs): update tokens and icons by jcmill · Pull Request #8259 · patternfly/patternfly

jcmill · 2026-03-27T15:29:27Z

Closes #8185

This PR updates to the Breadcrumb component and related MenuToggle component:

Breadcrumb Component:

Added CSS variables for breadcrumb links (default and hover states)
Applied the new decoration color tokens to breadcrumb link styles

MenuToggle Component:

Updated the pf-m-plain modifier to use pill-shaped border radius by default
The pill shape is now the default styling for plain menu toggles (no separate pf-m-pill variant needed)
Uses semantic token for the circular border radius
Updated icon system from Font Awesome to PatternFly icons

Summary by CodeRabbit

Style
- Breadcrumb font size now uses the global body default
- Breadcrumb link underlines follow theme variables and switch on hover/focus
- Menu toggle default icon updated to the PatternFly icon system
- Menu toggle plain variant border radius adjusted to match action plain styling
Documentation
- Breadcrumb example badge state updated (unread → read)

…toggle

coderabbitai · 2026-03-27T15:29:51Z

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

@coderabbitai resume to resume automatic reviews.
@coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

▶️ Resume reviews
🔍 Trigger review

Walkthrough

Updated Breadcrumb and MenuToggle templates and styles: breadcrumb font-size token changed to global default, added text-decoration-color variables with hover/focus variants; breadcrumb example badge modifier toggled to pf-m-read; MenuToggle fallback icon switched to pfIcon and pf-m-plain border-radius token updated.

Changes

Cohort / File(s)	Summary
Breadcrumb Styles `src/patternfly/components/Breadcrumb/breadcrumb.scss`	Changed breadcrumb item font-size token from `--pf-t--global--font--size--body--sm` → `--pf-t--global--font--size--body--default`. Added `--__link--TextDecorationColor` and `--__link--hover--TextDecorationColor` variables mapped to global text-decoration color tokens and applied hover/focus switching.
Breadcrumb Example `src/patternfly/components/Breadcrumb/examples/Breadcrumb.md`	In "With menu dropdown" example, badge modifier changed from `pf-m-unread` → `pf-m-read`.
MenuToggle Template `src/patternfly/components/MenuToggle/menu-toggle-toggle-icon.hbs`	Replaced fallback Font Awesome `<i class="fas fa-caret-down ...">` with `{{pfIcon "rh-microns-caret-down-fill"}}`.
MenuToggle Styles `src/patternfly/components/MenuToggle/menu-toggle.scss`	Updated `pf-m-plain` exported CSS custom property `--#{$menu-toggle}--m-plain--BorderRadius` to use `--pf-t--global--border--radius--action--plain--default` instead of control token.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

fix: updated with tokens for menu and menu toggle with unified changes #8195 — modifies the same menu-toggle.scss border-radius variable and related MenuToggle token changes.
fix(icons): updated carets to rh micron #8176 — updates breadcrumb and menu-toggle iconography and styling tokens, overlapping with these edits.
chore: fixes some broken icon names #8177 — adjusts MenuToggle icon templates (fallback icon changes/RTL), related to the template change here.

Suggested labels

Needs react follow up, released on @prerelease``

Suggested reviewers

srambach
mcoker
bekah-stephens

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title follows conventional commit guidelines with 'fix' type and concise summary, though it is somewhat broad for covering changes to both breadcrumbs and menu toggles.
Linked Issues check	✅ Passed	The PR implements all primary objectives from issue `#8185`: aligns breadcrumb link decoration colors with design tokens, updates menu toggle border-radius for pill styling, uses semantic tokens, and replaces Font Awesome icons with PatternFly icons.
Out of Scope Changes check	✅ Passed	All changes are directly aligned with issue `#8185` objectives: breadcrumb token updates, menu toggle styling changes, and icon system updates; no unrelated changes detected.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

patternfly-build · 2026-03-27T15:33:17Z

Preview: https://pf-pr-8259.surge.sh

A11y report: https://pf-pr-8259-a11y.surge.sh

coderabbitai

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

src/patternfly/components/Breadcrumb/breadcrumb.scss (1)
79-90: ⚠️ Potential issue | 🟠 Major

Replace deprecated word-break: break-word on line 89 with the CSS standard replacement.

The word-break: break-word property is deprecated per the W3C CSS Text Module specification and is flagged by stylelint. Modern browsers and validators recommend using overflow-wrap: anywhere combined with word-break: normal as the equivalent replacement.
♻️ Proposed fix
 .#{$breadcrumb}__link {
   text-decoration-color: var(--#{$breadcrumb}__link--TextDecorationColor);
-  word-break: break-word;
+  overflow-wrap: anywhere;
+  word-break: normal;
   background-color: var(--#{$breadcrumb}__link--BackgroundColor);
Note: At least 13 other components in the codebase have the same deprecated property and should be updated similarly.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/patternfly/components/Breadcrumb/breadcrumb.scss` around lines 79 - 90,
In .#{$breadcrumb}__link replace the deprecated declaration "word-break:
break-word" with the modern equivalent by setting "word-break: normal" and
adding "overflow-wrap: anywhere" to preserve the intended wrapping behavior;
update the rules inside the .#{$breadcrumb}__link block (and apply the same
change to the other components that use word-break: break-word) so
stylelint/W3C-compliant properties are used.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Outside diff comments:
In `@src/patternfly/components/Breadcrumb/breadcrumb.scss`:
- Around line 79-90: In .#{$breadcrumb}__link replace the deprecated declaration
"word-break: break-word" with the modern equivalent by setting "word-break:
normal" and adding "overflow-wrap: anywhere" to preserve the intended wrapping
behavior; update the rules inside the .#{$breadcrumb}__link block (and apply the
same change to the other components that use word-break: break-word) so
stylelint/W3C-compliant properties are used.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI (base), Organization UI (inherited)

Review profile: CHILL

Plan: Pro

Run ID: 3d1381c8-4730-407e-9bca-62ca09f4001b

📥 Commits

Reviewing files that changed from the base of the PR and between af40892 and 3d54365.

📒 Files selected for processing (5)

src/patternfly/components/Breadcrumb/breadcrumb.scss
src/patternfly/components/Breadcrumb/examples/Breadcrumb.md
src/patternfly/components/MenuToggle/menu-toggle-toggle-icon.hbs
src/patternfly/components/MenuToggle/menu-toggle.hbs
src/patternfly/components/MenuToggle/menu-toggle.scss

bekah-stephens

the only thing I noticed is that the breadcrumb text looks a little small. it looks like it's still 12 px, but should now be 14 px (Body/Default/Regular)

coderabbitai

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/patternfly/components/MenuToggle/menu-toggle.scss`:
- Around line 152-153: The small padding variables
(--#{$menu-toggle}--m-plain--m-small--PaddingInlineStart /
--#{$menu-toggle}--m-plain--m-small--PaddingInlineEnd) are defined but never
applied by the .pf-m-small modifier; update the .pf-m-small rule (or the plain
small mapping) so that .pf-m-small maps
--#{$menu-toggle}--m-small--PaddingInlineStart and
--#{$menu-toggle}--m-small--PaddingInlineEnd to the small values (or directly
set the element's --#{$menu-toggle}--PaddingInlineStart/End from the
--m-plain--m-small variables) so the small horizontal padding is actually used
by the menu toggle.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

Push a commit to this branch (recommended)
Create a new PR with the fixes

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI (base), Organization UI (inherited)

Review profile: CHILL

Plan: Pro

Run ID: 4544f8c6-24b3-4a68-a14c-4aa5cd9b96a7

📥 Commits

Reviewing files that changed from the base of the PR and between 3d54365 and d9149f4.

📒 Files selected for processing (2)

src/patternfly/components/Breadcrumb/examples/Breadcrumb.md
src/patternfly/components/MenuToggle/menu-toggle.scss

🚧 Files skipped from review as they are similar to previous changes (1)

src/patternfly/components/Breadcrumb/examples/Breadcrumb.md

coderabbitai

🧹 Nitpick comments (1)

src/patternfly/components/Breadcrumb/breadcrumb.scss (1)
89-89: Pre-existing: break-word is deprecated for word-break.

Stylelint flags word-break: break-word as deprecated. While this isn't part of the current changes, consider updating to the modern equivalent if touching this area in the future:
-  word-break: break-word;
+  overflow-wrap: break-word;
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/patternfly/components/Breadcrumb/breadcrumb.scss` at line 89, Replace the
deprecated rule in breadcrumb.scss: change the usage of "word-break: break-word"
to the modern equivalent by setting "overflow-wrap: anywhere" and ensure
"word-break" is set to "normal" (i.e., replace the single deprecated declaration
with overflow-wrap: anywhere; and word-break: normal; in
src/patternfly/components/Breadcrumb/breadcrumb.scss where the word-break:
break-word rule appears).

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@src/patternfly/components/Breadcrumb/breadcrumb.scss`:
- Line 89: Replace the deprecated rule in breadcrumb.scss: change the usage of
"word-break: break-word" to the modern equivalent by setting "overflow-wrap:
anywhere" and ensure "word-break" is set to "normal" (i.e., replace the single
deprecated declaration with overflow-wrap: anywhere; and word-break: normal; in
src/patternfly/components/Breadcrumb/breadcrumb.scss where the word-break:
break-word rule appears).

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI (base), Organization UI (inherited)

Review profile: CHILL

Plan: Pro

Run ID: 14152371-95e8-499b-9221-6a266fda92ef

📥 Commits

Reviewing files that changed from the base of the PR and between d9149f4 and b6b1000.

📒 Files selected for processing (1)

src/patternfly/components/Breadcrumb/breadcrumb.scss

mcoker

LGTM!

mcoker

Oops I missed one thing in the review. Looks like there is one more element that needs a font-size update.

mcoker · 2026-04-09T19:31:17Z

I think this should be default, too. You can see it here - https://pf-pr-8259.surge.sh/components/breadcrumb#with-heading

Suggested change

--#{$breadcrumb}__heading--FontSize: var(--pf-t--global--font--size--body--default);

Or you could try setting it to --#{$breadcrumb}__item--FontSize, which means it will just match whatever the breadrumb item font-size is, which I think is the point. Seems like this would be better, assuming it works everywhere.

patternfly-build · 2026-04-09T20:37:22Z

🎉 This PR is included in version 6.5.0-prerelease.66 🎉

The release is available on:

Your semantic-release bot 📦🚀

check and update tokens and icons, add pill variant to dropdown menu …

3d54365

…toggle

jcmill requested review from bekah-stephens, mcoker and srambach March 27, 2026 15:29

coderabbitai Bot reviewed Mar 27, 2026

View reviewed changes

jcmill removed request for bekah-stephens, mcoker and srambach March 28, 2026 10:32

remove menu-toggle pill modifier, adjust plain for new pill shape

d9149f4

jcmill requested review from bekah-stephens, mcoker and srambach April 1, 2026 13:51

bekah-stephens requested changes Apr 1, 2026

View reviewed changes

coderabbitai Bot reviewed Apr 1, 2026

View reviewed changes

Comment thread src/patternfly/components/MenuToggle/menu-toggle.scss Outdated

change font size to global default

b6b1000

coderabbitai Bot reviewed Apr 1, 2026

View reviewed changes

Merge branch 'main' into fix/3641-breadcrumbs

2674a92

mcoker reviewed Apr 1, 2026

View reviewed changes

rever menu-toggle token changes, add plain-hover token to boarder radius

e306e09

mcoker approved these changes Apr 9, 2026

View reviewed changes

mcoker requested changes Apr 9, 2026

View reviewed changes

update heading font-size to made font-size change

63649fe

jcmill requested a review from mcoker April 9, 2026 20:03

mcoker approved these changes Apr 9, 2026

View reviewed changes

mcoker merged commit c9e53ec into patternfly:main Apr 9, 2026
5 checks passed

patternfly-build added the released on @prerelease label Apr 9, 2026

coderabbitai Bot mentioned this pull request Apr 10, 2026

chore: s/cog/rh-ui-settings-fill #8298

Merged

jcmill deleted the fix/3641-breadcrumbs branch May 13, 2026 15:07

coderabbitai Bot mentioned this pull request May 15, 2026

Bug - Banner - text decoration on Inline links broken. #8403

Closed

3 tasks

This was referenced Jul 22, 2026

The automated release is failing 🚨 #8519

Closed

The automated release is failing 🚨 #8533

Closed


	--#{$breadcrumb}__heading--FontSize: var(--pf-t--global--font--size--body--default);

Uh oh!

Conversation

jcmill commented Mar 27, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented Mar 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Reviews paused

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested labels

Suggested reviewers

Uh oh!

patternfly-build commented Mar 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

bekah-stephens left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mcoker left a comment

Choose a reason for hiding this comment

Uh oh!

mcoker left a comment

Choose a reason for hiding this comment

Uh oh!

mcoker Apr 9, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

patternfly-build commented Apr 9, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

jcmill commented Mar 27, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Mar 27, 2026 •

edited

Loading

patternfly-build commented Mar 27, 2026 •

edited

Loading