HxBreadcrumb #
Bootstrap 5 Breadcrumb component.
Indicates the current page’s location within a navigational hierarchy.
Basic usage #
Set HxBreadcrumbItem.Active to true to indicate what page the user is currently on.
<HxBreadcrumb>
<HxBreadcrumbItem Href="#" Text="Home" />
<HxBreadcrumbItem Href="#" Text="Library" />
<HxBreadcrumbItem Text="Data" Active="true" />
</HxBreadcrumb>Dividers #
Dividers are automatically added. They can be changed by modifying the Divider parameter. Default is /.
It’s also possible to use an embedded SVG icon. Apply it via the Divider parameter as shown below.
API #
Parameters #
| Name | Type | Description |
|---|---|---|
| ChildContent | RenderFragment |
Child content. |
| Divider | string |
Breadcrumb divider. Default is /.
Enter either a character (such as >) or use an embedded SVG icon.
Disable the divider with null. |
HxBreadcrumbItem #
Item for HxBreadcrumb.
API #
Parameters #
| Name | Type | Description |
|---|---|---|
| Active | bool |
Determines whether the HxBreadcrumbItem is active (use for a page that the user is currently on). |
| ChildContent | RenderFragment |
Item content. |
| Href | string |
The link of the breadcrumb (a page where the user will be led on click). |
| Text | string |
Item text (usually a name of the page). |