Style and Appearance in Blazor Breadcrumb

27 Aug 20263 minutes to read

To modify the Blazor Breadcrumb appearance, override the default CSS classes of the component. The table below lists the available CSS classes and the section of the Blazor Breadcrumb each one targets. You can also create a custom theme for the component using the Theme Studio.

CSS classes

CSS Class Targets Purpose
.e-breadcrumb Root container Customizes the background of the entire Blazor Breadcrumb.
.e-breadcrumb .e-breadcrumb-item Each item Customizes the background of a Blazor Breadcrumb item.
.e-breadcrumb .e-breadcrumb-text Item label Customizes the color of a Blazor Breadcrumb item’s text.
.e-breadcrumb .e-breadcrumb-link Item anchor Customizes the color and text decoration of a Blazor Breadcrumb item’s link.
.e-breadcrumb .e-breadcrumb-icon Item icon Customizes the color of a Blazor Breadcrumb item’s icon.
.e-breadcrumb .e-breadcrumb-separator Item separator Customizes the color and style of the Blazor Breadcrumb separator.
.e-breadcrumb .e-breadcrumb-item.e-disabled Disabled item Customizes the appearance of a disabled Blazor Breadcrumb item.

To scope a custom style to a single Blazor Breadcrumb instance, apply a custom class (for example, CssClass="e-custom") to the component and prefix each selector with that class: .e-custom.e-breadcrumb .e-breadcrumb-text { ... }.

Customizing the appearance

Use the following CSS to customize the background, text color, icon color, and separator color of the Blazor Breadcrumb. Place the <style> block in the same .razor file (or in a global stylesheet under wwwroot/css/) so the styles are applied when the component renders.

@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>
<img src="./images/blazor-breadcrumb-style-and-appearance.webp" alt="="[Blazor Breadcrumb with Style and Appearance">

See also