Breadcrumb

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

use leptos::prelude::*;
use singlestage::{Button, breadcrumb::*, dropdown::*, icon};

#[component]
pub fn BreadcrumbExample() -> impl IntoView {
    view! {
        <Breadcrumb>
            <BreadcrumbItem>
                <a href="#" class="hover:text-(--foreground) transition-colors">
                    "Home"
                </a>
            </BreadcrumbItem>
            <BreadcrumbSeparator />
            <BreadcrumbItem>
                <DropdownMenu>
                    <DropdownMenuTrigger>
                        <Button
                            class="flex size-9 items-center justify-center h-4 w-4 hover:text-(--foreground) cursor-pointer"
                            variant="ghost"
                        >
                            {icon!(icondata::VsEllipsis)}
                        </Button>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent>
                        <DropdownMenuGroup>
                            <DropdownMenuItem>"Documentation"</DropdownMenuItem>
                            <DropdownMenuItem>"Themes"</DropdownMenuItem>
                            <DropdownMenuItem>"GitHub"</DropdownMenuItem>
                        </DropdownMenuGroup>
                    </DropdownMenuContent>
                </DropdownMenu>
            </BreadcrumbItem>
            <BreadcrumbSeparator />
            <BreadcrumbItem>
                <a href="#" class="hover:text-(--foreground) transition-colors">
                    "Components"
                </a>
            </BreadcrumbItem>
            <BreadcrumbSeparator />
            <BreadcrumbItem>
                <span class="text-(--foreground) font-normal">"Breadcrumb"</span>
            </BreadcrumbItem>
        </Breadcrumb>
    }
}

Anatomy

Import all parts and piece them together.

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

#[component]
pub fn BreadcrumbAnatomy() -> impl IntoView {
    view! {
        <Breadcrumb>
            <BreadcrumbItem />
            <BreadcrumbSeparator />
        </Breadcrumb>
    }
}

API Reference

Breadcrumb

Contains the contents of the breadcrumb.

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

Implements global and ol attributes.

BreadcrumbItem

An individual breadcrumb link.

Implements global and li attributes.

BreadcrumbSeparator

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

Implements global and li attributes.