Breadcrumb
Displays the path to the current resource using a hierarchy of links
Examples
Default
With ellipsis
API
The element family below can be composed together. Click an element to jump to its properties.
| Element | Purpose |
|---|---|
| Breadcrumb | Outer <nav aria-label="breadcrumb"> wrapper. Wraps a BreadcrumbList and (usually) one or more BreadcrumbItem + BreadcrumbSeparator pairs. |
| BreadcrumbList | The <ol> that holds BreadcrumbItems and BreadcrumbSeparators. Renders muted-foreground text with flex wrapping. |
| BreadcrumbItem | A single <li> in the breadcrumb chain. Holds a BreadcrumbLink, BreadcrumbPage, or BreadcrumbEllipsis. |
| BreadcrumbLink | Hyperlink to a parent section. Renders as an <a> with the muted-foreground → foreground hover transition. |
| BreadcrumbPage | Non-interactive label for the current page. Rendered with aria-current="page" and full foreground text, so it stands out from the muted links. |
| BreadcrumbEllipsis | Placeholder <span> with a … (horizontal dots) icon. Used to collapse a long chain. |
| BreadcrumbSeparator | Visual separator between items. Renders a custom icon via ChildContent or falls back to a / glyph. |
Breadcrumb
Outer <nav aria-label="breadcrumb"> wrapper. Wraps a BreadcrumbList and (usually) one or more BreadcrumbItem + BreadcrumbSeparator pairs.
| Property | Type | Required | Description |
|---|---|---|---|
| ChildContent | RenderFragment? | Should contain a single BreadcrumbList. | |
| AdditionalAttributes | Dictionary<string, object>? | Captured unmatched attributes, forwarded to the <nav>. |
BreadcrumbList
The <ol> that holds BreadcrumbItems and BreadcrumbSeparators. Renders muted-foreground text with flex wrapping.
| Property | Type | Required | Description |
|---|---|---|---|
| ClassName | string? | Extra CSS classes appended to the <ol>. | |
| ChildContent | RenderFragment? | Alternating BreadcrumbItem and BreadcrumbSeparator children. |
BreadcrumbItem
A single <li> in the breadcrumb chain. Holds a BreadcrumbLink, BreadcrumbPage, or BreadcrumbEllipsis.
| Property | Type | Required | Description |
|---|---|---|---|
| ClassName | string? | Extra CSS classes appended to the <li>. | |
| ChildContent | RenderFragment? | Usually a single BreadcrumbLink, BreadcrumbPage, or BreadcrumbEllipsis. |
BreadcrumbLink
Hyperlink to a parent section. Renders as an <a> with the muted-foreground → foreground hover transition.
| Property | Type | Required | Description |
|---|---|---|---|
| Href | string? | Target URL. | |
| ClassName | string? | Extra CSS classes appended to the <a>. | |
| ChildContent | RenderFragment? | Link label. | |
| AdditionalAttributes | Dictionary<string, object>? | Captured unmatched attributes, forwarded to the <a>. |
BreadcrumbPage
Non-interactive label for the current page. Rendered with aria-current="page" and full foreground text, so it stands out from the muted links.
| Property | Type | Required | Description |
|---|---|---|---|
| ClassName | string? | Extra CSS classes appended to the <span>. | |
| ChildContent | RenderFragment? | Current page label. |
BreadcrumbEllipsis
Placeholder <span> with a … (horizontal dots) icon. Used to collapse a long chain.
| Property | Type | Required | Description |
|---|---|---|---|
| ClassName | string? | Extra CSS classes appended to the ellipsis <span>. |
BreadcrumbSeparator
Visual separator between items. Renders a custom icon via ChildContent or falls back to a / glyph.
| Property | Type | Required | Description |
|---|---|---|---|
| ClassName | string? | Extra CSS classes appended to the separator <li>. | |
| ChildContent | RenderFragment? | Optional custom separator glyph. Default is a / character. |