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).
An unhandled error has occurred. Reload 🗙