Quill docs

Breadcrumb

An ARIA-correct trail (nav[aria-label=Breadcrumb] > ol). Intermediate crumbs are links; the current page is plain text carrying aria-current. The separator is decorative CSS. Its axes are the text size and the focus-radius on the links.

Preview#

An ARIA trail (nav[aria-label=Breadcrumb] > ol) across the text-size and link-radius axes.

size

radius

Playground#

Change the controls — the preview and the snippet update live.

Size

Radius

Trail

Breadcrumb::new(vec![
    Crumb::new("Home", "/"),
    Crumb::new("Components", "/docs/quill/components"),
    Crumb::new("Breadcrumb", "/docs/quill/components/breadcrumb"),
])
.size(Size::Md)
.radius(Radius::Md)
.render()

Theme it#

Flip the component axes for this preview alone — the controls re-point scoped design tokens on the demo stage and the component itself restyles. Variant controls swap the component class, surface controls change the visual treatment, and motion controls change the interaction feel without leaking to the page.

Density

Radius

Surface

Motion

// This demo is scoped: these axes apply only to this preview.
el("div")
    .attr("data-q-size", "cozy")
    .attr("data-q-radius", "rounded")
    .attr("data-q-surface", "flat")
    .attr("data-q-motion", "smooth")
    .child(
        Breadcrumb::new(vec![
            Crumb::new("Home", "/"),
            Crumb::new("Components", "/docs/quill/components"),
        ])
        .size(Size::Md)
        .radius(Radius::Md)
        .render()
    )

Code#

Construct the component with its builder:

Breadcrumb::new(vec![
    Crumb::new("Home", "/"),
    Crumb::new("Components", "/docs/quill/components"),
    Crumb::new("Breadcrumb", "/docs/quill/components/breadcrumb"),
])
.size(Size::Md)
.radius(Radius::Md)
.render()