Breadcrumb
Navigation breadcrumb with model binding, child items, and custom separators.
<rhx-breadcrumb>
Examples
Model-bound Items
<rhx-breadcrumb rhx-items="@Model.BreadcrumbItems" />Child Items
<rhx-breadcrumb>
<rhx-breadcrumb-item rhx-href="/">Home</rhx-breadcrumb-item>
<rhx-breadcrumb-item rhx-href="/Docs/Components/Breadcrumb">Navigation</rhx-breadcrumb-item>
<rhx-breadcrumb-item>Breadcrumb</rhx-breadcrumb-item>
</rhx-breadcrumb>Custom Separator
<rhx-breadcrumb rhx-separator="›" rhx-label="Site navigation"
rhx-items="@Model.BreadcrumbItems" />Properties
| Property | Type | Default | Description |
|---|---|---|---|
rhx-items |
List<BreadcrumbItem> |
- |
Server-side items to render |
rhx-separator |
string |
/ |
Character used between breadcrumb items |
rhx-label |
string |
Breadcrumb |
Accessible label for the nav element |
Accessibility
- Renders a
<nav>element witharia-labelfor landmark navigation. - The current (last) page uses
aria-current="page"to indicate the active location. - Separator characters between items are marked with
aria-hidden="true"so screen readers skip them.