HxBreadcrumb

Bootstrap 5 Breadcrumb component.
Indicates the current page’s location within a navigational hierarchy.

Example

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
Text string Item text (usually a name of the page).
Href string The link of the breadcrumb (a page where the user will be led on click).
Active bool Determines whether the HxBreadcrumbItem is active (use for a page that the user is currently on).
ChildContent RenderFragment Itme content.
An unhandled error has occurred. Reload 🗙