ObjectUIComponentsData Display
Breadcrumb
Display the current location within a navigational hierarchy
The Breadcrumb component shows the current page's location within the site hierarchy.
Basic Usage
Basic Breadcrumb
{
"type": "breadcrumb",
"items": [
{
"label": "Home",
"href": "/"
},
{
"label": "Products",
"href": "/products"
},
{
"label": "Category",
"href": "/products/category"
},
{
"label": "Item"
}
]
}With Icons
With Icons
{
"type": "breadcrumb",
"items": [
{
"label": "Home",
"href": "/",
"icon": "home"
},
{
"label": "Docs",
"href": "/docs",
"icon": "book"
},
{
"label": "Components",
"icon": "layout"
}
]
}Schema
interface BreadcrumbItem {
label: string;
href?: string;
icon?: string;
}
interface BreadcrumbSchema {
type: 'breadcrumb';
items: BreadcrumbItem[]; // Breadcrumb items
separator?: string; // Custom separator
className?: string;
}