Icons in Breadcrumb
11 Apr 20222 minutes to read
Navigation
The Breadcrumb item navigates to the path while clicking the item. To enable navigation, url
property was bound to the items.
URL
In the Breadcrumb, the item represents the url. The breadcrumb items can be provided with either relative or absolute URL.
Relative URL
The Breadcrumb items with relative URL contain only the path but do not locate the path or server. The following example represents the breadcrumb items with relative url.
@Html.EJS().Breadcrumb("separatorTemplate").EnableNavigation(false).Items(item =>
{
item.Text("Home").Url("../").Add();
item.Text("Getting").Url("./breadcrumb/getting-started").Add();
item.Text("Icons").Url("./breadcrumb/icons").Add();
item.Text("Navigation").Url("./breadcrumb/navigation").Add();
item.Text("Overflow").Url("./breadcrumb/overflow").Add();
}).Render()
public ActionResult Index()
{
return View();
}
Output be like the below.
Absolute URL
The Breadcrumb items with absolute URL contain the path and locate to the resource if the static url is bound to the breadcrumb item. The following example represents the breadcrumb items with static url.
@Html.EJS().Breadcrumb("separatorTemplate").EnableNavigation(false).Items(item =>
{
item.Text("Home").Url("https://ej2.syncfusion.com/home/aspnetmvc.html#platform").Add();
item.Text("Getting").Url("https://ej2.syncfusion.com/aspnetmvc/demos/#/material/grid/overview/").Add();
item.Text("Icons").Url("https://ej2.syncfusion.com/aspnetmvc/Breadcrumb/BindToLocation").Add();
item.Text("Navigation").Url("https://ej2.syncfusion.com/home/aspnetmvc.html#platform").Add();
item.Text("Overflow").Url("https://ej2.syncfusion.com/aspnetmvc/demos/#/material/menu/default").Add();
}).Render()
public ActionResult Index()
{
return View();
}
Output be like the below.
Enable navigation for last Breadcrumb item
The feature enables the last item of the Breadcrumb component by setting the enableActiveItemNavigation
property to true. In the following example, the last item of the Breadcrumb
was enabled.
@Html.EJS().Breadcrumb("default").EnableNavigation(false).EnableActiveItemNavigation(true).Items(item =>
{
item.Text("Home").Url("https://ej2.syncfusion.com/home/aspnetmvc.html#platform").Add();
item.Text("Getting").Url("https://ej2.syncfusion.com/aspnetmvc/demos/#/material/grid/overview/").Add();
item.Text("Icons").Url("https://ej2.syncfusion.com/aspnetmvc/Breadcrumb/BindToLocation").Add();
item.Text("Navigation").Url("https://ej2.syncfusion.com/home/aspnetmvc.html#platform").Add();
item.Text("Overflow").Url("https://ej2.syncfusion.com/aspnetmvc/demos/#/material/menu/default").Add();
}).Render()
public ActionResult Index()
{
return View();
}
Output be like the below.
Open URL in new page or tab
To open the Breadcrumb item in a new page or tab, set the target property of the required item url to blank in the Breadcrumb component. In the following example, the target property of All Component
item url was set to blank by using the beforeItemRender
event which locates to the path in the new tab.
@Html.EJS().Breadcrumb("separatorTemplate").BeforeItemRender("beforeItemRender").Items(item =>
{
item.Text("Home").Url("https://ej2.syncfusion.com/home/aspnetmvc.html#platform").Add();
item.Text("Getting").Url("https://ej2.syncfusion.com/aspnetmvc/demos/#/material/grid/overview/").Add();
item.Text("Icons").Url("https://ej2.syncfusion.com/aspnetmvc/Breadcrumb/BindToLocation").Add();
item.Text("Navigation").Url("https://ej2.syncfusion.com/home/aspnetmvc.html#platform").Add();
item.Text("Overflow").Url("https://ej2.syncfusion.com/aspnetmvc/demos/#/material/menu/default").Add();
}).Render()
<script>
function beforeItemRender(args) {
if (args.element.children[0]) {
args.element.children[0].target = "_blank";
}
}
</script>
public ActionResult Index()
{
return View();
}
Output be like the below.