Icons in Blazor Breadcrumb

27 Aug 20264 minutes to read

The Blazor Breadcrumb component supports font icons, images, and SVG icons to provide a visual representation of each item.

Before using font icons, make sure the Syncfusion icon CSS is referenced in your application. See the Syncfusion Blazor getting-started guide for setup details.

Blazor Breadcrumb with font icon

Set the IconCss property to e-icons plus the icon’s class name to render a font icon on a Blazor Breadcrumb item. By default, the icon is positioned to the left side of the 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>
<img src="./images/blazor-breadcrumb-items.webp" alt="="[Blazor Breadcrumb Component">

For the full list of available icon classes, see the Syncfusion Blazor icons library.

Blazor Breadcrumb with image

Add an image to a Blazor Breadcrumb item by setting IconCss to a custom class that targets an image asset. Place the image file in the wwwroot folder (for example, wwwroot/images/home.png) and reference it from CSS.

@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>
<img src="./images/image.webp" alt="="[Blazor Breadcrumb Component">

Blazor Breadcrumb with SVG image

Add an SVG image to a Blazor Breadcrumb item by setting the IconCss property to a class that targets an SVG asset. Place the SVG file in the wwwroot folder (for example, wwwroot/images/home.svg) and reference it from CSS.

@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>
<img src="./images/svg.webp" alt="="[Blazor Breadcrumb Sample">

Icon only

Use the IconCss property to display only an icon for a Blazor Breadcrumb item. When the Text property is not set, only the icon is rendered.

@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>
<img src="./images/icon-only.webp" alt="="[Blazor Breadcrumb Sample">

For icon-only items, set an aria-label (via the HtmlAttributes parameter) so screen readers can announce the action. See Accessibility in Blazor Breadcrumb for details.

Show icon only for first item

To show the icon only on the first Blazor Breadcrumb item, set IconCss on the first item and Text on the remaining items. The following example shows a home icon on the first item and text on the rest.

@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>
<img src="./images/blazor-breadcrumb-items.webp" alt="="[Blazor Breadcrumb Component">

See also