Class BreadcrumbTemplates

Represents template options in SfBreadcrumb component.

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

ItemTemplate or SeparatorTemplate can be set BreadcrumbTemplates tag directive. To access template's context parameter use @context in both ItemTemplate and SeparatorTemplate.

Examples

In the below code example, both ItemTemplate and SeparatorTemplate has been specified.

<SfBreadcrumb>
    <BreadcrumbItems>
        <BreadcrumbItem Text="Home"></BreadcrumbItem>
        <BreadcrumbItem Text="Components"></BreadcrumbItem>
        <BreadcrumbItem Text="Navigations"></BreadcrumbItem>
    </BreadcrumbItems>
    <BreadcrumbTemplates>
        <ItemTemplate>
            <i>@context.Text</i>
        </ItemTemplate>
        <SeparatorTemplate>
            <span class="e-icons e-arrow"></span>
        </SeparatorTemplate>
    </BreadcrumbTemplates>
</SfBreadcrumb>

Constructors

BreadcrumbTemplates()

Declaration
public BreadcrumbTemplates()

Properties

ItemTemplate

Gets or sets template as Microsoft.AspNetCore.Components.RenderFragment, that defines custom appearance of breadcrumb items. Here, context refers to the BreadcrumbItem for which the template is applied.

Declaration
public RenderFragment<BreadcrumbItem> ItemTemplate { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.RenderFragment<BreadcrumbItem>

A template content that specifies the visualization of breadcrumb items. The default value in null.
Remarks

The ItemTemplate used to define appearance of breadcrumb items. Use the template’s context parameter to access the BreadcrumbItem properties. Specify ItemTemplate within BreadcrumbTemplates tag directive.

Examples

In the below code example, italic style Breadcrumb item text has been rendered using ItemTemplate.

<SfBreadcrumb>
    <BreadcrumbItems>
        <BreadcrumbItem Text="Home"></BreadcrumbItem>
        <BreadcrumbItem Text="Components"></BreadcrumbItem>
        <BreadcrumbItem Text="Navigations"></BreadcrumbItem>
    </BreadcrumbItems>
    <BreadcrumbTemplates>
        <ItemTemplate>
            <i>@context.Text</i>
        </ItemTemplate>
    </BreadcrumbTemplates>
</SfBreadcrumb>

SeparatorTemplate

Gets or sets template as Microsoft.AspNetCore.Components.RenderFragment, that defines custom appearance of breadcrumb items separator. Here, context refers to the BreadcrumbItem for previous and current item which the template is applied.

Declaration
public RenderFragment<ValueTuple<BreadcrumbItem, BreadcrumbItem>> SeparatorTemplate { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.RenderFragment<System.ValueTuple<BreadcrumbItem, BreadcrumbItem>>

A template content that specifies the visualization of breadcrumb items separator. The default value in null.
Remarks

The SeparatorTemplate used to define appearance of breadcrumb items separator. Use the template’s context parameter to access the previous and current BreadcrumbItem properties. Specify SeparatorTemplate within BreadcrumbTemplates tag directive.

Examples

In the below code example, caret icon is rendered as Breadcrumb items separator using SeparatorTemplate.

<SfBreadcrumb>
    <BreadcrumbItems>
        <BreadcrumbItem Text="Home"></BreadcrumbItem>
        <BreadcrumbItem Text="Components"></BreadcrumbItem>
        <BreadcrumbItem Text="Navigations"></BreadcrumbItem>
    </BreadcrumbItems>
    <BreadcrumbTemplates>
        <SeparatorTemplate>
            <span class="e-icons e-arrow"></span>
        </SeparatorTemplate>
    </BreadcrumbTemplates>
</SfBreadcrumb>

Methods

OnInitializedAsync()

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