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 Breadcrumb.Page.

tsx

import { Breadcrumb } from "@hummingbirdui/react";

export default function BreadcrumbDefault() {
  return (
    <Breadcrumb>
      <Breadcrumb.List>
        <Breadcrumb.Item>
          <Breadcrumb.Link href="#">Home</Breadcrumb.Link>
        </Breadcrumb.Item>
        <Breadcrumb.Item>
          <Breadcrumb.Link href="#">Components</Breadcrumb.Link>
        </Breadcrumb.Item>
        <Breadcrumb.Item active>
          <Breadcrumb.Page>Breadcrumb</Breadcrumb.Page>
        </Breadcrumb.Item>
      </Breadcrumb.List>
    </Breadcrumb>
  );
}

Separators

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

tsx

import { Breadcrumb } from "@hummingbirdui/react";

export default function BreadcrumbSeparators() {
  return (
    <div className="flex flex-col gap-4">
      <Breadcrumb>
        <Breadcrumb.List separator="slash">
          <Breadcrumb.Item>
            <Breadcrumb.Link href="#">Home</Breadcrumb.Link>
          </Breadcrumb.Item>
          <Breadcrumb.Item active>
            <Breadcrumb.Page>Slash</Breadcrumb.Page>
          </Breadcrumb.Item>
        </Breadcrumb.List>
      </Breadcrumb>
      <Breadcrumb>
        <Breadcrumb.List separator="dashed">
          <Breadcrumb.Item>
            <Breadcrumb.Link href="#">Home</Breadcrumb.Link>
          </Breadcrumb.Item>
          <Breadcrumb.Item active>
            <Breadcrumb.Page>Dashed</Breadcrumb.Page>
          </Breadcrumb.Item>
        </Breadcrumb.List>
      </Breadcrumb>
      <Breadcrumb>
        <Breadcrumb.List separator="arrow">
          <Breadcrumb.Item>
            <Breadcrumb.Link href="#">Home</Breadcrumb.Link>
          </Breadcrumb.Item>
          <Breadcrumb.Item active>
            <Breadcrumb.Page>Arrow</Breadcrumb.Page>
          </Breadcrumb.Item>
        </Breadcrumb.List>
      </Breadcrumb>
    </div>
  );
}

API Reference

Breadcrumb.List

Prop	Type	Default
`separator`	`"slash" \| "dashed" \| "arrow"`	`"slash"`
`className`	`string`	—

Breadcrumb.Item

Prop	Type	Default
`active`	`boolean`	`false`
`className`	`string`	—

Breadcrumb.Link

Prop	Type	Default
`asChild`	`boolean`	`false`
`className`	`string`	—

Breadcrumb and Breadcrumb.Page render a <nav> and a <span>, and accept 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.

PreviousBadge NextButton Group