Breadcrumb

Anatomy

Navigation component showing hierarchy from root to current location with separator between items.

maud_ui::primitives::breadcrumb

Props

Generated from public Rust fields. Defaults are evaluated from the implementation.

Prop	Type	Default	Description
`items`	`Vec<BreadcrumbItem>`	`[]`	List of breadcrumb items (last item has no href). Blank labels are discarded.
`separator`	`Option<&'a str>`	`Some("/")`	Separator between items. `None` renders NO separator at all — the list gap alone separates the trail (a trail with no visible divider). Defaults to `Some("/")`.

Examples

Default separator

Product navigation

Two levels

No separator

Usage and composition

Import

use maud_ui::primitives::breadcrumb::{self, BreadcrumbItem, Props};

Example

use maud::html;
use maud_ui::primitives::breadcrumb;

html! {
    (breadcrumb::render(breadcrumb::Props {
        items: vec![
            breadcrumb::BreadcrumbItem {
                label: "Home".to_string(),
                href: Some("/".to_string()),
            },
            breadcrumb::BreadcrumbItem {
                label: "Docs".to_string(),
                href: Some("/docs".to_string()),
            },
            breadcrumb::BreadcrumbItem {
                label: "Components".to_string(),
                href: None,
            },
        ],
        separator: Some(">".to_string()),
    }))
}

BreadcrumbItem Struct

Field	Type	Description
label	String	Display text for the breadcrumb.
href	Option	Navigation URL; None for the current page (last item).

Shadcn reference

https://ui.shadcn.com/docs/components/base/breadcrumb

Empty labels and constrained headers (0.13.0)

Blank or whitespace-only labels are discarded before separators and positions are calculated; all blank input emits no navigation. A debug assertion checks the filtered rendering invariant. Page-header title/single-crumb derivation uses the same filter. Ancestor labels may ellipsize when constrained, middle crumbs yield space first, and the final crumb wraps within its context instead of sliding beneath search. Its full text remains in the DOM.

Accessibility

Emits <nav aria-label="Breadcrumb"> to identify navigation context.
Links use standard <a href> semantics.
Current item (last in list) renders as <span role="link" aria-disabled="true" aria-current="page"> for link-like semantics without clickability.
Separators marked aria-hidden="true" to prevent double announcement.