Icons in Blazor Breadcrumb

14 Aug 20264 minutes to read

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

NOTE

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.

Set the IconCss property to e-icons plus the icon’s class name to render a font icon on a 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">

NOTE

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

Add an image to a 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">

Add an SVG image to a 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="="[Breadcrumb Sample">

Icon only

Use the IconCss property to display only an icon for a 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="="[Breadcrumb Sample">

NOTE

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 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