Breadcrumb

Overview

Breadcrumb is a six-part composite of plain semantic HTML: a <nav aria-label="breadcrumb"> wrapping an <ol>, <li> items holding either an <a> link or the current-page <span>, and a presentational separator <li> (a chevron by default, overridable via ChildContent). There is no Navius primitive underneath and no interactive behavior of its own.

Install

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

Usage

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

Parts and props

Prop	Type	Default	Description
ZitsBreadcrumbLink.Href	string?	null	Rendered as the anchor’s href.
ZitsBreadcrumbSeparator.ChildContent	RenderFragment?	chevron svg	Overrides the default chevron glyph.

ZitsBreadcrumb, ZitsBreadcrumbList, ZitsBreadcrumbItem, and ZitsBreadcrumbPage take only ChildContent and Attributes.

Styling surface

Every part accepts class/Attributes, merged via Cn.Class with the caller’s classes applied last. There are no variant/size parameters.

Data attribute hooks

Breadcrumb emits no data-* state hooks; it is a static structural component.

Breadcrumb wires a nav landmark with aria-label="breadcrumb" over an <ol>. The final crumb (ZitsBreadcrumbPage) renders a <span role="link" aria-disabled="true" aria-current="page"> so assistive tech announces it as the current, non-navigable page. The separator renders <li role="presentation" aria-hidden="true"> unconditionally, hiding whatever is passed as ChildContent (default chevron or override) from assistive tech.