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.

Breadcrumb Items Configuration

Table of Contents

• BreadcrumbItem Properties
• Declaring Items
• Auto-Generated Items from Current URL
• Absolute URL Generation
• Dynamic Item Management

---

BreadcrumbItem Properties

The BreadcrumbItem component has three main properties for configuration:

Example:

<BreadcrumbItem Text="Home" Url="/" IconCss="e-icons e-home"></BreadcrumbItem>

---

Declaring Items

Use the BreadcrumbItems tag directive to explicitly declare breadcrumb items:

@using Syncfusion.Blazor.Navigations

<SfBreadcrumb>
    <BreadcrumbItems>
        <BreadcrumbItem Text="Home" Url="https://blazor.syncfusion.com/demos/"></BreadcrumbItem>
        <BreadcrumbItem Text="Components" Url="https://blazor.syncfusion.com/demos/datagrid/overview"></BreadcrumbItem>
        <BreadcrumbItem Text="Navigations" Url="https://blazor.syncfusion.com/demos/menu-bar/default-functionalities"></BreadcrumbItem>
        <BreadcrumbItem Text="Breadcrumb" Url="./breadcrumb/default-functionalities"></BreadcrumbItem>
    </BreadcrumbItems>
</SfBreadcrumb>

Each BreadcrumbItem renders as a clickable link (if Url is set) or static text (if Url is omitted). This approach gives you explicit control over breadcrumb structure and content.

---

Auto-Generated Items from Current URL

When items are not explicitly declared, the breadcrumb automatically generates items from the current page URL:

@using Syncfusion.Blazor.Navigations

<SfBreadcrumb></SfBreadcrumb>

Example: If your current page URL is /docs/components/navigations/breadcrumb, the breadcrumb will auto-generate:

• docs > components > navigations > breadcrumb

Each segment becomes a clickable item that navigates to its corresponding URL. This is useful when you want breadcrumbs to automatically reflect the user's navigation path without manual configuration.

---

Absolute URL Generation

You can also generate breadcrumb items from an absolute URL using the Url property on the SfBreadcrumb component:

@using Syncfusion.Blazor.Navigations

<SfBreadcrumb Url="https://blazor.syncfusion.com/demos/breadcrumb/navigation">
</SfBreadcrumb>

This generates breadcrumb items based on the URL path structure: /demos > /breadcrumb > /navigation

---

Dynamic Item Management

Manage breadcrumb items at runtime using the Items property:

@using Syncfusion.Blazor.Navigations
@using Syncfusion.Blazor.Buttons

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

<SfButton OnClick="AddBefore">Insert Before</SfButton>
<SfButton OnClick="AddAfter">Insert After</SfButton>
<SfButton OnClick="Remove">Remove Last</SfButton>

@code {
    List<BreadcrumbItem> items = new List<BreadcrumbItem>
    {
        new BreadcrumbItem { IconCss = "e-icons e-home" },
        new BreadcrumbItem { Text = "Open", IconCss = "e-icons e-folder-open", Url = "https://blazor.syncfusion.com/demos/datagrid/overview" },
        new BreadcrumbItem { Text = "New", IconCss = "e-icons e-file-new" }
    };

    private void AddBefore()
    {
        var index = items.IndexOf(items.Where(item => item.Text == "Open").FirstOrDefault());
        items.Insert(index, new BreadcrumbItem { Text = "Save", IconCss = "e-icons e-save" });
    }

    private void AddAfter()
    {
        var index = items.IndexOf(items.Where(item => item.Text == "New").FirstOrDefault());
        items.Insert((index + 1), new BreadcrumbItem { Text = "Delete", IconCss = "e-icons e-delete" });
    }

    private void Remove()
    {
        if (items.Count > 0)
            items.RemoveAt(items.Count() - 1);
    }
}

Operations:

• Insert: Use items.Insert(index, newItem) to add an item at a specific position
• Remove: Use items.RemoveAt(index) to remove an item
• Clear: Use items.Clear() to remove all items

The breadcrumb UI updates automatically when the items collection changes, enabling reactive navigation flows.

Getting Started with Blazor Breadcrumb

Table of Contents

• NuGet Package Installation
• Namespace Imports
• Service Registration
• Theme Configuration
• Basic Component Initialization
• First Render

---

NuGet Package Installation

Install the required NuGet packages for Syncfusion Blazor Breadcrumb component:

Install-Package Syncfusion.Blazor.Navigations -Version 28.x.x
Install-Package Syncfusion.Blazor.Themes -Version 28.x.x

Or use the .NET CLI:

dotnet add package Syncfusion.Blazor.Navigations
dotnet add package Syncfusion.Blazor.Themes

Note: Replace 28.x.x with the latest available version. See NuGet packages for version information.

---

Namespace Imports

After package installation, open the ~/_Imports.razor file and add the Syncfusion Blazor namespaces:

@using Syncfusion.Blazor
@using Syncfusion.Blazor.Navigations

This makes the SfBreadcrumb, BreadcrumbItem, and related components available throughout your Blazor application.

---

Service Registration

Register the Syncfusion Blazor service in Program.cs:

using Syncfusion.Blazor;

// ...

builder.Services.AddSyncfusionBlazor();

This initialization enables all Syncfusion components, including the Breadcrumb control.

---

Theme Configuration

Add the theme stylesheet and JavaScript interop script to your ~/index.html file (for WebAssembly) or ~/Pages/_Layout.cshtml (for Server):

<!-- In the <head> section: -->
<link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />

<!-- Before closing </body> tag: -->
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" 
        type="text/javascript"></script>

Available themes: fluent2, bootstrap5, bootstrap, material, fabric, tailwind, etc.

For more theme options, refer to Blazor Themes documentation.

---

Basic Component Initialization

Create a Blazor component with the SfBreadcrumb control:

@using Syncfusion.Blazor.Navigations

<SfBreadcrumb></SfBreadcrumb>

This creates a minimal breadcrumb that will auto-generate items based on the current URL.

---

First Render

When the breadcrumb renders, it automatically parses the current page URL and creates breadcrumb items:

@using Syncfusion.Blazor.Navigations

<SfBreadcrumb></SfBreadcrumb>

Example: If your URL is /products/electronics/laptops, the breadcrumb will display:

• products > electronics > laptops

Each segment becomes a clickable breadcrumb item that navigates to its corresponding URL.

To add custom items instead of URL-based auto-generation, use the BreadcrumbItems container:

@using Syncfusion.Blazor.Navigations

<SfBreadcrumb>
    <BreadcrumbItems>
        <BreadcrumbItem IconCss="e-icons e-home" Url="/"></BreadcrumbItem>
        <BreadcrumbItem Text="Products" Url="/products"></BreadcrumbItem>
        <BreadcrumbItem Text="Current Product"></BreadcrumbItem>
    </BreadcrumbItems>
</SfBreadcrumb>

This manual approach gives you full control over breadcrumb content and URLs.

Icons and Visual Elements

Table of Contents

• Font Icons
• Image Customization
• SVG Images
• Icon-Only Items
• Selective Icon Display

---

Font Icons

Add font icons to breadcrumb items using the IconCss property with the e-icons class:

@using Syncfusion.Blazor.Navigations

<SfBreadcrumb>
    <BreadcrumbItems>
        <BreadcrumbItem IconCss="e-icons e-home" Url="https://blazor.syncfusion.com/demos/"></BreadcrumbItem>
        <BreadcrumbItem Text="Components" Url="https://blazor.syncfusion.com/demos/datagrid/overview"></BreadcrumbItem>
        <BreadcrumbItem Text="Navigations" Url="https://blazor.syncfusion.com/demos/menu-bar/default-functionalities"></BreadcrumbItem>
        <BreadcrumbItem Text="Breadcrumb" Url="./breadcrumb/default-functionalities"></BreadcrumbItem>
    </BreadcrumbItems>
</SfBreadcrumb>

The e-icons class references Syncfusion's built-in icon font. Common icon classes include:

• e-home - Home icon
• e-folder-open - Folder icon
• e-file-new - File icon
• e-arrow - Arrow icon

By default, the icon is positioned to the left side of the item.

---

Image Customization

Use custom CSS classes with the IconCss property to display images:

@using Syncfusion.Blazor.Navigations

<SfBreadcrumb>
    <BreadcrumbItems>
        <BreadcrumbItem IconCss="e-image-home" Url="https://blazor.syncfusion.com/demos/"></BreadcrumbItem>
        <BreadcrumbItem Text="Components" Url="https://blazor.syncfusion.com/demos/datagrid/overview"></BreadcrumbItem>
        <BreadcrumbItem Text="Navigations" Url="https://blazor.syncfusion.com/demos/menu-bar/default-functionalities"></BreadcrumbItem>
        <BreadcrumbItem Text="Breadcrumb" Url="./breadcrumb/default-functionalities"></BreadcrumbItem>
    </BreadcrumbItems>
</SfBreadcrumb>

<style>
    .e-image-home {
        background-image: url(/home.png);
        height: 20px;
        width: 20px;
    }
</style>

Define your custom CSS class with background-image, height, and width properties to display the image as the breadcrumb icon.

---

SVG Images

Add SVG images to breadcrumb items using the IconCss property:

@using Syncfusion.Blazor.Navigations

<SfBreadcrumb>
    <BreadcrumbItems>
        <BreadcrumbItem IconCss="e-svg-home" Url="https://blazor.syncfusion.com/demos/"></BreadcrumbItem>
        <BreadcrumbItem Text="Components" Url="https://blazor.syncfusion.com/demos/datagrid/overview"></BreadcrumbItem>
        <BreadcrumbItem Text="Navigations" Url="https://blazor.syncfusion.com/demos/menu-bar/default-functionalities"></BreadcrumbItem>
        <BreadcrumbItem Text="Breadcrumb" Url="./breadcrumb/default-functionalities"></BreadcrumbItem>
    </BreadcrumbItems>
</SfBreadcrumb>

<style>
    .e-svg-home {
        background-image: url('/home.svg');
        height: 20px;
        width: 20px;
    }
</style>

SVG images are added the same way as regular image icons—define a custom CSS class with background-image pointing to your SVG file.

---

Icon-Only Items

Create breadcrumb items that display only the icon without text:

@using Syncfusion.Blazor.Navigations

<SfBreadcrumb>
    <BreadcrumbItems>
        <BreadcrumbItem IconCss="e-icons e-home"></BreadcrumbItem>
        <BreadcrumbItem IconCss="e-icons e-folder-open"></BreadcrumbItem>
        <BreadcrumbItem IconCss="e-icons e-file-new"></BreadcrumbItem>
    </BreadcrumbItems>
</SfBreadcrumb>

Omit the Text property to display only the icon. This is useful for saving space or creating a more visual breadcrumb trail.

---

Selective Icon Display

Display icons only for specific items, such as the first item:

@using Syncfusion.Blazor.Navigations

<SfBreadcrumb>
    <BreadcrumbItems>
        <BreadcrumbItem IconCss="e-icons e-home" Url="https://blazor.syncfusion.com/demos/"></BreadcrumbItem>
        <BreadcrumbItem Text="Components" Url="https://blazor.syncfusion.com/demos/datagrid/overview"></BreadcrumbItem>
        <BreadcrumbItem Text="Navigations" Url="https://blazor.syncfusion.com/demos/menu-bar/default-functionalities"></BreadcrumbItem>
        <BreadcrumbItem Text="Breadcrumb" Url="./breadcrumb/default-functionalities"></BreadcrumbItem>
    </BreadcrumbItems>
</SfBreadcrumb>

In this example, only the first item has an icon (e-home), while the remaining items display text only. This creates a visual anchor point at the start of the breadcrumb trail.

Navigation and Routing

Table of Contents

• Relative URL Navigation
• Absolute URL Navigation
• Disabling Navigation
• Active Item Navigation

---

Relative URL Navigation

Specify relative URLs in breadcrumb items to navigate within your application:

@using Syncfusion.Blazor.Navigations

<SfBreadcrumb>
    <BreadcrumbItems>
        <BreadcrumbItem Text="Home" Url="../"></BreadcrumbItem>
        <BreadcrumbItem Text="Breadcrumb" Url="./breadcrumb/getting-started"></BreadcrumbItem>
        <BreadcrumbItem Text="Default" Url="../"></BreadcrumbItem>
        <BreadcrumbItem Text="Icons" Url="./breadcrumb/icons"></BreadcrumbItem>
        <BreadcrumbItem Text="Navigation" Url="./breadcrumb/navigation"></BreadcrumbItem>
        <BreadcrumbItem Text="Overflow" Url="./breadcrumb/overflow"></BreadcrumbItem>
    </BreadcrumbItems>
</SfBreadcrumb>

Relative URLs use:

• ./ for sibling paths
• ../ for parent paths
• ../../ for higher-level paths

These URLs are resolved relative to the current page's location.

---

Absolute URL Navigation

Specify absolute URLs for external links or fully-qualified internal paths:

@using Syncfusion.Blazor.Navigations

<SfBreadcrumb>
    <BreadcrumbItems>
        <BreadcrumbItem Text="Home" Url="https://blazor.syncfusion.com/documentation/breadcrumb/introduction"></BreadcrumbItem>
        <BreadcrumbItem Text="Getting" Url="https://blazor.syncfusion.com/documentation/breadcrumb/getting-started"></BreadcrumbItem>
        <BreadcrumbItem Text="Icons" Url="https://blazor.syncfusion.com/documentation/breadcrumb/icons"></BreadcrumbItem>
        <BreadcrumbItem Text="Navigation" Url="https://blazor.syncfusion.com/documentation/breadcrumb/navigation"></BreadcrumbItem>
        <BreadcrumbItem Text="Overflow" Url="https://blazor.syncfusion.com/documentation/breadcrumb/overflow"></BreadcrumbItem>
    </BreadcrumbItems>
</SfBreadcrumb>

Absolute URLs include the full scheme and host (e.g., https://example.com/path). When clicked, they navigate to the specified URL directly, regardless of the current application context.

---

Disabling Navigation

By default, breadcrumb items with a Url property navigate when clicked. To prevent navigation, set the EnableNavigation property to false:

@using Syncfusion.Blazor.Navigations

<SfBreadcrumb EnableNavigation="false">
    <BreadcrumbItems>
        <BreadcrumbItem Text="Home" Url="https://blazor.syncfusion.com/documentation/breadcrumb/introduction"></BreadcrumbItem>
        <BreadcrumbItem Text="Getting" Url="https://blazor.syncfusion.com/documentation/breadcrumb/getting-started"></BreadcrumbItem>
        <BreadcrumbItem Text="Icons" Url="https://blazor.syncfusion.com/documentation/breadcrumb/icons"></BreadcrumbItem>
        <BreadcrumbItem Text="Navigation" Url="https://blazor.syncfusion.com/documentation/breadcrumb/navigation"></BreadcrumbItem>
        <BreadcrumbItem Text="Overflow" Url="https://blazor.syncfusion.com/documentation/breadcrumb/overflow"></BreadcrumbItem>
    </BreadcrumbItems>
</SfBreadcrumb>

When EnableNavigation="false", breadcrumb items render as static elements without navigation functionality. This is useful for:

• Display-only breadcrumbs
• Custom navigation logic via C# event handlers
• Workflows where navigation should be prevented

---

Active Item Navigation

By default, the last (active) breadcrumb item does not trigger navigation when clicked. To enable navigation for the active item, set EnableActiveItemNavigation to true:

@using Syncfusion.Blazor.Navigations

<SfBreadcrumb EnableActiveItemNavigation="true">
    <BreadcrumbItems>
        <BreadcrumbItem Text="Home" Url="https://blazor.syncfusion.com/documentation/breadcrumb/introduction"></BreadcrumbItem>
        <BreadcrumbItem Text="Getting" Url="https://blazor.syncfusion.com/documentation/breadcrumb/getting-started"></BreadcrumbItem>
        <BreadcrumbItem Text="Icons" Url="https://blazor.syncfusion.com/documentation/breadcrumb/icons"></BreadcrumbItem>
        <BreadcrumbItem Text="Navigation" Url="https://blazor.syncfusion.com/documentation/breadcrumb/navigation"></BreadcrumbItem>
        <BreadcrumbItem Text="Overflow" Url="https://blazor.syncfusion.com/documentation/breadcrumb/overflow"></BreadcrumbItem>
    </BreadcrumbItems>
</SfBreadcrumb>

When EnableActiveItemNavigation="true", the last item becomes clickable and navigates to its specified Url. This enables breadcrumb-based refresh or re-navigation scenarios.

Default behavior: The last item is typically not clickable because it represents the current page. Set this property to true only if your use case requires active item navigation.

Overflow Modes

Table of Contents

• Overview
• MaxItems Property
• Collapsed Mode
• Menu Mode
• Wrap Mode
• Scroll Mode
• Hidden Mode
• None Mode

---

Overview

When a breadcrumb has many items, the OverflowMode property determines how to handle items that exceed the container's available space. Use the MaxItems property to specify the maximum number of items to display before overflow handling activates.

Available overflow modes:

• Collapsed: Show first/last items, hide middle items in a collapsible section
• Menu: Show visible items, place overflow items in a dropdown menu
• Wrap: Items wrap to multiple lines
• Scroll: Show horizontal scrollbar for overflow items
• Hidden: Show maximum items possible, hide overflow items on parent click
• None: Display all items on a single line (no overflow handling)

---

MaxItems Property

Set the MaxItems property to limit the number of breadcrumb items displayed:

<SfBreadcrumb MaxItems="3">
    <!-- breadcrumb items -->
</SfBreadcrumb>

When the number of breadcrumb items exceeds MaxItems, the OverflowMode determines how the overflow is handled. If MaxItems is not set, no overflow handling is applied.

---

Collapsed Mode

Collapsed mode displays the first and last breadcrumb items and hides the remaining middle items with a collapsed icon. When the collapsed icon is clicked, all items become visible and navigable.

@using Syncfusion.Blazor.Navigations

<SfBreadcrumb MaxItems="3" EnableNavigation="false" OverflowMode="BreadcrumbOverflowMode.Collapsed">
    <BreadcrumbItems>
        <BreadcrumbItem Text="Home" Url="https://blazor.syncfusion.com/documentation/breadcrumb/introduction"></BreadcrumbItem>
        <BreadcrumbItem Text="Getting" Url="https://blazor.syncfusion.com/documentation/breadcrumb/getting-started"></BreadcrumbItem>
        <BreadcrumbItem Text="Icons" Url="https://blazor.syncfusion.com/documentation/breadcrumb/icons"></BreadcrumbItem>
        <BreadcrumbItem Text="Navigation" Url="https://blazor.syncfusion.com/documentation/breadcrumb/navigation"></BreadcrumbItem>
        <BreadcrumbItem Text="Overflow" Url="https://blazor.syncfusion.com/documentation/breadcrumb/overflow"></BreadcrumbItem>
    </BreadcrumbItems>
    <BreadcrumbTemplates>
        <SeparatorTemplate>
            <span class="e-icons e-arrow"></span>
        </SeparatorTemplate>
    </BreadcrumbTemplates>
</SfBreadcrumb>

Use case: Collapsed mode is ideal for mobile or constrained layouts where you need to show only the start and end of the breadcrumb trail.

---

Menu Mode

Menu mode displays as many breadcrumb items as possible within the container space and places the remaining overflow items in a dropdown menu.

@using Syncfusion.Blazor.Navigations

<SfBreadcrumb MaxItems="3" EnableNavigation="false" OverflowMode="BreadcrumbOverflowMode.Menu">
    <BreadcrumbItems>
        <BreadcrumbItem Text="Home" Url="https://blazor.syncfusion.com/documentation/breadcrumb/introduction"></BreadcrumbItem>
        <BreadcrumbItem Text="Getting" Url="https://blazor.syncfusion.com/documentation/breadcrumb/getting-started"></BreadcrumbItem>
        <BreadcrumbItem Text="Icons" Url="https://blazor.syncfusion.com/documentation/breadcrumb/icons"></BreadcrumbItem>
        <BreadcrumbItem Text="Navigation" Url="https://blazor.syncfusion.com/documentation/breadcrumb/navigation"></BreadcrumbItem>
        <BreadcrumbItem Text="Overflow" Url="https://blazor.syncfusion.com/documentation/breadcrumb/overflow"></BreadcrumbItem>
    </BreadcrumbItems>
    <BreadcrumbTemplates>
        <SeparatorTemplate>
            <span class="e-icons e-arrow"></span>
        </SeparatorTemplate>
    </BreadcrumbTemplates>
</SfBreadcrumb>

Use case: Menu mode is useful for deep hierarchies where some items are hidden initially but accessible via a dropdown menu.

---

Wrap Mode

Wrap mode wraps breadcrumb items to multiple lines when the breadcrumb's width exceeds the container space.

@using Syncfusion.Blazor.Navigations

<SfBreadcrumb MaxItems="3" EnableNavigation="false" OverflowMode="BreadcrumbOverflowMode.Wrap">
    <BreadcrumbItems>
        <BreadcrumbItem Text="Home" Url="https://blazor.syncfusion.com/documentation/breadcrumb/introduction"></BreadcrumbItem>
        <BreadcrumbItem Text="Getting" Url="https://blazor.syncfusion.com/documentation/breadcrumb/getting-started"></BreadcrumbItem>
        <BreadcrumbItem Text="Icons" Url="https://blazor.syncfusion.com/documentation/breadcrumb/icons"></BreadcrumbItem>
        <BreadcrumbItem Text="Navigation" Url="https://blazor.syncfusion.com/documentation/breadcrumb/navigation"></BreadcrumbItem>
        <BreadcrumbItem Text="Overflow" Url="https://blazor.syncfusion.com/documentation/breadcrumb/overflow"></BreadcrumbItem>
    </BreadcrumbItems>
    <BreadcrumbTemplates>
        <SeparatorTemplate>
            <span class="e-icons e-arrow"></span>
        </SeparatorTemplate>
    </BreadcrumbTemplates>
</SfBreadcrumb>

Use case: Wrap mode is ideal for responsive designs where you want all items visible, even if they need to wrap to multiple lines.

---

Scroll Mode

Scroll mode displays a horizontal scrollbar when the breadcrumb's width exceeds the container space.

@using Syncfusion.Blazor.Navigations

<SfBreadcrumb MaxItems="3" EnableNavigation="false" OverflowMode="BreadcrumbOverflowMode.Scroll">
    <BreadcrumbItems>
        <BreadcrumbItem Text="Home" Url="https://blazor.syncfusion.com/documentation/breadcrumb/introduction"></BreadcrumbItem>
        <BreadcrumbItem Text="Getting" Url="https://blazor.syncfusion.com/documentation/breadcrumb/getting-started"></BreadcrumbItem>
        <BreadcrumbItem Text="Icons" Url="https://blazor.syncfusion.com/documentation/breadcrumb/icons"></BreadcrumbItem>
        <BreadcrumbItem Text="Navigation" Url="https://blazor.syncfusion.com/documentation/breadcrumb/navigation"></BreadcrumbItem>
        <BreadcrumbItem Text="Overflow" Url="https://blazor.syncfusion.com/documentation/breadcrumb/overflow"></BreadcrumbItem>
        <BreadcrumbItem Text="Overflow1" Url="https://blazor.syncfusion.com/documentation/breadcrumb/overflow"></BreadcrumbItem>
        <BreadcrumbItem Text="Overflow2" Url="https://blazor.syncfusion.com/documentation/breadcrumb/overflow"></BreadcrumbItem>
    </BreadcrumbItems>
    <BreadcrumbTemplates>
        <SeparatorTemplate>
            <span class="e-icons e-arrow"></span>
        </SeparatorTemplate>
    </BreadcrumbTemplates>
</SfBreadcrumb>

Use case: Scroll mode is useful for fixed-width containers where you want to maintain breadcrumb height while allowing horizontal navigation.

---

Hidden Mode

Hidden mode displays the maximum number of items possible in the container space and hides the remaining items. Clicking on a previous item reveals the hidden items.

@using Syncfusion.Blazor.Navigations

<SfBreadcrumb MaxItems="3" EnableNavigation="false" OverflowMode="BreadcrumbOverflowMode.Hidden">
    <BreadcrumbItems>
        <BreadcrumbItem Text="Home" Url="https://blazor.syncfusion.com/documentation/breadcrumb/introduction"></BreadcrumbItem>
        <BreadcrumbItem Text="Getting" Url="https://blazor.syncfusion.com/documentation/breadcrumb/getting-started"></BreadcrumbItem>
        <BreadcrumbItem Text="Icons" Url="https://blazor.syncfusion.com/documentation/breadcrumb/icons"></BreadcrumbItem>
        <BreadcrumbItem Text="Navigation" Url="https://blazor.syncfusion.com/documentation/breadcrumb/navigation"></BreadcrumbItem>
        <BreadcrumbItem Text="Overflow" Url="https://blazor.syncfusion.com/documentation/breadcrumb/overflow"></BreadcrumbItem>
    </BreadcrumbItems>
    <BreadcrumbTemplates>
        <SeparatorTemplate>
            <span class="e-icons e-arrow"></span>
        </SeparatorTemplate>
    </BreadcrumbTemplates>
</SfBreadcrumb>

Use case: Hidden mode keeps the breadcrumb compact while allowing users to navigate backwards to reveal hidden items.

---

None Mode

None mode displays all breadcrumb items on a single line without any overflow handling. Items may overflow the container if space is limited.

@using Syncfusion.Blazor.Navigations

<SfBreadcrumb OverflowMode="BreadcrumbOverflowMode.None">
    <BreadcrumbItems>
        <BreadcrumbItem Text="Home" Url="https://blazor.syncfusion.com/documentation/breadcrumb/introduction"></BreadcrumbItem>
        <BreadcrumbItem Text="Getting" Url="https://blazor.syncfusion.com/documentation/breadcrumb/getting-started"></BreadcrumbItem>
        <BreadcrumbItem Text="Icons" Url="https://blazor.syncfusion.com/documentation/breadcrumb/icons"></BreadcrumbItem>
    </BreadcrumbItems>
</SfBreadcrumb>

Use case: None mode is suitable for applications with predictable, short breadcrumb trails or when space is not a constraint.

Styling and Appearance

Table of Contents

• CSS Classes
• Customizing Breadcrumb Appearance
• Theme Studio Integration

---

CSS Classes

The Breadcrumb component uses the following CSS classes for customization:

---

Customizing Breadcrumb Appearance

Use CSS to override the default Breadcrumb styling. Here's an example of customizing background, text color, icon color, and separator color:

@using Syncfusion.Blazor.Navigations

<SfBreadcrumb class="e-custom">
    <BreadcrumbItems>
        <BreadcrumbItem IconCss="e-icons e-home"></BreadcrumbItem>
        <BreadcrumbItem IconCss="e-icons e-folder-open" Text="Open" Url="https://blazor.syncfusion.com/demos/datagrid/overview"></BreadcrumbItem>
        <BreadcrumbItem IconCss="e-icons e-file-new" Text="New"></BreadcrumbItem>
    </BreadcrumbItems>
</SfBreadcrumb>

<style>
    .e-custom.e-breadcrumb .e-breadcrumb-item {
        background: antiquewhite;
    }
    .e-custom.e-breadcrumb .e-breadcrumb-text {
        color: lime !important;
    }
    .e-custom.e-breadcrumb .e-breadcrumb-icon {
        color: indianred !important;
    }
    .e-custom.e-breadcrumb .e-breadcrumb-separator {
        color: blue;
    }
    .e-custom.e-breadcrumb {
        background-color: azure;
    }
</style>

Customization details:

• .e-breadcrumb-item - Sets item background color to antiquewhite
• .e-breadcrumb-text - Sets text color to lime
• .e-breadcrumb-icon - Sets icon color to indianred
• .e-breadcrumb-separator - Sets separator color to blue
• .e-breadcrumb - Sets container background to azure

Define custom CSS class (e-custom) on the SfBreadcrumb component and target specific child elements to customize appearance.

---

Theme Studio Integration

Create and apply custom themes using Syncfusion Theme Studio:

1. Visit the Theme Studio link 2. Customize colors, typography, and spacing 3. Download the custom theme CSS 4. Include the custom theme in your index.html or _Layout.cshtml

Example of including a custom theme:

<!-- Replace the default theme with your custom theme -->
<link href="/custom-breadcrumb-theme.css" rel="stylesheet" />

Theme Studio allows you to:

• Override default color palettes
• Customize component dimensions
• Adjust typography for better readability
• Create consistent theming across all Syncfusion components

The custom theme CSS file generated by Theme Studio contains all necessary overrides for the Breadcrumb component's appearance.

Templates and Customization

Table of Contents

• ItemTemplate
• SeparatorTemplate
• Template Context
• Chip Component Integration
• Specific Item Customization

---

ItemTemplate

Use the ItemTemplate parameter to customize how individual breadcrumb items render:

@using Syncfusion.Blazor.Navigations

<SfBreadcrumb>
    <BreadcrumbItems>
        <BreadcrumbItem Text="Home"></BreadcrumbItem>
        <BreadcrumbItem Text="Products"></BreadcrumbItem>
        <BreadcrumbItem Text="Current"></BreadcrumbItem>
    </BreadcrumbItems>
    <BreadcrumbTemplates>
        <ItemTemplate>
            <span style="font-weight: bold; color: blue;">@context.Text</span>
        </ItemTemplate>
    </BreadcrumbTemplates>
</SfBreadcrumb>

The context parameter in ItemTemplate contains the current BreadcrumbItem object. You can access item properties like Text, Url, and IconCss to customize the rendering.

---

SeparatorTemplate

Use the SeparatorTemplate parameter to customize the separator between breadcrumb items:

@using Syncfusion.Blazor.Navigations

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

<style>
    .e-arrow::before {
        content: '\e763';
        font-size: 12px;
    }
</style>

The SeparatorTemplate renders between each pair of breadcrumb items. Use it to display custom separators like arrows, slashes, or other visual elements.

---

Template Context

The context parameter in templates gives access to the current BreadcrumbItem properties:

@using Syncfusion.Blazor.Navigations

<SfBreadcrumb>
    <BreadcrumbItems>
        <BreadcrumbItem Text="Home" Url="/" IconCss="e-icons e-home"></BreadcrumbItem>
        <BreadcrumbItem Text="Products" Url="/products"></BreadcrumbItem>
        <BreadcrumbItem Text="Current"></BreadcrumbItem>
    </BreadcrumbItems>
    <BreadcrumbTemplates>
        <ItemTemplate>
            <span>@context.Text (@context.Url)</span>
        </ItemTemplate>
    </BreadcrumbTemplates>
</SfBreadcrumb>

Access context.Text, context.Url, and context.IconCss to build dynamic item templates based on item data.

You can also rename the implicit context parameter using the Context attribute:

<ItemTemplate Context="item">
    <span>@item.Text</span>
</ItemTemplate>

---

Chip Component Integration

Render breadcrumb items as Chip components using ItemTemplate:

@using Syncfusion.Blazor.Navigations
@using Syncfusion.Blazor.Buttons

<SfBreadcrumb class="e-breadcrumb-chips">
    <BreadcrumbItems>
        <BreadcrumbItem Text="Cart"></BreadcrumbItem>
        <BreadcrumbItem Text="Billing"></BreadcrumbItem>
        <BreadcrumbItem Text="Shipping"></BreadcrumbItem>
        <BreadcrumbItem Text="Payment"></BreadcrumbItem>
    </BreadcrumbItems>
    <BreadcrumbTemplates>
        <ItemTemplate>
            <SfChip>
                <ChipItems>
                    <ChipItem Text="@context.Text" Enabled="true"></ChipItem>
                </ChipItems>
            </SfChip>
        </ItemTemplate>
    </BreadcrumbTemplates>
</SfBreadcrumb>

This renders each breadcrumb item as a Chip component, providing a modern, styled appearance for breadcrumb items.

---

Specific Item Customization

Customize individual breadcrumb items by adding custom elements as child content:

@using Syncfusion.Blazor.Navigations

<SfBreadcrumb EnableNavigation="false" ActiveItem="@ActiveItem">
    <BreadcrumbItems>
        <BreadcrumbItem Text="Home" Url="/" />
        <BreadcrumbItem Text="Products" Url="/products" />
        <BreadcrumbItem Text="Electronics" Url="/electronics" />
        <BreadcrumbItem>
            <span class="e-searchfor-text">
                <span style="margin-right: 5px">Search for:</span>
                <a class="e-breadcrumb-text" href="./details" onclick="return false">Current Item</a>
            </span>
        </BreadcrumbItem>
    </BreadcrumbItems>
</SfBreadcrumb>

<style>
    .e-searchfor-text {
        display: flex;
        align-items: center;
        font-size: 14px;
        font-weight: normal;
    }

    .e-searchfor-text .e-breadcrumb-text {
        padding-left: 0;
    }
</style>

@code {
    private string ActiveItem = "";
}

Use child content within a BreadcrumbItem to render custom HTML for that specific item. This provides granular control over individual breadcrumb item appearance and behavior.