This sample demonstrates the template functionalities of the Breadcrumb component. The breadcrumb item templates are customized using HTML and CSS.
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 using disabled
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 in beforeItemRender
event using item disabled
property.
More information about Breadcrumb component template feature can be found in this documentation section.