Breadcrumb
Navigation component showing the current page's location within the site hierarchy.
Examples
Basic Usage
Simple breadcrumb with links and current page
View Code
use leptos::prelude::*;
use mosaic_tiles::breadcrumb::*;
#[component]
pub fn BasicExample() -> impl IntoView {
view! {
<Breadcrumb>
<BreadcrumbItem href="/">"Home"</BreadcrumbItem>
<BreadcrumbItem href="/documentation">"Documentation"</BreadcrumbItem>
<BreadcrumbItem>"Breadcrumb"</BreadcrumbItem>
</Breadcrumb>
}
}
Deeply Nested Navigation
Breadcrumb showing multiple levels of navigation
View Code
use leptos::prelude::*;
use mosaic_tiles::breadcrumb::*;
#[component]
pub fn NestedExample() -> impl IntoView {
view! {
<Breadcrumb>
<BreadcrumbItem href="/">"Home"</BreadcrumbItem>
<BreadcrumbItem href="/products">"Products"</BreadcrumbItem>
<BreadcrumbItem href="/products/electronics">"Electronics"</BreadcrumbItem>
<BreadcrumbItem href="/products/electronics/laptops">"Laptops"</BreadcrumbItem>
<BreadcrumbItem>"Product Details"</BreadcrumbItem>
</Breadcrumb>
}
}
Breadcrumbs with Icons
Breadcrumb items enhanced with icons
View Code
use leptos::prelude::*;
use mosaic_tiles::breadcrumb::*;
use mosaic_tiles::icon::*;
#[component]
pub fn WithIconsExample() -> impl IntoView {
view! {
<Breadcrumb>
<BreadcrumbItem href="/">
<Icon icon=Grid class="w-4 h-4 inline mr-1" />
"Home"
</BreadcrumbItem>
<BreadcrumbItem href="/settings">
<Icon icon=Tune class="w-4 h-4 inline mr-1" />
"Settings"
</BreadcrumbItem>
<BreadcrumbItem>
<Icon icon=People class="w-4 h-4 inline mr-1" />
"Profile"
</BreadcrumbItem>
</Breadcrumb>
}
}
Anatomy
use leptos::prelude::*;
use mosaic_tiles::breadcrumb::*;
#[component]
pub fn BreadcrumbAnatomy() -> impl IntoView {
view! {
<Breadcrumb>
<BreadcrumbItem href="/home">"Home"</BreadcrumbItem>
<BreadcrumbItem href="/products">"Products"</BreadcrumbItem>
<BreadcrumbItem>"Current Page"</BreadcrumbItem>
</Breadcrumb>
}
}
API Reference
Breadcrumb
Container component for breadcrumb navigation.
Renders a nav element with proper ARIA attributes.
| Attribute | Type | Default | Description |
|---|---|---|---|
| children | Option<Children> | None | BreadcrumbItem components |
BreadcrumbItem
Individual item in the breadcrumb trail.
Renders as a link when href is provided, otherwise as plain text (for current page).
| Attribute | Type | Default | Description |
|---|---|---|---|
| href | Option<String> | None | URL for the breadcrumb item. If omitted, renders as text for current page. |
| children | Option<Children> | None | Content of the breadcrumb item (text, icons, etc.) |