Breadcrumb

Displays the path to the current resource using a hierarchy of links.

Default

The final item marks the current page with active and a BreadcrumbPage.

tsx

import {
  Breadcrumb,
  BreadcrumbList,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbPage,
} from "@hummingbirdui/react";

export default function BreadcrumbDefault() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="#">Home</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbItem>
          <BreadcrumbLink href="#">Components</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbItem active>
          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  );
}

Separators

The separator prop on BreadcrumbList changes the divider between items: slash (default), dashed, or arrow.

tsx

import {
  Breadcrumb,
  BreadcrumbList,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbPage,
} from "@hummingbirdui/react";

export default function BreadcrumbSeparators() {
  return (
    <div className="flex flex-col gap-4">
      <Breadcrumb>
        <BreadcrumbList separator="slash">
          <BreadcrumbItem>
            <BreadcrumbLink href="#">Home</BreadcrumbLink>
          </BreadcrumbItem>
          <BreadcrumbItem active>
            <BreadcrumbPage>Slash</BreadcrumbPage>
          </BreadcrumbItem>
        </BreadcrumbList>
      </Breadcrumb>
      <Breadcrumb>
        <BreadcrumbList separator="dashed">
          <BreadcrumbItem>
            <BreadcrumbLink href="#">Home</BreadcrumbLink>
          </BreadcrumbItem>
          <BreadcrumbItem active>
            <BreadcrumbPage>Dashed</BreadcrumbPage>
          </BreadcrumbItem>
        </BreadcrumbList>
      </Breadcrumb>
      <Breadcrumb>
        <BreadcrumbList separator="arrow">
          <BreadcrumbItem>
            <BreadcrumbLink href="#">Home</BreadcrumbLink>
          </BreadcrumbItem>
          <BreadcrumbItem active>
            <BreadcrumbPage>Arrow</BreadcrumbPage>
          </BreadcrumbItem>
        </BreadcrumbList>
      </Breadcrumb>
    </div>
  );
}

API Reference

PropTypeDefaultDescription
separator"slash" | "dashed" | "arrow""slash"Divider rendered between items.
classNamestring—Additional classes merged with the generated classes.
PropTypeDefaultDescription
activebooleanfalseMarks the item as the current page.
classNamestring—Additional classes merged with the generated classes.

Breadcrumb, BreadcrumbLink, and BreadcrumbPage render a <nav>, <a>, and <span>. Each accepts asChild and className.

Styling

Hummingbird React breadcrumb is styled entirely through Hummingbird's utility classes and CSS variables.

  • See the full list of available breadcrumb classes in the Class overview.
  • Visit the CSS Variables documentation to explore all available variables.
PreviousBadgeNextButton Group