Class BreadcrumbTemplates

Represents template options in SfBreadcrumb component.

Inheritance
object
ComponentBase
OwningComponentBase
SfOwningComponentBase
SfBaseComponent
BreadcrumbTemplates
Implements
Inherited Members
Namespace: Syncfusion.Blazor.Navigations
Assembly: Syncfusion.Blazor.dll
Syntax
public class BreadcrumbTemplates : SfBaseComponent, IComponent, IHandleEvent, IHandleAfterRender, IDisposable
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 RenderFragment, that defines custom appearance of breadcrumb items. Here, context refers to the BreadcrumbItem for which the template is applied.

Declaration
[Parameter]
public RenderFragment<BreadcrumbItem> ItemTemplate { get; set; }
Property Value
Type Description
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 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
[Parameter]
public RenderFragment<(BreadcrumbItem PreviousItem, BreadcrumbItem NextItem)> SeparatorTemplate { get; set; }
Property Value
Type Description
RenderFragment<(BreadcrumbItem PreviousItem, BreadcrumbItem NextItem)>

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

Method invoked when the component is ready to start.

Declaration
protected override Task OnInitializedAsync()
Returns
Type Description
Task

A System.Threading.Tasks.Task representing any asynchronous operation.
Overrides

Implements