Blazor Breadcrumb Overview
The Blazor Breadcrumb component allows navigation within a folder structure or web page. It provides an easy way to navigate backwards by one or multiple steps. In addition to built-in navigation capabilities, you can browse through the items, define templates for the individual nodes, render text and icons, and respond to events.
Start Free Trial
Creating Blazor Breadcrumb
To use a Telerik Breadcrumb for Blazor:
- Add the
TelerikBreadcrumbtag - Provide a collection of objects to its
Dataproperty. Read more in the Data Binding article. - Match the fields in the model with the binding schema for the nodes. In this example, we keep it simple by only providing text for the Breadcrumb items. See the Navigation article for more details on how to use the Breadcrumb for navigating through items.
Basic Blazor Breadcrumb
Features
The Breadcrumb provides the following features:
-
Data—a collection of flat data for all items in the Breadcrumb. See the Data Binding article for details. -
CollapseMode—specifies how the Breadcrumb items are displayed if they cannot fit on a single line. Read more in the Collapse Modes article. -
Width—the width of the Breadcrumb component. -
Height—the height of the Breadcrumb component. -
Size—the size of the Breadcrumb component. You can set it to a member of theTelerik.Blazor.ThemeConstants.Breadcrumb.Sizeclass. The default value isMedium. -
Class—the CSS class that will be rendered on the main wrapping element of the Breadcrumb. -
ItemTemplate—define a custom template for the Items of the Breadcrumb. Read more in the Templates article. -
SeparatorTemplate—define a custom template for the Breadcrumb Separator. Read more in the Templates article. -
Events—you can respond to user actions to implement your business logic. For more details see the Events article.