A navigation trail of links showing the current page's location within a site's hierarchy, with a themed muted text style.
import BjorkBreadcrumb, {
BjorkBreadcrumbList,
BjorkBreadcrumbItem,
BjorkBreadcrumbLink,
BjorkBreadcrumbPage,
BjorkBreadcrumbSeparator,
} from "@/components/ui/primitive-breadcrumb";
export default function BreadcrumbDemo() {
return (
<BjorkBreadcrumb>
<BjorkBreadcrumbList>
<BjorkBreadcrumbItem>
<BjorkBreadcrumbLink href="/">Home</BjorkBreadcrumbLink>
</BjorkBreadcrumbItem>
<BjorkBreadcrumbSeparator />
<BjorkBreadcrumbItem>
<BjorkBreadcrumbLink href="/components">
Components
</BjorkBreadcrumbLink>
</BjorkBreadcrumbItem>
<BjorkBreadcrumbSeparator />
<BjorkBreadcrumbItem>
<BjorkBreadcrumbPage>Breadcrumb</BjorkBreadcrumbPage>
</BjorkBreadcrumbItem>
</BjorkBreadcrumbList>
</BjorkBreadcrumb>
);
}