Skip to content

Add new Icon parameters to BitBreadcrumb (#12102)#12103

Merged
msynk merged 1 commit intobitfoundation:developfrom
msynk:12102-blazorui-breadcrumb-new-icons
Feb 18, 2026
Merged

Add new Icon parameters to BitBreadcrumb (#12102)#12103
msynk merged 1 commit intobitfoundation:developfrom
msynk:12102-blazorui-breadcrumb-new-icons

Conversation

@msynk
Copy link
Copy Markdown
Member

@msynk msynk commented Feb 17, 2026

closes #12102

Summary by CodeRabbit

Release Notes

  • New Features

    • Added customizable icon support to breadcrumb components, including DividerIcon and OverflowIcon parameters for divider and overflow customization
    • Breadcrumb items and options now support custom icons via the Icon property
    • Added support for external icon libraries (FontAwesome, Bootstrap Icons, and CSS-based icons)
  • Documentation

    • Added demonstrations and samples showing how to integrate external icon libraries with breadcrumb components

@coderabbitai
Copy link
Copy Markdown

coderabbitai bot commented Feb 17, 2026

Walkthrough

This pull request adds BitIconInfo support to the BitBreadcrumb component, enabling external icon library integration. The changes introduce new public parameters (DividerIcon, OverflowIcon) and properties (Icon) across breadcrumb-related classes, with corresponding updates to icon rendering logic and demo examples demonstrating FontAwesome, CSS class-based, and Bootstrap Icons usage.

Changes

Cohort / File(s) Summary
Core Breadcrumb Component
src/BlazorUI/Bit.BlazorUI/Components/Navs/Breadcrumb/BitBreadcrumb.razor, BitBreadcrumb.razor.cs, BitBreadcrumbItem.cs, BitBreadcrumbNameSelectors.cs, BitBreadcrumbOption.cs
Added new Icon property/parameter support via BitIconInfo? type to breadcrumb items and options. Added DividerIcon and OverflowIcon parameters to main component. Updated icon rendering logic to use BitIconInfo.GetCssClasses() instead of string-based icon names, with null-safety checks replacing legacy patterns.
Breadcrumb Demo Markup
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Breadcrumb/_BitBreadcrumb*.razor
Added new "External Icons" demo blocks showcasing FontAwesome, CSS class-based icons, and Bootstrap Icons integration patterns with BitBreadcrumb, BitBreadcrumbItem, and BitBreadcrumbOption. Includes external CDN stylesheet links for icon library dependencies.
Breadcrumb Demo Code-Behind & Samples
_BitBreadcrumb*.razor.cs, _BitBreadcrumb*.samples.cs, BitBreadcrumbDemo.razor.cs, PageInfo.cs
Added private data collections (CustomBreadcrumbItemsWithExternalIcon*, BreadcrumbItemsWithExternalIcon*) with BitIconInfo variants (Fa, Bi, Css). Extended name selectors to map Icon properties. Added demo code snippets (example9RazorCode, example9CsharpCode) for external icon usage patterns. Removed BOM artifacts from namespace declarations.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 A breadcrumb trail with icons so fine,
From FontAwesome stars to Bootstrap's design,
External icons now hop and display,
Making navigation colorful each day,
With BitIconInfo, the path shines its way!

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Linked Issues check ✅ Passed The PR successfully implements the new Icon system for BitBreadcrumb [#12102], enabling external icon support across item, divider, and overflow icons.
Out of Scope Changes check ✅ Passed All changes are scoped to BitBreadcrumb icon implementation. Demo updates and formatting fixes are supportive and directly related to the icon feature.
Title check ✅ Passed The title clearly and accurately summarizes the main objective of the pull request: adding new Icon parameters to the BitBreadcrumb component. It is specific, concise, and directly reflects the core changes across multiple files.

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

✨ Finishing Touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment

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.

Copy link
Copy Markdown

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Caution

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

⚠️ Outside diff range comments (2)
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Breadcrumb/BitBreadcrumbDemo.razor.cs (1)

319-330: ⚠️ Potential issue | 🟡 Minor

Pre-existing: OverflowTemplate and Template types reference BitBreadcrumbItem instead of BitBreadcrumbOption.

Lines 322-323 and 328-329 in the BitBreadcrumbOption section show RenderFragment<BitBreadcrumbItem>? as the type, but these should be RenderFragment<BitBreadcrumbOption>? to match the actual BitBreadcrumbOption.cs declarations. This predates this PR but is worth fixing while you're here.

Proposed fix
                new()
                {
                    Name = "OverflowTemplate",
-                   Type = "RenderFragment<BitBreadcrumbItem>?",
+                   Type = "RenderFragment<BitBreadcrumbOption>?",
                    Description = "The custom template for the item in overflow list.",
                },
                new()
                {
                    Name = "Template",
-                   Type = "RenderFragment<BitBreadcrumbItem>?",
+                   Type = "RenderFragment<BitBreadcrumbOption>?",
                    Description = "The custom template for the item.",
                }
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In
`@src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Breadcrumb/BitBreadcrumbDemo.razor.cs`
around lines 319 - 330, The metadata entries for OverflowTemplate and Template
incorrectly reference RenderFragment<BitBreadcrumbItem>?; update both entries to
use RenderFragment<BitBreadcrumbOption>? so they match the
BitBreadcrumbOption.cs declarations—locate the two new() objects named
OverflowTemplate and Template in BitBreadcrumbDemo.razor.cs and change their
Type values from "RenderFragment<BitBreadcrumbItem>?" to
"RenderFragment<BitBreadcrumbOption>?".
src/BlazorUI/Bit.BlazorUI/Components/Navs/Breadcrumb/BitBreadcrumb.razor (1)

73-77: ⚠️ Potential issue | 🟡 Minor

Pre-existing: GetClasses(item, true) should be GetClasses(item, false) for non-overflow button items.

Line 77 passes true (isOverflowItem) to GetClasses, but this button is in the main display items loop—not in the overflow callout. The anchor (Line 51) and span (Line 101) paths correctly pass false. This causes overflow-specific CSS classes/styles to be incorrectly applied to button-rendered display items.

Proposed fix
-                               class="bit-brc-itm `@GetClasses`(item, true)" `@onclick`="() => HandleOnItemClick(item)">
+                               class="bit-brc-itm `@GetClasses`(item, false)" `@onclick`="() => HandleOnItemClick(item)">
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/BlazorUI/Bit.BlazorUI/Components/Navs/Breadcrumb/BitBreadcrumb.razor`
around lines 73 - 77, The button in BitBreadcrumb.razor is calling
GetClasses(item, true) which incorrectly applies overflow-item styles to main
display items; change the second argument to false so it matches the anchor/span
variants. Locate the button element that uses GetIsSelected, GetIsEnabled,
GetStyles and HandleOnItemClick and update GetClasses(item, true) ->
GetClasses(item, false) to ensure non-overflow CSS is applied.
🤖 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/BlazorUI/Bit.BlazorUI/Components/Navs/Breadcrumb/BitBreadcrumb.razor`:
- Around line 73-77: The button in BitBreadcrumb.razor is calling
GetClasses(item, true) which incorrectly applies overflow-item styles to main
display items; change the second argument to false so it matches the anchor/span
variants. Locate the button element that uses GetIsSelected, GetIsEnabled,
GetStyles and HandleOnItemClick and update GetClasses(item, true) ->
GetClasses(item, false) to ensure non-overflow CSS is applied.

In
`@src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Breadcrumb/BitBreadcrumbDemo.razor.cs`:
- Around line 319-330: The metadata entries for OverflowTemplate and Template
incorrectly reference RenderFragment<BitBreadcrumbItem>?; update both entries to
use RenderFragment<BitBreadcrumbOption>? so they match the
BitBreadcrumbOption.cs declarations—locate the two new() objects named
OverflowTemplate and Template in BitBreadcrumbDemo.razor.cs and change their
Type values from "RenderFragment<BitBreadcrumbItem>?" to
"RenderFragment<BitBreadcrumbOption>?".

---

Duplicate comments:
In
`@src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Breadcrumb/_BitBreadcrumbCustomDemo.razor`:
- Around line 178-215: This demo currently inlines external CDN stylesheet tags
(the FontAwesome and Bootstrap Icons <link> entries) inside the Example block
that reference Font Awesome 7.0.1; remove these in-component <link
rel="stylesheet"...> tags and instead load the icon CSS centrally (e.g., in the
app host like index.html/_Host.cshtml or as a local npm/package asset) so the
BitBreadcrumb examples (CustomBreadcrumbItemsWithExternalIcon1,
CustomBreadcrumbItemsWithExternalIcon2, CustomBreadcrumbItemsWithExternalIcon3,
CustomBreadcrumbItemsWithExternalIcon4 and the DemoExample with Id="example9")
rely on the centrally-provided CSS; if a specific vetted version is required,
update the central include to that approved version and ensure only one global
include exists to avoid duplicate loads.

In
`@src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Breadcrumb/_BitBreadcrumbOptionDemo.razor`:
- Around line 236-288: This demo embeds an external Font Awesome 7.0.1 CDN link
(and a Bootstrap Icons CDN) which matches the same CDN concern raised earlier;
update the examples to stop hardcoding external CDNs by either using the
project's approved icon package (install/import FontAwesome/Bootstrap Icons via
the app's static assets or NuGet/npm package) or switching the <link
rel="stylesheet"> tags to the approved CDN/version used elsewhere, and ensure
the BitBreadcrumb/BitBreadcrumbOption examples and BitIconInfo.Fa /
BitIconInfo.Bi usages reference the locally-hosted or approved icon CSS so the
demo does not inline an unapproved external CDN.

In
`@src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Breadcrumb/_BitBreadcrumbOptionDemo.razor.samples.cs`:
- Around line 173-210: The Font Awesome CDN URL in the example9RazorCode string
references a potentially invalid version (7.0.1) which can break icon rendering;
update the href to a valid Font Awesome CDN URL or a known existing version
(e.g., latest stable) or switch to a bundled/local asset, then verify icons
render; locate the example9RazorCode constant in
_BitBreadcrumbOptionDemo.razor.samples.cs and replace the invalid CDN link
accordingly.

@msynk msynk changed the title Add new Icon parameteres to BitBreadcrumb (#12102) Add new Icon parameters to BitBreadcrumb (#12102) Feb 18, 2026
@msynk msynk merged commit f626d1a into bitfoundation:develop Feb 18, 2026
3 checks passed
@msynk msynk deleted the 12102-blazorui-breadcrumb-new-icons branch February 18, 2026 12:13
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

The new Icon implementation is missing in the BitBreadcrumb component

2 participants