Breadcrumbs
Breadcrumbs displays the path to the current page as navigation links.
Source
LLM docs
Package
Examples
2
Properties
38
Playground
Basics
Simple breadcrumb trail showing the current page within a product hierarchy.
Loading demo…
import { Breadcrumbs } from '@plocks/ui';
const ITEMS = [
{ label: 'Home', href: '/' },
{ label: 'Products', href: '/products' },
{ label: 'Electronics', href: '/products/electronics' },
{ label: 'Smartphones' },
];
export function Demo() {
return <Breadcrumbs items={ITEMS} />;
}Separators
Shows how to replace the default slash with characters or React nodes via the
separator prop.Loading demo…
import { Block, Breadcrumbs, Icon } from '@plocks/ui';
const ITEMS = [
{ label: 'Home', href: '/' },
{ label: 'Category', href: '/category' },
{ label: 'Subcategory', href: '/category/subcategory' },
{ label: 'Product' },
];
export function Demo() {
return (
<Block>
<Breadcrumbs items={ITEMS} />
<Breadcrumbs items={ITEMS} separator=">" />
<Breadcrumbs items={ITEMS} separator={<Icon name="chevron-right" size={14} />} />
<Breadcrumbs items={ITEMS} separator="•" />
</Block>
);
}React Native design for iOS, Android, and Web.
Quick Links
Resources