Syncfusion Blazor Breadcrumb

Syncfusion Blazor Breadcrumb Component

When to Use This Skill

Use this skill when you need to:

• Build navigation breadcrumbs for single-page applications (SPAs) to show the user's current position in a hierarchy
• Auto-generate breadcrumb trails based on the current URL path
• Create custom navigation sequences with dynamic item management (add/remove items at runtime)
• Handle overflow scenarios with many breadcrumb items (collapsed, menu, wrap, scroll modes)
• Customize visual appearance with icons, images, separators, or templates
• Implement templated breadcrumb layouts using Chip components or custom renderers
• Enable/disable navigation based on business logic or user roles

The Syncfusion Blazor Breadcrumb component provides built-in URL parsing, responsive overflow handling, and templating capabilities to simplify hierarchical navigation UIs.

Component Overview

The Blazor Breadcrumb component is a navigation control that displays a hierarchy of pages or sections visited within an application.

Key Features:

• Auto-generated items from current URL path
• Manual item declaration using BreadcrumbItem tag directive
• Multiple overflow modes (Collapsed, Menu, Wrap, Scroll, Hidden, None)
• Icon and image support via IconCss property
• Template-based customization for items and separators
• Dynamic item management (add/remove at runtime)
• URL navigation (relative or absolute)
• Responsive design with CSS customization

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

• NuGet package installation (Syncfusion.Blazor.Navigations)
• Namespace imports and service registration
• Theme stylesheet and script configuration
• Basic <SfBreadcrumb> component initialization
• First render with URL-based navigation

Item Configuration

📄 Read: references/breadcrumb-items-configuration.md

• BreadcrumbItem properties (Text, Url, IconCss)
• Declaring items using <BreadcrumbItem> tag directive
• Auto-generating items from the current page URL
• Generating items from an absolute URL using the Url property
• Dynamically adding and removing items at runtime using the Items property

Icons and Visual Elements

📄 Read: references/icons-and-visual-elements.md

• Adding font icons with e-icons CSS class
• Image customization via IconCss property with custom CSS classes
• SVG image support for breadcrumb items
• Icon-only breadcrumb items (no text)
• Displaying icons selectively (e.g., first item only)

Navigation and Routing

📄 Read: references/navigation-and-routing.md

• Relative URL navigation in breadcrumb items
• Absolute URL navigation for external links
• Disabling navigation with EnableNavigation="false"
• Enabling navigation for the active (last) item with EnableActiveItemNavigation="true"

Overflow Modes

📄 Read: references/overflow-modes.md

• Limiting displayed items with MaxItems property
• Collapsed mode: Hide middle items, show first/last with expand button
• Menu mode: Remaining items in a dropdown submenu
• Wrap mode: Items wrap to multiple lines
• Scroll mode: Horizontal scroll bar for overflow
• Hidden mode: Hidden items revealed on parent click
• None mode: All items on a single line

Templates and Customization

📄 Read: references/templates-and-customization.md

• ItemTemplate for rendering custom item UI
• SeparatorTemplate for customizing item separators
• Template context parameter for accessing current item data
• Integrating Chip components with ItemTemplate
• Specific item customization using child content

Styling and Appearance

📄 Read: references/styling-and-appearance.md

• CSS classes for customization (.e-breadcrumb-item, .e-breadcrumb-text, .e-breadcrumb-icon, .e-breadcrumb-separator)
• Theme Studio integration for custom themes
• Overriding default Breadcrumb styling with CSS
• Customizing background, text color, icon color, and separator color

Quick Start Example

Basic breadcrumb with explicit items:

@using Syncfusion.Blazor.Navigations

<SfBreadcrumb>
    <BreadcrumbItems>
        <BreadcrumbItem IconCss="e-icons e-home" Url="https://example.com/home"></BreadcrumbItem>
        <BreadcrumbItem Text="Products" Url="https://example.com/products"></BreadcrumbItem>
        <BreadcrumbItem Text="Electronics" Url="https://example.com/products/electronics"></BreadcrumbItem>
        <BreadcrumbItem Text="Laptops"></BreadcrumbItem>
    </BreadcrumbItems>
</SfBreadcrumb>

Auto-generated breadcrumb from current URL:

@using Syncfusion.Blazor.Navigations

<SfBreadcrumb></SfBreadcrumb>

Common Patterns

Pattern 1: Icon + Text Items

Combine icons with text for visual hierarchy and quick scanning:

<SfBreadcrumb>
    <BreadcrumbItems>
        <BreadcrumbItem IconCss="e-icons e-home" Url="/"></BreadcrumbItem>
        <BreadcrumbItem IconCss="e-icons e-folder-open" Text="Documents" Url="/docs"></BreadcrumbItem>
        <BreadcrumbItem Text="Projects"></BreadcrumbItem>
    </BreadcrumbItems>
</SfBreadcrumb>

Pattern 2: Handling Long Breadcrumb Trails

Use MaxItems with OverflowMode to manage deep hierarchies:

<SfBreadcrumb MaxItems="4" OverflowMode="BreadcrumbOverflowMode.Menu">
    <BreadcrumbItems>
        <BreadcrumbItem Text="Home" Url="/"></BreadcrumbItem>
        <BreadcrumbItem Text="Category 1" Url="/cat1"></BreadcrumbItem>
        <BreadcrumbItem Text="Category 2" Url="/cat1/cat2"></BreadcrumbItem>
        <BreadcrumbItem Text="Category 3" Url="/cat1/cat2/cat3"></BreadcrumbItem>
        <BreadcrumbItem Text="Current Page"></BreadcrumbItem>
    </BreadcrumbItems>
</SfBreadcrumb>

Pattern 3: Dynamic Item Management

Add/remove items at runtime based on user actions:

@using Syncfusion.Blazor.Navigations

<SfBreadcrumb Items="@breadcrumbItems"></SfBreadcrumb>

<button @onclick="AddItem">Add Item</button>
<button @onclick="RemoveItem">Remove Item</button>

@code {
    List<BreadcrumbItem> breadcrumbItems = new List<BreadcrumbItem>
    {
        new BreadcrumbItem { IconCss = "e-icons e-home" },
        new BreadcrumbItem { Text = "Products" }
    };

    private void AddItem()
    {
        breadcrumbItems.Add(new BreadcrumbItem { Text = "New Item" });
    }

    private void RemoveItem()
    {
        if (breadcrumbItems.Count > 0)
            breadcrumbItems.RemoveAt(breadcrumbItems.Count - 1);
    }
}

Pattern 4: Custom Separator with Template

Use SeparatorTemplate for custom visual separators:

<SfBreadcrumb>
    <BreadcrumbItems>
        <BreadcrumbItem Text="Home" Url="/"></BreadcrumbItem>
        <BreadcrumbItem Text="Products" Url="/products"></BreadcrumbItem>
        <BreadcrumbItem Text="Details"></BreadcrumbItem>
    </BreadcrumbItems>
    <BreadcrumbTemplates>
        <SeparatorTemplate>
            <span class="e-icons e-arrow"></span>
        </SeparatorTemplate>
    </BreadcrumbTemplates>
</SfBreadcrumb>

Key Props

Common Use Cases

1. E-commerce product breadcrumbs: Show navigation path through categories (Home > Electronics > Laptops > Gaming Laptops)
2. Admin dashboard navigation: Display user position in multi-level menu hierarchy
3. File explorer: Visualize folder navigation path with icons
4. Documentation sites: Show section hierarchy (Documentation > Guides > Getting Started)
5. Search result filters: Display active filter path (Search > Results > Filtered by Price)
6. Step-by-step workflows: Indicate current step in multi-step processes (Step 1 > Step 2 > Current)

Next Steps: Read the appropriate reference file based on your use case from the "Documentation and Navigation Guide" section above.