Blazor Breadcrumb Example - Custom Templates

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 using ItemTemplate property.
• Custom Separator shows the customization of separators using SeparatorTemplate property.
• Custom Breadcrumb and Separator shows customization of items using both ItemTemplate and SeparatorTemplate 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

• Blazor Breadcrumb - Template