Breadcrumb

Displays the path to the current resource using a hierarchy of links.

Default

A basic breadcrumb with chevron separators. The examples on this page are rendered without an href so they do not navigate away.

Custom Separator

Use a custom separator by passing children to BreadcrumbSeparator.

Slash

Dot

With Ellipsis

Use BreadcrumbEllipsis to indicate collapsed items in the middle of the path.

Responsive

A longer breadcrumb chain showing deep navigation paths.

Open Markdown
FreeBreadcrumb

Page hierarchy navigation.

Install with the Proa CLI
proa ui add breadcrumb

Installs the reviewed component source, dependencies, shared support files, and required legal notices.

CLI and registry setup
recipe.rs
// SPDX-FileCopyrightText: 2026 Proa Labs, Inc.
// SPDX-License-Identifier: MIT OR Apache-2.0

//! Breadcrumb recipe — static named slots for navigation hierarchy parts.

use crate::tw_join;
use proa_core::shared::attr_value::AttrValue;
use proa_core::{DataLoader, WebContext, WriteBuf, WriteError};

mod base {
    use super::*;

    pub const ROOT: &str = "";
    pub const LIST: &str = tw_join!(
        "flex",
        "flex-wrap",
        "items-center",
        "gap-1.5",
        "break-words",
        "text-sm",
        "text-muted-foreground",
        "sm:gap-2.5"

Search

Type at least 2 characters

Customize

Make it yours

Palette

Radius

Overview
Components
Settings

Build your own

Themed Proa UI surface

Preview
Components52
RecipesTyped
customer-portal