Breadcrumb Items in Blazor Breadcrumb Component

2 Mar 20221 minute to read

The Blazor Breadcrumb supports to generate items based on the current URL by default. You can set the BreadcrumbItem tag directive or Url property to generate the items.

BreadcrumbItem has the following properties for navigation and its customizations.

  • Url - Sets the URL of the Breadcrumb item and it will navigate when clicked.

  • IconCss - Sets CSS class string to include an icon for the Breadcrumb item.

  • Text - Sets the text content of the Breadcrumb item.

@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/breadcrumb/default-functionalities"></BreadcrumbItem>
        <BreadcrumbItem Text="Breadcrumb" Url="./breadcrumb/default-functionalities"></BreadcrumbItem>
    </BreadcrumbItems>
</SfBreadcrumb>

Blazor Breadcrumb Component

Items based on current URL

The Breadcrumb items can be generated based on the current URL of the page when the user does not specify the Breadcrumb items using the BreadcrumbItem tag directive. The following example shows the Breadcrumb items that are auto generated based on the current URL.

@using Syncfusion.Blazor.Navigations

<SfBreadcrumb></SfBreadcrumb>

Blazor Breadcrumb Component

This output screenshot shows the Bind to Location sample.

Absolute URL

You can generate the Breadcrumb items by providing the Url property in the component as like the below example.

@using Syncfusion.Blazor.Navigations

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

Blazor Breadcrumb Component