Components / Breadcrumb

Breadcrumb

Displays the path to the current resource using a hierarchy of links. A semantic nav landmark over an ordered list; pure Tailwind, no behaviour required.

Anatomy

Compose the parts: a ZitsBreadcrumb landmark wraps a ZitsBreadcrumbList, with each ZitsBreadcrumbItem holding a link or the current page, divided by separators.

Examples

Mark the final crumb with ZitsBreadcrumbPage (it carries aria-current="page"); earlier crumbs use ZitsBreadcrumbLink.

razor

<ZitsBreadcrumb>
    <ZitsBreadcrumbList>
        <ZitsBreadcrumbItem>
            <ZitsBreadcrumbLink Href="/">Home</ZitsBreadcrumbLink>
        </ZitsBreadcrumbItem>
        <ZitsBreadcrumbSeparator />
        <ZitsBreadcrumbItem>
            <ZitsBreadcrumbLink Href="/docs/components/button">Components</ZitsBreadcrumbLink>
        </ZitsBreadcrumbItem>
        <ZitsBreadcrumbSeparator />
        <ZitsBreadcrumbItem>
            <ZitsBreadcrumbPage>Breadcrumb</ZitsBreadcrumbPage>
        </ZitsBreadcrumbItem>
    </ZitsBreadcrumbList>
</ZitsBreadcrumb>

Override the separator glyph by passing child content to ZitsBreadcrumbSeparator.

razor

<ZitsBreadcrumb>
    <ZitsBreadcrumbList>
        <ZitsBreadcrumbItem>
            <ZitsBreadcrumbLink Href="/">Home</ZitsBreadcrumbLink>
        </ZitsBreadcrumbItem>
        <ZitsBreadcrumbSeparator>/</ZitsBreadcrumbSeparator>
        <ZitsBreadcrumbItem>
            <ZitsBreadcrumbPage>Settings</ZitsBreadcrumbPage>
        </ZitsBreadcrumbItem>
    </ZitsBreadcrumbList>
</ZitsBreadcrumb>

Installation

Copy the component source into your project with the CLI.

Terminal bash

navius add breadcrumb --to ./src/MyApp --namespace MyApp.Ui

API reference

ZitsBreadcrumbLink accepts Href; every part splats unmatched attributes and merges a consumer class.

Prop	Type	Default
ZitsBreadcrumb	RenderFragment	-
ZitsBreadcrumbList	RenderFragment	-
ZitsBreadcrumbItem	RenderFragment	-
ZitsBreadcrumbLink.Href	string?	null
ZitsBreadcrumbPage	RenderFragment	-
ZitsBreadcrumbSeparator.ChildContent	RenderFragment?	chevron