UI Lab | Path

Path

Breadcrumb navigation showing page hierarchy.

import { Path, PathItem } from "ui-lab-components";
 
export function Example() {
  return (
    <Path>
      <PathItem href="/">Home</PathItem>
      <PathItem href="/products">Products</PathItem>
      <PathItem>Electronics</PathItem>
    </Path>
  );
}

Basic Path

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

import { Path, PathItem } from 'ui-lab-components';
 
export default function Example() {
  return (
    <Path>
      <PathItem href="/">Home</PathItem>
      <PathItem href="/products">Products</PathItem>
      <PathItem href="/products/electronics">Electronics</PathItem>
      <PathItem>Laptop</PathItem>
    </Path>
  );
}