Components
A compact breadcrumb navigation trail with chevron, slash, or dot separators and an active-page indicator.
Loading preview...
import { BreadcrumbNav } from "@/components/ui/breadcrumb-nav";
export default function Default() {
return (
<div className="flex min-h-[280px] w-full flex-col items-center justify-center gap-6 bg-background p-10">
<BreadcrumbNav
items={[
{ label: "Grid", href: "#" },
{ label: "Sectors", href: "#" },
{ label: "Node 7", active: true },
]}
/>
<BreadcrumbNav
separator="slash"
items={[
{ label: "Home", href: "#" },
{ label: "Programs", href: "#" },
{ label: "Tron", active: true },
]}
/>
<BreadcrumbNav
separator="dot"
items={[
{ label: "System", href: "#" },
{ label: "Users", href: "#" },
{ label: "Flynn", active: true },
]}
/>
</div>
);
}