Class BreadcrumbItem

A class that represents breadcrumb component item of SfBreadcrumb component.

Inheritance

System.Object

BreadcrumbItem

Namespace: Syncfusion.Blazor.Navigations

Assembly: Syncfusion.Blazor.dll

Syntax

public class BreadcrumbItem : OwningComponentBase

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
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

Dispose(Boolean)

Declaration

protected override void Dispose(bool disposing)

Parameters

Type	Name	Description
System.Boolean	disposing

OnInitializedAsync()

Declaration

protected override Task OnInitializedAsync()

Returns

Type
System.Threading.Tasks.Task