Breadcrumb
The path to the current page.
A static page with IzzyBlazor's script. No circuit.
The path to the current page. Plain links, so it needs no script.
Usage
<Breadcrumb>
<BreadcrumbItem Href="/">Home</BreadcrumbItem>
<BreadcrumbItem Href="/projects">Projects</BreadcrumbItem>
<BreadcrumbItem>Website</BreadcrumbItem>
</Breadcrumb>Links and the current page
Give each BreadcrumbItem an Href and leave it off the last, which is the current page; Icon adds an icon, such as a house for Home.
Preview
Code
<Breadcrumb>
<BreadcrumbItem Href="./" Icon="Lucide.House">Home</BreadcrumbItem>
<BreadcrumbItem Href="docs">Docs</BreadcrumbItem>
<BreadcrumbItem Href="docs/components">Components</BreadcrumbItem>
<BreadcrumbItem>Breadcrumb</BreadcrumbItem>
</Breadcrumb>Slashes
Use Separator BreadcrumbSeparator.Slash for slashes between items in place of chevrons.
Preview
Code
<Breadcrumb Separator="BreadcrumbSeparator.Slash">
<BreadcrumbItem Href="docs">Docs</BreadcrumbItem>
<BreadcrumbItem Href="docs/components">Components</BreadcrumbItem>
<BreadcrumbItem>Breadcrumb</BreadcrumbItem>
</Breadcrumb>Parts
Written inside Breadcrumb. The API page lists their parameters.
BreadcrumbItem: one step of a Breadcrumb: a link, or the current page when it has no Href.
Mode support
| Feature | Off | Static | Live |
|---|---|---|---|
| Everything | Yes | Yes | Yes |
Off: JavaScript disabled. Static: a static SSR page with IzzyBlazor's script. Live: an interactive page (Server, WebAssembly or Auto).
Accessibility
- It renders a
navnamed "Breadcrumb" (Label) around an ordered list. - The item with no
Href, or withCurrent, is text witharia-current="page", not a link.
Parameters
| Prop | Type | Default |
|---|---|---|
ChildContentThe BreadcrumbItems. | RenderFragment? | |
SeparatorWhat goes between items. | BreadcrumbSeparator | BreadcrumbSeparator.Chevron |
LabelThe navigation landmark's name. | string? | "Breadcrumb" |
Plus 16 item props and 4 common props.
Full API