Class SfBreadcrumb

Breadcrumb component is a graphical user interface that helps to identify or highlight the current location within a hierarchical structure of websites. The aim is to make the user aware of their current position in a hierarchy of website links.

Inheritance
System.Object
SfBaseComponent
SfBreadcrumb
Inherited Members
Namespace: Syncfusion.Blazor.Navigations
Assembly: Syncfusion.Blazor.dll
Syntax
public class SfBreadcrumb : SfBaseComponent
Remarks

Breadcrumb items can be populated either by specifying Url property or by specifying BreadcrumbItem within BreadcrumbItems tag directive. ItemTemplate and SeparatorTemplate can be used to customize the Breadcrumb component UI using BreadcrumbTemplates tag directive.

Examples

In the below code example, a basic Breadcrumb component initialized with BreadcrumbItems tag directive.

<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/menu-bar/default-functionalities"></BreadcrumbItem>
        <BreadcrumbItem Text="Breadcrumb" Url="https://blazor.syncfusion.com/demos/breadcrumb/default-functionalities"></BreadcrumbItem>
    </BreadcrumbItems>
</SfBreadcrumb>

Constructors

SfBreadcrumb()

Declaration
public SfBreadcrumb()

Properties

ActiveItem

Gets or sets the Url of the active breadcrumb item.

Declaration
public string ActiveItem { get; set; }
Property Value
Type Description
System.String

This property contains Url string of active breadcrumb item.
Remarks

This property is updated only when the Url has value.

Examples
<SfBreadcrumb>
    <BreadcrumbItems ActiveItem="@activeItem">
        <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/menu-bar/default-functionalities"></BreadcrumbItem>
        <BreadcrumbItem Text="Breadcrumb" Url="https://blazor.syncfusion.com/demos/breadcrumb/default-functionalities"></BreadcrumbItem>
    </BreadcrumbItems>
</SfBreadcrumb>
@code {
    private string activeItem = "https://blazor.syncfusion.com/demos/menu-bar/default-functionalities";
}

Disabled

Gets or sets whether the breadcrumb component is disabled or not.

Declaration
public bool Disabled { get; set; }
Property Value
Type Description
System.Boolean

true, if the breadcrumb component is disabled. The default value is false.

EnableActiveItemNavigation

Gets or sets whether the navigation is enabled for active item (last breadcrumb item).

Declaration
public bool EnableActiveItemNavigation { get; set; }
Property Value
Type Description
System.Boolean

true, if the navigation is enabled for last breadcrumb item and it is clickable. otherwise, false.The default value is false.

EnableNavigation

Gets or sets whether the built-in item navigation is enabled or not. The breadcrumb component navigates to url based on the item clicked by user.

Declaration
public bool EnableNavigation { get; set; }
Property Value
Type Description
System.Boolean

true, if built-in item navigation is enabled; otherwise, false.The default value is true.
Remarks

You can handle navigation in using ItemClicked event by setting EnableNavigation as false.

EnablePersistence

Gets or sets whether to persist component's state between page reloads. When set to true, the ActiveItem property is persisted.

Declaration
public bool EnablePersistence { get; set; }
Property Value
Type Description
System.Boolean

true, if the component's state persistence is enabled. The default value is false.
Remarks

Component's ActiveItem property will be stored in browser local storage to persist component's state when page reloads.

EnableRtl

Gets or sets whether the right to left direction is enabled for breadcrumb component.

Declaration
public bool EnableRtl { get; set; }
Property Value
Type Description
System.Boolean

true, if the right to left direction is enabled for breadcrumb component. The default value is false.

HtmlAttributes

Gets or sets a collection of additional attributes that will applied to the Breadcrumb container element.

Declaration
public Dictionary<string, object> HtmlAttributes { get; set; }
Property Value
Type Description
System.Collections.Generic.Dictionary<System.String, System.Object>

A dictionary of additional HTML attributes for the root element of the component.
Remarks

Additional attributes can be added by specifying as inline attributes or by specifying @attributes directive.

Examples

In the below code example, Breadcrumb width has been specified as style attribute in SfBreadcrumb tag directive.

<SfBreadcrumb style="width:200px">
    <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/menu-bar/default-functionalities"></BreadcrumbItem>
        <BreadcrumbItem Text="Breadcrumb" Url="https://blazor.syncfusion.com/demos/breadcrumb/default-functionalities"></BreadcrumbItem>
    </BreadcrumbItems>
</SfBreadcrumb>

ItemClicked

Gets or sets an event callback that is raised when the BreadcrumbItem is clicked.

Declaration
public EventCallback<BreadcrumbClickedEventArgs> ItemClicked { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.EventCallback<BreadcrumbClickedEventArgs>

An event callback function.
Remarks

You can customize the item navigation using BreadcrumbClickedEventArgs by setting EnableNavigation as false. The event is raised for UI based click only.

Examples
@inject NavigationManager NavigationManager
<SfBreadcrumb ItemClicked="@ItemClicked" EnableNavigation="false">
    <BreadcrumbItems>
        <BreadcrumbItem Text="Program Files" Url="programfiles"></BreadcrumbItem>
        <BreadcrumbItem Text="Commom Files" Url="commomfiles"></BreadcrumbItem>
        <BreadcrumbItem Text="Services" Url="services"></BreadcrumbItem>
        <BreadcrumbItem Text="Config" Url="config"></BreadcrumbItem>
    </BreadcrumbItems>
</SfBreadcrumb>
@code {
    private void ItemClicked(BreadcrumbClickedEventArgs args) {
        NavigationManager.NavigateTo(args.Item.Url);
    }
}

ItemRendering

Gets or sets an event callback that is raised while rendering BreadcrumbItem.

Declaration
public EventCallback<BreadcrumbItemRenderingEventArgs> ItemRendering { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.EventCallback<BreadcrumbItemRenderingEventArgs>

An event callback function.
Remarks

You can customize the breadcrumb items rendering using BreadcrumbItemRenderingEventArgs.

Examples

In the below code example, the breadcrumb item text is changed to lower casing using ItemRendering event.

<SfBreadcrumb ItemRendering="@ItemRendering">
    <BreadcrumbItems>
        <BreadcrumbItem Text="Program Files"></BreadcrumbItem>
        <BreadcrumbItem Text="Commom Files"></BreadcrumbItem>
        <BreadcrumbItem Text="Services"></BreadcrumbItem>
        <BreadcrumbItem Text="Config.json"></BreadcrumbItem>
    </BreadcrumbItems>
</SfBreadcrumb>
@code {
    private void ItemRendering(BreadcrumbItemRenderingEventArgs args) {
        args.Item.Text = args.Item.Text.ToLower();
    }
}

Items

Gets or sets the list of breadcrumb items that will be populated using the BreadcrumbItems tag directive.

Declaration
public List<BreadcrumbItem> Items { get; set; }
Property Value
Type Description
System.Collections.Generic.List<BreadcrumbItem>

BreadcrumbItems

MaxItems

Gets or sets the maximum number of breadcrumb items to be visible in the breadcrumb component. If the number of items exceeds this count, then items are rendered based on OverflowMode property.

Declaration
public int MaxItems { get; set; }
Property Value
Type Description
System.Int32

The number of breadcrumb items to be visible in breadcrumb component. The default value is 0.
Remarks

The MaxItems is applicable only if the number of BreadcrumbItem is greater than 2.

OverflowMode

Gets or sets a value that indicates how to display breadcrumb items when the breadcrumb items count exceeds MaxItems.

Declaration
public BreadcrumbOverflowMode OverflowMode { get; set; }
Property Value
Type Description
BreadcrumbOverflowMode

One of the BreadcrumbOverflowMode enumeration. The default value is Menu
Remarks

If the OverflowMode is Hidden, the exceeded items will be hidden and while clicking on the previous item, the hidden item will become visible. If the OverflowMode is Collapsed, only the first and last items will be visible, and the remaining items will be hidden with collapsed icon. When the collapsed icon is clicked, all items become visible and scroll will be enabled if the space is not enough to show all items. If the OverflowMode is Menu, it shows the number of breadcrumb items that can be accommodated within the container space, and creates a sub menu with the remaining items. If the OverflowMode is Wrap, it wraps the items on multiple lines when the Breadcrumb�s width exceeds the container space. If the OverflowMode is Scroll, it shows an HTML scroll bar when the Breadcrumb�s width exceeds the container space. If the OverflowMode is None, it shows all the items on a single line.

Url

Gets or sets the Url based on which the Breadcrumb items are generated.

Declaration
public string Url { get; set; }
Property Value
Type Description
System.String

The value as a Url string to generate Breadcrumb items. The default value is String.Empty.
Remarks

You can specify only absolute Url to this property.

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

Methods

BuildRenderTree(RenderTreeBuilder)

Declaration
protected override void BuildRenderTree(RenderTreeBuilder __builder)
Parameters
Type Name Description
Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder __builder

OnAfterRenderAsync(Boolean)

Declaration
protected override Task OnAfterRenderAsync(bool firstRender)
Parameters
Type Name Description
System.Boolean firstRender
Returns
Type
System.Threading.Tasks.Task
Overrides

OnInitializedAsync()

Declaration
protected override Task OnInitializedAsync()
Returns
Type
System.Threading.Tasks.Task
Overrides

OnParametersSetAsync()

Declaration
protected override Task OnParametersSetAsync()
Returns
Type
System.Threading.Tasks.Task

ShouldRender()

Declaration
protected override bool ShouldRender()
Returns
Type
System.Boolean