Breadcrumb
Displays the path to the current resource using a hierarchy of links.
Installation
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
Usage
@using Lumeo
<Breadcrumb />
✓ Render— Behavior✓ A11y✓ Keyboard— Scale— E2E
35 tests across 1 file. Auto-generated from the test suite.
When to Use
- Navigating deep hierarchies where users need to understand their location
- Multi-level pages such as settings, dashboards, or content management systems
- Providing a quick way to jump back to parent sections without using the browser back button
API Reference
Breadcrumb
| Prop |
Type |
Default |
Description |
| ChildContent |
RenderFragment? |
— |
Typically a single BreadcrumbList containing the trail's items. |
| Class |
string? |
— |
Additional CSS classes merged onto the root nav element. |
| AdditionalAttributes |
Dictionary<string, object>? |
— |
Unmatched attributes are splatted onto the root nav element. |
BreadcrumbList
| Prop |
Type |
Default |
Description |
| ChildContent |
RenderFragment? |
— |
The BreadcrumbItem and BreadcrumbSeparator elements that make up the trail. |
| Class |
string? |
— |
Additional CSS classes merged onto the root ol element. |
| AdditionalAttributes |
Dictionary<string, object>? |
— |
Unmatched attributes are splatted onto the root ol element. |
BreadcrumbItem
| Prop |
Type |
Default |
Description |
| ChildContent |
RenderFragment? |
— |
Typically a BreadcrumbLink or BreadcrumbPage for this trail segment. |
| Class |
string? |
— |
Additional CSS classes merged onto the root li element. |
| AdditionalAttributes |
Dictionary<string, object>? |
— |
Unmatched attributes are splatted onto the root li element. |
BreadcrumbLink
| Prop |
Type |
Default |
Description |
| ChildContent |
RenderFragment? |
— |
The link's label content. |
| Href |
string? |
"#" |
The navigation target. Defaults to "#" when unset. |
| Class |
string? |
— |
Additional CSS classes merged onto the root a element. |
| AdditionalAttributes |
Dictionary<string, object>? |
— |
Unmatched attributes are splatted onto the root a element. |
BreadcrumbPage
| Prop |
Type |
Default |
Description |
| ChildContent |
RenderFragment? |
— |
The current page's label content. |
| Class |
string? |
— |
Additional CSS classes merged onto the root span element. |
| AdditionalAttributes |
Dictionary<string, object>? |
— |
Unmatched attributes are splatted onto the root span element. |
BreadcrumbSeparator
| Prop |
Type |
Default |
Description |
| ChildContent |
RenderFragment? |
— |
Custom separator content. When null, renders a default chevron icon (mirrored in RTL). |
| Class |
string? |
— |
Additional CSS classes merged onto the root li element. |
| AdditionalAttributes |
Dictionary<string, object>? |
— |
Unmatched attributes are splatted onto the root li element. |
BreadcrumbEllipsis
| Prop |
Type |
Default |
Description |
| Class |
string? |
— |
Additional CSS classes merged onto the root li element. |
| AdditionalAttributes |
Dictionary<string, object>? |
— |
Unmatched attributes are splatted onto the root li element. |
- NavigationMenu — For primary site-wide navigation in headers
- Pagination — For navigating between pages of content within a list