Class BreadcrumbItem

A class that represents breadcrumb component item of SfBreadcrumb component.

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

You can render icon only, text only, icon and text breadcrumb item by specifying value to corresponding property. Additional attributes can be added to Breadcrumb item using @attributes directive.

Examples

In the below code example, a basic Breadcrumb item has been added using BreadcrumbItem 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

BreadcrumbItem()

Declaration
public BreadcrumbItem()

Properties

ChildContent

Gets or sets the child content for the Breadcrumb item. If the child content is not specified breadcrumb item is rendered using Text content.

Declaration
public RenderFragment ChildContent { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.RenderFragment

The template content. The default value in null.
Examples

In the below code example, content has been set to BreadcrumbItem using Text property and ChildContent property.

<SfBreadcrumb>
    <BreadcrumbItems>
        <BreadcrumbItem><span>Components</span></BreadcrumbItem>
    </BreadcrumbItems>
</SfBreadcrumb>

Disabled

Gets or sets whether the Breadcrumb item is disabled or not.

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

true, if the Breadcrumb item is disabled. The default value is false.
Examples
<SfBreadcrumb">
    <BreadcrumbItems>
        <BreadcrumbItem Text="Home" Url="https://blazor.syncfusion.com/demos/"></BreadcrumbItem>
        <BreadcrumbItem Disabled="true" 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>
    </BreadcrumbItems>
</SfBreadcrumb>

HtmlAttributes

Gets or sets a collection of additional attributes that will be applied to the breadcrumb item element.

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

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

Examples

In the below code example, title attribute added as inline in BreadcrumbItem tag directive.

<SfBreadcrumb>
    <BreadcrumbItems>
        <BreadcrumbItem Text="Home" title="Home"></BreadcrumbItem>
    </BreadcrumbItems>
</SfBreadcrumb>

IconCss

Gets or sets a CSS class string to include an icon or image for the breadcrumb item.

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

Accepts a CSS class string separated by space to include an icon or image for the breadcrumb item. The default value is String.Empty.
Examples
<SfBreadcrumb>
    <BreadcrumbItems>
        <BreadcrumbItem IconCss="e-icons e-home"></BreadcrumbItem>
    </BreadcrumbItems>
</SfBreadcrumb>

Text

Gets or sets the text content of the Breadcrumb item.

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

Accepts a string value. The default value is String.Empty.
Remarks

Set child content within BreadcrumbItem tag directive, to render as HTML content.

Examples

In the below code example, content has been set to BreadcrumbItem using Text property and ChildContent property.

<SfBreadcrumb>
    <BreadcrumbItems>
        <BreadcrumbItem Text="Home"></BreadcrumbItem>
    </BreadcrumbItems>
</SfBreadcrumb>
<SfBreadcrumb>
    <BreadcrumbItems>
        <BreadcrumbItem>Home</BreadcrumbItem>
        <BreadcrumbItem><span>Components</span></BreadcrumbItem>
    </BreadcrumbItems>
</SfBreadcrumb>

Url

Gets or sets the Url of the Breadcrumb item and that will be navigated when clicked.

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

Accepts Url string value. The default value is String.Empty.
Remarks

When Url has not been set, you can customize the item navigation using ItemClicked event.

Examples
<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>
    </BreadcrumbItems>
</SfBreadcrumb>

Methods

OnInitializedAsync()

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