Wensity

Breadcrumb

A wayfinding trail with smart collapsing, dropdown overflow menus, custom separators, and animated hover states.

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

Props

PropTypeDefaultDescription
variant"default" | "with-icons" | "collapsed" | "dropdown" | "custom-separator""default"Trail treatment. collapsed and dropdown fold the middle items away.
separatorReact.ReactNode-Node rendered between items.
maxItemsnumber3Visible items before the trail collapses, for the collapsed and dropdown variants.