Example of Template and Customization in Blazor Breadcrumb Component
This sample demonstrates the item customization items, separators and icon of the Breadcrumb component.
Custom Breadcrumb
Specific Item Template
Custom Separator
Custom Breadcrumb and Separator
Breadcrumb with Icons
Disabled Specific Breadcrumb Item
Disabled Breadcrumb
The Blazor Breadcrumb component supports to customize the items using ItemTemplate
and the separators using
SeparatorTemplate
properties in BreadcrumbTemplates.
The BreadcrumbItem provides Disabled
property to enable or disable an item
and IconCss
property to display an icon in the breadcrumb item.
By default, the icons are aligned to the left.
In this demo,
- Custom Breadcrumb uses shopping cart details as
BreadcrumbItems
and items are customized usingItemTemplate
property. - Custom Separator shows the customization of separators using
SeparatorTemplate
property. - Custom Breadcrumb and Separator shows customization of items using both
ItemTemplate
andSeparatorTemplate
properties. - Breadcrumb with Icons showcases the file path of the config.json file with icons using the
IconCss
property. - Disabled Specific Breadcrumb Item shows disabling a specific breadcrumb item using
Disabled
property. - Disabled Breadcrumb shows disabling a breadcrumb item using
Disabled
property.
See also