Path

Breadcrumb navigation showing page hierarchy.

path/01-path-basic-path
import { Path } from 'ui-lab-components/path';

export const metadata = {
  title: 'Basic Path',
  description: 'A simple path navigation showing the current page location. Use this to help users understand their position in the site hierarchy.'
};

export default function Example() {
  return (
    <Path>
      <Path.Item href="/">Home</Path.Item>
      <Path.Item href="/products">Products</Path.Item>
      <Path.Item href="/products/electronics">Electronics</Path.Item>
      <Path.Item>Laptop</Path.Item>
    </Path>
  );
}

path/02-path-custom-separator

Pass any node via the separator prop to replace the default slash.

Loading interactive preview
import { Path } from 'ui-lab-components/path';
import { FaChevronRight } from "react-icons/fa6";
 
export const metadata = {
  title: "Custom Separator",
  description: "Pass any node via the separator prop to replace the default slash.",
};
 
export default function Example() {
  return (
    <Path separator={<FaChevronRight className="w-3 h-3 text-foreground-400" />}>
      <Path.Item href="/projects">Projects</Path.Item>
      <Path.Item href="/projects/ui-lab">ui-lab</Path.Item>
      <Path.Item>components</Path.Item>
    </Path>
  );
}

path/03-path-collapsed-breadcrumb

Deep paths collapse intermediate crumbs into an ellipsis menu — Path.Item wraps the Menu trigger directly.

Loading interactive preview
import { Path } from 'ui-lab-components/path'
import { Menu } from 'ui-lab-components/menu'
import { Button } from 'ui-lab-components/button';
import { FaEllipsis } from "react-icons/fa6";
 
export const metadata = {
  title: "Collapsed Breadcrumb",
  description: "Deep paths collapse intermediate crumbs into an ellipsis menu — Path.Item wraps the Menu trigger directly.",
};
 
const collapsed = [
  { label: "Projects", href: "/projects" },
  { label: "ui-lab", href: "/projects/ui-lab" },
  { label: "packages", href: "/projects/ui-lab/packages" },
];
 
export default function Example() {
  return (
    <Path>
      <Path.Item href="/">Home</Path.Item>
      <Path.Item>
        <Menu type="pop-over">
          <Menu.Trigger>
            <Button icon={<FaEllipsis />} className="p-2" size="icon" variant="ghost" aria-label="Show collapsed path" />
          </Menu.Trigger>
          <Menu.Content align="start">
            {collapsed.map((crumb) => (
              <Menu.Item key={crumb.href} onSelect={() => {}}>
                {crumb.label}
              </Menu.Item>
            ))}
          </Menu.Content>
        </Menu>
      </Path.Item>
      <Path.Item href="/projects/ui-lab/packages/@ui">@ui</Path.Item>
      <Path.Item>Path.tsx</Path.Item>
    </Path>
  );
}
UI Lab