Data Binding in Blazor Breadcrumb Component

11 Oct 20211 minute to read

Items as tag directive

The Blazor Breadcrumb contains BreadcrumbItems and BreadcrumbItem tags to render items for the component. To bind items, use BreadcrumbItems tag and BreadcrumbItem tag to bind properties for 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/breadcrumb/default-functionalities"></BreadcrumbItem>
        <BreadcrumbItem Text="Breadcrumb" Url="./breadcrumb/default-functionalities"></BreadcrumbItem>
    </BreadcrumbItems>
</SfBreadcrumb>

Output be like

Items based on current Url

The breadcrumb items can be generated from the current URL of the page, if the Url property is not provided or when the user does not specify the breadcrumb items using the Breadcrumb property. The following example shows the breadcrumb items that are generated based on the current URL.

@using Syncfusion.Blazor.Navigations

<SfBreadcrumb EnableNavigation="false"></SfBreadcrumb>

Output be like

This output screenshot shows the Bind to Location sample.

This sample is hosted in different location, so the breadcrumb is rendered with different location instead of the actual location.

Static Url

The breadcrumb items can be generated by providing the Url property in the component, if the user does not specify the breadcrumb items using the Breadcrumb property. The following example shows the breadcrumb items generated from the provided url in the component.

@using Syncfusion.Blazor.Navigations

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

Output be like