Wensity

Breadcrumb

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

breadcrumbnavigationtraildropdowncollapseprimitivewayfinding
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>
  );
}