Navigation in Blazor Breadcrumb

14 Aug 20262 minutes to read

By default, Blazor Breadcrumb items support navigation for relative or absolute URLs. Set the EnableNavigation property to false to handle navigation yourself (for example, by using the ItemClick event with NavigationManager).

Relative URL

Set a relative URL in the Url property of the BreadcrumbItem. In the following example, the items use relative URLs.

@using Syncfusion.Blazor.Navigations

<SfBreadcrumb>
    <BreadcrumbItems>
        <BreadcrumbItem Text="Home" Url="../"></BreadcrumbItem>
        <BreadcrumbItem Text="Breadcrumb" Url="./breadcrumb/getting-started"></BreadcrumbItem>
        <BreadcrumbItem Text="Default" Url="../"></BreadcrumbItem>
        <BreadcrumbItem Text="Icons" Url="./breadcrumb/icons"></BreadcrumbItem>
        <BreadcrumbItem Text="Navigation" Url="./breadcrumb/navigation"></BreadcrumbItem>
        <BreadcrumbItem Text="Overflow" Url="./breadcrumb/overflow"></BreadcrumbItem>
    </BreadcrumbItems>
</SfBreadcrumb>
<img src="./images/blazor-Breadcrumb-relative-url.webp" alt="="[Blazor Breadcrumb Component">

Absolute URL

Set an absolute URL in the Url property of the BreadcrumbItem. Use absolute URLs when items should navigate to external sites or to a known absolute path.

@using Syncfusion.Blazor.Navigations

<SfBreadcrumb>
    <BreadcrumbItems>
        <BreadcrumbItem Text="Home" Url="https://blazor.syncfusion.com/documentation/breadcrumb/introduction"></BreadcrumbItem>
        <BreadcrumbItem Text="Getting" Url="https://blazor.syncfusion.com/documentation/breadcrumb/getting-started"></BreadcrumbItem>
        <BreadcrumbItem Text="Icons" Url="https://blazor.syncfusion.com/documentation/breadcrumb/icons"></BreadcrumbItem>
        <BreadcrumbItem Text="Navigation" Url="https://blazor.syncfusion.com/documentation/breadcrumb/navigation"></BreadcrumbItem>
        <BreadcrumbItem Text="Overflow" Url="https://blazor.syncfusion.com/documentation/breadcrumb/overflow"></BreadcrumbItem>
    </BreadcrumbItems>
</SfBreadcrumb>
<img src="./images/blazor-Breadcrumb-absolute-url.webp" alt="="[Blazor Breadcrumb Component">

Enable navigation for the last Breadcrumb item

By default, the last (active) Breadcrumb item is not clickable because it represents the current page. Set the EnableActiveItemNavigation property to true to make the last item navigable.

@using Syncfusion.Blazor.Navigations

<SfBreadcrumb EnableActiveItemNavigation="true">
    <BreadcrumbItems>
        <BreadcrumbItem Text="Home" Url="https://blazor.syncfusion.com/documentation/breadcrumb/introduction"></BreadcrumbItem>
        <BreadcrumbItem Text="Getting" Url="https://blazor.syncfusion.com/documentation/breadcrumb/getting-started"></BreadcrumbItem>
        <BreadcrumbItem Text="Icons" Url="https://blazor.syncfusion.com/documentation/breadcrumb/icons"></BreadcrumbItem>
        <BreadcrumbItem Text="Navigation" Url="https://blazor.syncfusion.com/documentation/breadcrumb/navigation"></BreadcrumbItem>
        <BreadcrumbItem Text="Overflow" Url="https://blazor.syncfusion.com/documentation/breadcrumb/overflow"></BreadcrumbItem>
    </BreadcrumbItems>
</SfBreadcrumb>
<img src="./images/blazor-Breadcrumb-enable-navigation.webp" alt="="[Blazor Breadcrumb Component">

See also