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

SfBaseComponent.Dispose()

SfBaseComponent.Dispose(Boolean)

SfBaseComponent.OnObservableChange(String, Object, Boolean, NotifyCollectionChangedEventArgs)

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

BreadcrumbItems

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

SfBaseComponent.OnAfterRenderAsync(Boolean)

OnInitializedAsync()

Declaration

protected override Task OnInitializedAsync()

Returns

Type
System.Threading.Tasks.Task

Overrides

SfBaseComponent.OnInitializedAsync()

OnParametersSetAsync()

Declaration

protected override Task OnParametersSetAsync()

Returns

Type
System.Threading.Tasks.Task

ShouldRender()

Declaration

protected override bool ShouldRender()

Returns

Type
System.Boolean