Example of Template and Customization in Blazor Breadcrumb Component

Breadcrumb / Template and Customization

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 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

Transform your Blazor web apps today with Syncfusion® Blazor components
100+ high-performance and responsive UI components
Dedicated support
Hassle-free licensing
TRY IT FOR FREE