Breadcrumb

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

Installation

Nothing to add. This component ships as source in your download, so it is already in your project.

Filesrc/vui/breadcrumb.tsx

Import from@viliha/vui-react/breadcrumb

The exported names are at the top of that file. The import path is an alias the download's tsconfig.json points at src/vui/, so you can move that folder and change one line rather than every file that imports from it.

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-react/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.

It takes no props of its own. Everything you pass reaches the underlying <nav> element, so every attribute it accepts works here unchanged and nothing is invented on top.

BreadcrumbEllipsis props

It takes no props of its own. Everything you pass reaches the underlying <span> element, so every attribute it accepts works here unchanged and nothing is invented on top.

BreadcrumbItem props

It takes no props of its own. Everything you pass reaches the underlying <li> element, so every attribute it accepts works here unchanged and nothing is invented on top.

BreadcrumbLink props

Plus everything React.ComponentProps<"a"> accepts, passed straight through to the underlying element.

Prop	Type	Default
asChild?	boolean	—

BreadcrumbList props

It takes no props of its own. Everything you pass reaches the underlying <ol> element, so every attribute it accepts works here unchanged and nothing is invented on top.

BreadcrumbPage props