Skip to main content
USWDS + Tailwind

Breadcrumb

Use breadcrumbs to show a visitor's location in a website hierarchy and provide links back to higher-level pages.

Examples

Default

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px
breadcrumb-demo.tsx
import { Breadcrumb } from '@uswds-tailwind/react/breadcrumb'


export default function BreadcrumbDemo() {
  return (
    <Breadcrumb.Root wrap={false} aria-label="Breadcrumb">
      <Breadcrumb.Previous />
      <Breadcrumb.List>
        <Breadcrumb.Item>
          <Breadcrumb.Link href="#">Home</Breadcrumb.Link>
          <Breadcrumb.Separator />
        </Breadcrumb.Item>
        <Breadcrumb.Item>
          <Breadcrumb.Link href="#">Federal Contracting</Breadcrumb.Link>
          <Breadcrumb.Separator />
        </Breadcrumb.Item>
        <Breadcrumb.Item>
          <Breadcrumb.Link href="#">Contracting assistance programs</Breadcrumb.Link>
          <Breadcrumb.Separator />
        </Breadcrumb.Item>
        <Breadcrumb.Item isCurrent>
          <Breadcrumb.Link>Economically disadvantaged women-owned small business federal contracting program</Breadcrumb.Link>
        </Breadcrumb.Item>
      </Breadcrumb.List>
    </Breadcrumb.Root>
  )
}

Wrapping

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px
breadcrumb-wrapping-demo.tsx
import { Breadcrumb } from '@uswds-tailwind/react/breadcrumb'


export default function BreadcrumbWrappingDemo() {
  return (
    <Breadcrumb.Root wrap={true} aria-label="Wrapping Breadcrumb">
      <Breadcrumb.Previous />
      <Breadcrumb.List>
        <Breadcrumb.Item>
          <Breadcrumb.Link href="#">Home</Breadcrumb.Link>
          <Breadcrumb.Separator />
        </Breadcrumb.Item>
        <Breadcrumb.Item>
          <Breadcrumb.Link href="#">Federal Contracting</Breadcrumb.Link>
          <Breadcrumb.Separator />
        </Breadcrumb.Item>
        <Breadcrumb.Item>
          <Breadcrumb.Link href="#">Contracting assistance programs</Breadcrumb.Link>
          <Breadcrumb.Separator />
        </Breadcrumb.Item>
        <Breadcrumb.Item isCurrent>
          <Breadcrumb.Link>Economically disadvantaged women-owned small business federal contracting program</Breadcrumb.Link>
        </Breadcrumb.Item>
      </Breadcrumb.List>
    </Breadcrumb.Root>
  )
}

Component API

Put Item parts inside List, with a Link for each destination. Mark the current item on Item.

Root<nav>

Set aria-label to name this navigation landmark.

PropTypeDefaultDescription
aria-labelstring (required)—Names the navigation landmark.
wrapboolean (required by the current type)falseAllows the trail to wrap instead of truncating earlier items. Runtime default is false.

List<ol>

Orders the breadcrumb items.

Item<li>

Groups a destination and its separator.

PropTypeDescription
isCurrentbooleanMarks this item as the current page.

Renders a link, or current-page text when its Item is current.

Separator<span>

Displays the separator between items.

Previous<span>

Displays the compact previous-page trail.