Breadcrumb Items in Blazor Breadcrumb
14 Aug 20263 minutes to read
The Blazor Breadcrumb component supports generating items based on the current URL by default. You can set the BreadcrumbItem tag directive or the Url property on the component to generate the items.
The BreadcrumbItem tag directive has the following properties for navigation and customization.
-
Url - Sets the URL of the Breadcrumb item and navigates to it when clicked.
-
IconCss - Sets the CSS class string used to render an icon for the Breadcrumb item.
-
Text - Sets the text content of the Breadcrumb item.
The example below shows how to define Breadcrumb items using the BreadcrumbItem tag directive.
@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>
Items based on current URL
If no <BreadcrumbItem> tag directive is specified, the Breadcrumb generates items from the current URL. The component reads the URL from Blazor’s NavigationManager and turns each path segment into a Breadcrumb item. Query strings and hash fragments are ignored.
The following example shows the Breadcrumb items that are auto-generated from the current URL.
@using Syncfusion.Blazor.Navigations
<SfBreadcrumb></SfBreadcrumb>NOTE
This output screenshot shows the Bind to Location sample.
Absolute URL
Set the Url property on the SfBreadcrumb component to generate items from an absolute URL. Use the Url property on BreadcrumbItem (covered above) when you want each item to navigate to a different URL.
@using Syncfusion.Blazor.Navigations
<SfBreadcrumb Url="https://blazor.syncfusion.com/demos/breadcrumb/navigation">
</SfBreadcrumb>Add or remove Breadcrumb items
Use the Items property of the Breadcrumb to dynamically add or remove items. The example below shows how to insert items before or after a target item and remove the last item at runtime.
@using Syncfusion.Blazor.Navigations
@using Syncfusion.Blazor.Buttons
<SfBreadcrumb class="e-custom" Items="@items">
</SfBreadcrumb>
<SfButton OnClick="AddBefore">Insert - before </SfButton>
<SfButton OnClick="AddAfter">Insert - After </SfButton>
<SfButton OnClick="Remove">Remove </SfButton>
@code{
List<BreadcrumbItem> items = new List<BreadcrumbItem>
{
new BreadcrumbItem { IconCss = "e-icons e-home"},
new BreadcrumbItem { Text = "Open", IconCss = "e-icons e-folder-open", Url = "https://blazor.syncfusion.com/demos/datagrid/overview"},
new BreadcrumbItem { Text = "New", IconCss = "e-icons e-file-new"}
};
private void AddBefore()
{
var index = items.IndexOf(items.Where(item => item.Text == "Open").FirstOrDefault());
items.Insert(index, new BreadcrumbItem {Text = "Save", IconCss = "e-icons e-save"});
}
private void AddAfter()
{
var index = items.IndexOf(items.Where(item => item.Text == "New").FirstOrDefault());
items.Insert((index + 1), new BreadcrumbItem { Text = "Delete", IconCss = "e-icons e-delete" });
}
private void Remove()
{
items.RemoveAt(items.Count() - 1);
}
}