Breadcrumb

Breadcrumb navigation for trails, collapsed paths, and overflow menus.

Loading preview...

Examples

Practical examples and common states for the same installable component.

Default

Simple links with slash separators and hover underline slide.

examples/breadcrumb-default.tsx
import { Breadcrumb, BreadcrumbItem } from "@/components/wensity/breadcrumb";
export function BreadcrumbDefault() {
return (
<Breadcrumb>
<BreadcrumbItem href="/">Home</BreadcrumbItem>
<BreadcrumbItem href="/components">Components</BreadcrumbItem>
<BreadcrumbItem isCurrentPage>Breadcrumb</BreadcrumbItem>
</Breadcrumb>
);
}

With Icons

Leading icons add context to each breadcrumb segment.

examples/breadcrumb-with-icons.tsx
import { IconHome, IconFolder, IconFile } from "@tabler/icons-react";
import { Breadcrumb, BreadcrumbItem } from "@/components/wensity/breadcrumb";
export function BreadcrumbWithIcons() {
return (
<Breadcrumb variant="with-icons">
<BreadcrumbItem href="/" icon={<IconHome />}>Home</BreadcrumbItem>
<BreadcrumbItem href="/docs" icon={<IconFolder />}>Documents</BreadcrumbItem>
<BreadcrumbItem isCurrentPage icon={<IconFile />}>report.pdf</BreadcrumbItem>
</Breadcrumb>
);
}

Collapsed

Long trails collapse to ellipsis, expanding inline on click with stagger animation.

examples/breadcrumb-collapsed.tsx
import { Breadcrumb, BreadcrumbItem } from "@/components/wensity/breadcrumb";
export function BreadcrumbCollapsed() {
return (
<Breadcrumb variant="collapsed" maxItems={3}>
<BreadcrumbItem href="/">Home</BreadcrumbItem>
<BreadcrumbItem href="/projects">Projects</BreadcrumbItem>
<BreadcrumbItem href="/wensity">Wensity</BreadcrumbItem>
<BreadcrumbItem href="/settings">Settings</BreadcrumbItem>
<BreadcrumbItem isCurrentPage>OAuth</BreadcrumbItem>
</Breadcrumb>
);
}

Dropdown

Collapsed items open in a floating dropdown menu.

examples/breadcrumb-dropdown.tsx
import { Breadcrumb, BreadcrumbItem } from "@/components/wensity/breadcrumb";
export function BreadcrumbDropdown() {
return (
<Breadcrumb variant="dropdown" maxItems={3}>
<BreadcrumbItem href="/">Home</BreadcrumbItem>
<BreadcrumbItem href="/projects">Projects</BreadcrumbItem>
<BreadcrumbItem href="/wensity">Wensity</BreadcrumbItem>
<BreadcrumbItem href="/settings">Settings</BreadcrumbItem>
<BreadcrumbItem isCurrentPage>API Keys</BreadcrumbItem>
</Breadcrumb>
);
}

Custom Separator

Use arrows, dots, or any ReactNode as the separator.

examples/breadcrumb-custom-separator.tsx
import { Breadcrumb, BreadcrumbItem } from "@/components/wensity/breadcrumb";
export function BreadcrumbCustomSeparator() {
return (
<Breadcrumb
variant="custom-separator"
separator={<span className="text-muted-foreground opacity-40 text-xs"></span>}
>
<BreadcrumbItem href="/">Home</BreadcrumbItem>
<BreadcrumbItem href="/library">Library</BreadcrumbItem>
<BreadcrumbItem isCurrentPage>Components</BreadcrumbItem>
</Breadcrumb>
);
}