Search results

Data binding in ASP.NET Core Breadcrumb control

03 Dec 2021 / 2 minutes to read

Items as tag directive

The Breadcrumb contains e-breadcrumb-items and e-breadcrumb-item tags to render items for the component. To bind items, use e-breadcrumb-items tag and e-breadcrumb-item tag to bind properties for breadcrumb items.

tagHelper
Copied to clipboard
<ejs-breadcrumb id="default" enableNavigation="false">
    <e-breadcrumb-items>
        <e-breadcrumb-item iconCss="e-icons e-home" url="https://ej2.syncfusion.com/home/aspnetcore.html#platform"></e-breadcrumb-item>
        <e-breadcrumb-item text="Components" url="https://ej2.syncfusion.com/aspnetcore/Grid/GridOverview#/material"></e-breadcrumb-item>
        <e-breadcrumb-item text="Navigations" url="https://ej2.syncfusion.com/aspnetcore/Menu/DefaultFunctionalities#/material"></e-breadcrumb-item>
        <e-breadcrumb-item text="Breadcrumb" url="https://ej2.syncfusion.com/aspnetcore/Breadcrumb/DefaultFunctionalities"></e-breadcrumb-item>
    </e-breadcrumb-items>
</ejs-breadcrumb>

  <style>
    @@font-face {
        font-family: 'e-bicons';
        src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
        font-weight: normal;
        font-style: normal;
    }

    .e-bicons {
        font-family: 'e-bicons' !important;
        font-size: 14px;
    }

</style>

Output be like the below.

Breadcrumb Sample

Items based on current Url

The Breadcrumb items can be generated from the current URL of the page, if the url property is not provided or when the user does not specify the breadcrumb items using the BreadcrumbItemDirective tag. The following example shows the breadcrumb items that are generated based on the current URL.

tagHelper
Copied to clipboard
<ejs-breadcrumb id="default" enableNavigation="false">
</ejs-breadcrumb>

Output be like the below.

Breadcrumb Sample

This output screenshot shows the Bind to Location sample. This sample is hosted in different location, so the breadcrumb is rendered with different location instead of the actual location.

Static URL

The Breadcrumb items can be generated by providing the url property in the component, if the user does not specify the breadcrumb items using the BreadcrumbItemDirective tag. The following example shows the breadcrumb items generated from the provided url in the component.

tagHelper
default.cs
Copied to clipboard
<ejs-breadcrumb id="url" enableNavigation="false" url="https://ej2.syncfusion.com/aspnetcore/breadcrumb/navigation"></ejs-breadcrumb>
Copied to clipboard
public ActionResult Index()
{
    return View();
}

Output be like the below.

Breadcrumb Sample

Customize text when generated items using Url

The Breadcrumb items text can be customized by using the beforeItemRender event. In the following example, All Components text was customized as Components.

tagHelper
default.cs
Copied to clipboard
<ejs-breadcrumb id="url" enableNavigation="false" url="https://ej2.syncfusion.com/aspnetcore/Breadcrumb/BindToLocation" beforeItemRender="beforeItemRender"></ejs-breadcrumb>

<script>
    function beforeItemRender(args) {
        if (args.item.text === 'BindToLocation') {
            args.item.text = 'location';
        }
    }
</script>
Copied to clipboard
public ActionResult Index()
{
    return View();
}

Output be like the below.

Breadcrumb Sample