Class BreadcrumbItem

A class that represents breadcrumb component item of SfBreadcrumb component.

Inheritance
object
ComponentBase
OwningComponentBase
SfOwningComponentBase
BreadcrumbItem
Implements
Inherited Members
Namespace: Syncfusion.Blazor.Navigations
Assembly: Syncfusion.Blazor.dll
Syntax
public class BreadcrumbItem : SfOwningComponentBase, IComponent, IHandleEvent, IHandleAfterRender, IDisposable
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
[Parameter]
public RenderFragment ChildContent { get; set; }
Property Value
Type Description
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
[Parameter]
public bool Disabled { get; set; }
Property Value
Type Description
bool

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>

IconCss

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

Declaration
[Parameter]
public string IconCss { get; set; }
Property Value
Type Description
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
[Parameter]
public string Text { get; set; }
Property Value
Type Description
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
[Parameter]
public string Url { get; set; }
Property Value
Type Description
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(bool)

Declaration
protected override void Dispose(bool disposing)
Parameters
Type Name Description
bool disposing
Overrides

OnInitializedAsync()

Declaration
protected override Task OnInitializedAsync()
Returns
Type
Task
Overrides

Implements