Skip to content
comp0

comp0

Navigation

Breadcrumbs

A trail of links showing where this page sits.

When to use it: Use it when pages live inside a clear hierarchy.

On this page
  1. Example
  2. Anatomy
  3. Step by step
  4. Keyboard
  5. Forms and accessibility
  6. API reference

Example

Breadcrumbs.tsxtsx
import { BreadcrumbLink, Breadcrumbs } from "@comp0/react";
import { ChevronRightIcon } from "@heroicons/react/16/solid";

export function Example() {
  return (
    <Breadcrumbs className="flex flex-wrap gap-2 text-base text-zinc-600 sm:text-sm dark:text-zinc-400">
      <BreadcrumbLink
        href="#home"
        className="underline"
        onClick={(event) => event.preventDefault()}
      >
        Home
      </BreadcrumbLink>
      <ChevronRightIcon
        className="size-4 self-center text-zinc-400 dark:text-zinc-500"
        aria-hidden="true"
      />
      <BreadcrumbLink
        href="#docs"
        className="underline"
        onClick={(event) => event.preventDefault()}
      >
        Docs
      </BreadcrumbLink>
      <ChevronRightIcon
        className="size-4 self-center text-zinc-400 dark:text-zinc-500"
        aria-hidden="true"
      />
      <span aria-current="page">Components</span>
    </Breadcrumbs>
  );
}

Anatomy

Dashed frames are invisible state providers; shaded shapes own real DOM. Numbered pins match the list below.

A wireframe sketch of the assembled component. Each numbered marker matches a part in the list that follows.

  1. Breadcrumbs

    Navigation landmark and list. Owns a DOM element.

  2. BreadcrumbLink

    Native anchor in the trail. Owns a DOM element.

Step by step

  1. 1

    Add the main part

    Start Breadcrumbs around the trail.

  2. 2

    Add the supporting parts

    Add BreadcrumbLink for each place people can return to.

  3. 3

    Make the behavior clear

    Mark the current page as current instead of making it a misleading link.

    Exampletsx
    <Breadcrumbs><BreadcrumbLink href="/">Home</BreadcrumbLink></Breadcrumbs>

Keyboard

↵
Follows the focused breadcrumb.

Forms and accessibility

No native form behavior.

Accessibility checklist

  • Use a navigation label when your page needs one.
  • Make the current page clear without a misleading link.
  • Keep trail labels concise.

API reference

Importtsx
import { BreadcrumbLink, Breadcrumbs } from "@comp0/react";

Breadcrumbs

DOM element

Navigation landmark and list.

PropTypeDescription
aria-labelstringNames the landmark; defaults to "Breadcrumbs".

BreadcrumbLink

DOM element

Native anchor in the trail.

PropTypeDescription
hrefstringDestination for this trail stop.
currentbooleanMarks the page you are on with aria-current="page".

Style hooks

Attributes that appear while a state is true. Target them with Tailwind data variants such as data-open:bg-zinc-100, or with any CSS selector.

[data-current]

on BreadcrumbLink

This is the current page.

Keep exploring