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.

    <HxBreadcrumbItem Href="#" Text="Home" />
    <HxBreadcrumbItem Href="#" Text="Library" />
    <HxBreadcrumbItem Text="Data" Active="true" />

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.


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.


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