Breadcrumb

The title of a detail page, with the way back.

import { Breadcrumb } from "@openperf/deft";

import { Preview } from "../../src/Preview";

export default function BreadcrumbBasic() {
  return (
    <Preview>
      <Breadcrumb.Root>
        <Breadcrumb.Item href="#">Item 1</Breadcrumb.Item>
        <Breadcrumb.Separator />
        <Breadcrumb.Current>Item 2</Breadcrumb.Current>
      </Breadcrumb.Root>
    </Preview>
  );
}

• The current item is the page’s only h1. List pages have no breadcrumb and no title.
• Breadcrumb.Item is a link; pass render for a router link.
• Breadcrumb.Text is a step with no page of its own, such as a section that only groups other pages. It looks like an item but is not a link.
• Put Breadcrumb.Separator between items. It is hidden from assistive technology.

API

Parts: Root, Current, Item, Text, Separator. Other props go to the native element: nav for Root, h1 for Current, a for Item, span for Text.