Navigation in Blazor Breadcrumb Component
9 Aug 20232 minutes to read
By default, Blazor Breadcrumb items support navigation for relative or absolute URL. You can handle the custom navigation by setting EnableNavigation property as false
.
Relative URL
You can specify relative URL in the Url property of the BreadcrumbItem. In the following example, the items contains the relative URL.
@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>
Absolute URL
You can specify absolute URL in the Url property of the BreadcrumbItem. In the following example, the items contains the absolute URL.
@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>
Enable navigation for last Breadcrumb item
Breadcrumb enables the navigation for the last item by setting the EnableActiveItemNavigation property as true
. In the following example, the navigation is enabled for last Breadcrumb item.
@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>