Path

Breadcrumb navigation showing page hierarchy.

import { Path } from 'ui-lab-components/path';
Crumbs4
import { Path } from 'ui-lab-components/path';
 
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 isCurrent>Laptops</Path.Item>
    </Path>
  );
}

path/01-basic-path

A simple path navigation showing the current page location. Use this to help users understand their position in the site hierarchy.

Loading interactive preview
import { Path } from 'ui-lab-components/path';
 
 
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-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 { Icon } from "ui-lab-components/icon";
 
 
export default function Example() {
  return (
    <Path separator={<Icon id="fwd" size={12} className="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-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 { Icon } from "ui-lab-components/icon"
 
 
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 icon={<Icon id="more" size="1em" />} className="p-2" size="icon" variant="ghost" aria-label="Show collapsed path" />
          <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>
  );
}