---
title: Breadcrumb (React) - USWDS + Tailwind
description: Use breadcrumbs to show a visitor's location in a website hierarchy
  and provide links back to higher-level pages.
---

# Breadcrumb

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

## Examples

### Default

```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

```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.

| Prop | Type | Default | Description |
| - | - | - | - |
| `aria-label` | `string (required)` | `—` | Names the navigation landmark. |
| `wrap` | `boolean (required by the current type)` | `false` | Allows 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.

| Prop | Type | Description |
| - | - | - |
| `isCurrent` | `boolean` | Marks this item as the current page. |

### Link `<a>`

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.
