Vui Starter
npm

Breadcrumb

Breadcrumb shows the path to the current page as a row of linked parent levels.

Installation

pnpm add @viliha/vui-ui

Then import from @viliha/vui-ui/breadcrumb.

Usage

Compose the parts; the last item is the current page (`BreadcrumbPage`).

breadcrumb-demo.tsx
import {
  Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink,
  BreadcrumbPage, BreadcrumbSeparator,
} from "@viliha/vui-ui/breadcrumb";

export function Example() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="/">Home</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Components</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  );
}

App breadcrumbs

For route-derived app breadcrumbs, VUI also ships a higher-level Breadcrumbs component fed a trail; see the app shell. This primitive is for hand-composed trails.