Breadcrumb

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

use leptos::prelude::*;
use singlestage::*;

#[component]
pub fn BreadcrumbExample() -> impl IntoView {
    view! {
        <Breadcrumb>
            <BreadcrumbList>
                <BreadcrumbItem>
                    <BreadcrumbLink>
                        <Link href="#">"Home"</Link>
                    </BreadcrumbLink>
                </BreadcrumbItem>
                <BreadcrumbSeparator />
                <BreadcrumbItem>
                    <DropdownMenu>
                        <DropdownMenuTrigger>
                            <Button size="icon-sm" variant="ghost">
                                <BreadcrumbEllipsis />
                                <span class="sr-only">"Toggle menu"</span>
                            </Button>
                        </DropdownMenuTrigger>
                        <DropdownMenuContent align="start">
                            <DropdownMenuGroup>
                                <DropdownMenuItem>"Documentation"</DropdownMenuItem>
                                <DropdownMenuItem>"Themes"</DropdownMenuItem>
                                <DropdownMenuItem>"GitHub"</DropdownMenuItem>
                            </DropdownMenuGroup>
                        </DropdownMenuContent>
                    </DropdownMenu>
                </BreadcrumbItem>
                <BreadcrumbSeparator />
                <BreadcrumbItem>
                    <BreadcrumbLink>
                        <Link href="#">"Components"</Link>
                    </BreadcrumbLink>
                </BreadcrumbItem>
                <BreadcrumbSeparator />
                <BreadcrumbItem>
                    <BreadcrumbPage>"Breadcrumb"</BreadcrumbPage>
                </BreadcrumbItem>
            </BreadcrumbList>
        </Breadcrumb>
    }
}

Basic

A basic breadcrumb with a home link and a components link.

use leptos::prelude::*;
use singlestage::*;

#[component]
pub fn BreadcrumbBasicExample() -> impl IntoView {
    view! {
        <Breadcrumb>
            <BreadcrumbList>
                <BreadcrumbItem>
                    <BreadcrumbLink>
                        <Link href="#">"Home"</Link>
                    </BreadcrumbLink>
                </BreadcrumbItem>
                <BreadcrumbSeparator />
                <BreadcrumbItem>
                    <BreadcrumbLink>
                        <Link href="#">"Components"</Link>
                    </BreadcrumbLink>
                </BreadcrumbItem>
                <BreadcrumbSeparator />
                <BreadcrumbItem>
                    <BreadcrumbPage>"Breadcrumb"</BreadcrumbPage>
                </BreadcrumbItem>
            </BreadcrumbList>
        </Breadcrumb>
    }
}

Custom Separator

BreadcrumbSeparator can take children to create a custom separator.

use leptos::prelude::*;
use singlestage::*;

#[component]
pub fn BreadcrumbCustomSeparatorExample() -> impl IntoView {
    view! {
        <Breadcrumb>
            <BreadcrumbList>
                <BreadcrumbItem>
                    <BreadcrumbLink>
                        <Link href="/">"Home"</Link>
                    </BreadcrumbLink>
                </BreadcrumbItem>
                <BreadcrumbSeparator>{icon!(icondata::LuDot)}</BreadcrumbSeparator>
                <BreadcrumbItem>
                    <BreadcrumbLink>
                        <Link href="/components">"Components"</Link>
                    </BreadcrumbLink>
                </BreadcrumbItem>
                <BreadcrumbSeparator>{icon!(icondata::LuDot)}</BreadcrumbSeparator>
                <BreadcrumbItem>
                    <BreadcrumbPage>"Breadcrumb"</BreadcrumbPage>
                </BreadcrumbItem>
            </BreadcrumbList>
        </Breadcrumb>
    }
}

Dropdown

BreadcrumbItem and DropdownMenu can be composed.

use leptos::prelude::*;
use singlestage::*;

#[component]
pub fn BreadcrumbDropdownExample() -> impl IntoView {
    view! {
        <Breadcrumb>
            <BreadcrumbList>
                <BreadcrumbItem>
                    <BreadcrumbLink>
                        <Link href="/">Home</Link>
                    </BreadcrumbLink>
                </BreadcrumbItem>
                <BreadcrumbSeparator>{icon!(icondata::LuDot)}</BreadcrumbSeparator>
                <BreadcrumbItem>
                    <DropdownMenu>
                        <DropdownMenuTrigger>
                            <Button
                                class="flex items-center gap-1 singlestage-breadcrumb-link"
                                as_child=true
                            >
                                "Components"
                                {icon!(icondata::LuChevronDown, class="size-3.5")}
                            </Button>
                        </DropdownMenuTrigger>
                        <DropdownMenuContent align="start">
                            <DropdownMenuGroup>
                                <DropdownMenuItem>"Documentation"</DropdownMenuItem>
                                <DropdownMenuItem>"Themes"</DropdownMenuItem>
                                <DropdownMenuItem>"GitHub"</DropdownMenuItem>
                            </DropdownMenuGroup>
                        </DropdownMenuContent>
                    </DropdownMenu>
                </BreadcrumbItem>
                <BreadcrumbSeparator>{icon!(icondata::LuDot)}</BreadcrumbSeparator>
                <BreadcrumbItem>
                    <BreadcrumbPage>"Breadcrumb"</BreadcrumbPage>
                </BreadcrumbItem>
            </BreadcrumbList>
        </Breadcrumb>
    }
}

Collapsed

Use BreadcrumbEllipsis to show a collapsed state when the breadcrumb is too long.

use leptos::prelude::*;
use singlestage::*;

#[component]
pub fn BreadcrumbCollapsedExample() -> impl IntoView {
    view! {
        <Breadcrumb>
            <BreadcrumbList>
                <BreadcrumbItem>
                    <BreadcrumbLink>
                        <Link href="/">"Home"</Link>
                    </BreadcrumbLink>
                </BreadcrumbItem>
                <BreadcrumbSeparator />
                <BreadcrumbItem>
                    <BreadcrumbEllipsis />
                </BreadcrumbItem>
                <BreadcrumbSeparator />
                <BreadcrumbItem>
                    <BreadcrumbLink>
                        <Link href="/docs/components">"Components"</Link>
                    </BreadcrumbLink>
                </BreadcrumbItem>
                <BreadcrumbSeparator />
                <BreadcrumbItem>
                    <BreadcrumbPage>"Breadcrumb"</BreadcrumbPage>
                </BreadcrumbItem>
            </BreadcrumbList>
        </Breadcrumb>
    }
}

Anatomy

Import all parts and piece them together.

use leptos::prelude::*;
use singlestage*;

#[component]
pub fn BreadcrumbAnatomy() -> impl IntoView {
    view! {
        <Breadcrumb>
            <BreadcrumbList>
                <BreadcrumbItem />
                <BreadcrumbSeparator />
                <BreadcrumbItem>
                    <BreadcrumbEllipsis />
                </BreadcrumbItem>
                <BreadcrumbSeparator>
                    {icon!(icondata::LuDot)}
                </BreadcrumbSeparator>
                <BreadcrumbPage />
            </BreadcrumbList>
        </Breadcrumb>
    }
}

API Reference

Breadcrumb

Contains all the items of the breadcrumb component.

Implements global attributes.

BreadcrumbEllipsis

Displays an ellipsis in place of collapsed breadcrumb items.

Implements global attributes.

BreadcrumbItem

An individual breadcrumb link.

Implements global and li attributes.

BreadcrumbList

Displays the ordered list of breadcrumb items.

Custom Attributes
Name	Type	Default	Description
number_type	usize	1	Renamed <ol> `type` attribute to avoid name collisions.

Implements global and ol attributes.

BreadcrumbPage

Displays the current page in the breadcrumb (non-clickable).

Implements global attributes.

BreadcrumbSeparator

Separates breadcrumb items. Can render any children as a custom marker.

Implements global and li attributes.

Getting Started

Components

Breadcrumb

Basic

Custom Separator

Dropdown

Collapsed

Anatomy

API Reference

Breadcrumb

BreadcrumbEllipsis

BreadcrumbItem

BreadcrumbList

BreadcrumbPage

BreadcrumbSeparator