Breadcrumb / Template and Customization

Blazor Breadcrumb Example - Custom Templates

Loading Syncfusion Blazor Server Demos…

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

This sample demonstrates comprehensive customization of Breadcrumb component items, separators, and icons.

Customization capabilities include:

  • Item customization using ItemTemplate property in BreadcrumbTemplates
  • Separator customization using SeparatorTemplate property
  • Disable specific items using the Disabled property in BreadcrumbItem
  • Display icons in breadcrumb items using the IconCss property (left-aligned by default)

The demo showcases five customization examples:

  • Custom Breadcrumb - Shopping cart details with ItemTemplate customization
  • Custom Separator - Separator customization using SeparatorTemplate
  • Custom Breadcrumb and Separator - Combined ItemTemplate and SeparatorTemplate customization
  • Breadcrumb with Icons - File path display with IconCss property
  • Disabled Breadcrumb Items - Specific item disabling using Disabled property

See also:

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