HxBreadcrumb #
Bootstrap 5 Breadcrumb component.
Indicates the current page's location within a navigational hierarchy.
Basic usage #
Set HxBreadcrumbItem.Active to true to indicate the current page the user is on.
<HxBreadcrumb>
<HxBreadcrumbItem Href="#" Text="Home" />
<HxBreadcrumbItem Href="#" Text="Library" />
<HxBreadcrumbItem Text="Data" Active="true" />
</HxBreadcrumb>Dividers #
Dividers are automatically added. They can be modified by changing the Divider parameter. The default value is /.
It is also possible to use an embedded SVG icon. Apply it using 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 (used for a page that the user is currently on). |
| ChildContent | RenderFragment |
Item content. |
| Href | string |
The link of the breadcrumb (the page where the user will be led on click). |
| Text | string |
Item text (usually the name of the page). |