RzBreadcrumb

RzBreadcrumb is a composable navigation component for displaying a user's location within a site hierarchy. It is built from modular subcomponents—BreadcrumbList, BreadcrumbItem, BreadcrumbLink, and BreadcrumbSeparator—allowing you to create accessible, customizable breadcrumb trails for any application structure.

Basic Breadcrumb

Use RzBreadcrumb to render a standard navigation trail. Each BreadcrumbItem represents a step in the path, and the final item uses BreadcrumbPage to indicate the current page. This pattern improves navigation clarity and accessibility.

Source

<RzBreadcrumb>
    <BreadcrumbList>
        <BreadcrumbItem>
            <BreadcrumbLink Href="/">Home</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
            <BreadcrumbLink Href="/components">Components</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
            <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
        </BreadcrumbItem>
    </BreadcrumbList>
</RzBreadcrumb>

Collapsible Breadcrumb with Dropdown

For deep navigation paths, keep breadcrumbs concise by using BreadcrumbEllipsis inside a RzDropdownMenu. This pattern collapses intermediate steps into a dropdown, letting users access the full path without cluttering the UI.

Source

<RzBreadcrumb>
    <BreadcrumbList>
        <BreadcrumbItem>
            <BreadcrumbLink Href="/">Home</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
            <RzDropdownMenu>
                <DropdownMenuTrigger>
                    <BreadcrumbEllipsis />
                </DropdownMenuTrigger>
                <DropdownMenuContent>
                    <DropdownMenuItem>Documentation</DropdownMenuItem>
                    <DropdownMenuItem>Themes</DropdownMenuItem>
                    <DropdownMenuItem>GitHub</DropdownMenuItem>
                </DropdownMenuContent>
            </RzDropdownMenu>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
            <BreadcrumbLink Href="/components">Components</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
            <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
        </BreadcrumbItem>
    </BreadcrumbList>
</RzBreadcrumb>

Custom Separator

You can override the default chevron separator by providing custom content to BreadcrumbSeparator. This enables you to match your application's style or use alternative icons.

Source

<RzBreadcrumb>
    <BreadcrumbList>
        <BreadcrumbItem>
            <BreadcrumbLink Href="/">Home</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator>
            <Blazicon Svg="MdiIcon.SlashForward" />
        </BreadcrumbSeparator>
        <BreadcrumbItem>
            <BreadcrumbLink Href="/components">Components</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator>
            <Blazicon Svg="MdiIcon.SlashForward"/>
        </BreadcrumbSeparator>
        <BreadcrumbItem>
            <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
        </BreadcrumbItem>
    </BreadcrumbList>
</RzBreadcrumb>

Component Parameters

The following tables summarize the main parameters for each breadcrumb component. Use these to customize navigation behavior and appearance as needed.

RzBreadcrumb

Property	Description	Type	Default
`AriaLabel`	`string?` – Accessible label for the navigation container. Defaults to a localized "Breadcrumb".	`string?`	`null`
`ChildContent`	`RenderFragment?` – The content of the breadcrumb, which should be a `BreadcrumbList` component.	`RenderFragment?`	`null`

BreadcrumbList, BreadcrumbItem, BreadcrumbPage

These components primarily accept ChildContent and pass through any additional attributes. They have no unique parameters beyond standard HTML attributes.

BreadcrumbLink

Property	Description	Type	Default
`Href`	`string?` – The URL the link navigates to.	`string?`	`null`
`ChildContent`	`RenderFragment?` – The content of the link, typically text.	`RenderFragment?`	`null`

BreadcrumbSeparator

Property	Description	Type	Default
`ChildContent`	`RenderFragment?` – Custom content to use as a separator. If not provided, a default chevron icon is rendered.	`RenderFragment?`	`null`