• Bootstrap v5
  • Bootstrap v5 Dark
  • Tailwind CSS
  • Tailwind CSS Dark
  • Material
  • Bootstrap v4
  • Fabric
  • Fabric Dark
  • High Contrast
Preferences
Theme Selection
Mode Selection
Touch
Mouse
Localization
*Translated by Google Translator.
Currency
Essential Studio
HOME
All Controls

Example of Template and Customization in ASP.NET Core Breadcrumb Control

This sample demonstrates the template functionalities of the Breadcrumb component. The breadcrumb item templates are customized using HTML and CSS.

DEMO
SOURCE
Custom Breadcrumb
Specific Item Template
Custom Separator
Custom Breadcrumb and Separator
Breadcrumb with Icons
Disabled Breadcrumb

The Breadcrumb component provides a way to customize the items using itemTemplate and the separators using separatorTemplate properties.

The icons are used for the visual representation of the breadcrumb items. You can specify the iconCss property to display the icon within the corresponding breadcrumb item. By default, the icons are aligned in the left position.

You can enable or disable the entire Breadcrumb by adding/removing the e-disabled class by using cssClass property.

In this demo, we have used Shopping Cart details as Breadcrumb Items and customized the items using itemTemplate and separatorTemplate.

And, showcased the file path of the config.json file with icons using the iconCss property and disabled the specific Breadcrumb items by adding e-disabled class to the item element in beforeItemRender event.

More information about Breadcrumb component template feature can be found in this documentation section.