---
title: Breadcrumbs
description: Breadcrumbs display the current page within the site's hierarchy, allowing users to easily navigate to a different level.
keywords: ['navigation']
ready: true
source: https://github.com/primer/brand/blob/main/packages/react/src/Breadcrumbs/Breadcrumbs.tsx
storybook: '/brand/storybook/?path=/story/components-breadcrumbs--playground'
---

```js
import {Breadcrumbs} from '@primer/react-brand'
```

## Examples

### Default

```jsx
<Breadcrumbs>
  <Breadcrumbs.Item href="/">Resources</Breadcrumbs.Item>
  <Breadcrumbs.Item href="/copilot">GitHub Copilot</Breadcrumbs.Item>
  <Breadcrumbs.Item href="/copilot/chat" selected>
    Chat
  </Breadcrumbs.Item>
</Breadcrumbs>
```

### Accent

```jsx
<Breadcrumbs variant="accent">
  <Breadcrumbs.Item href="/">Resources</Breadcrumbs.Item>
  <Breadcrumbs.Item href="/copilot">GitHub Copilot</Breadcrumbs.Item>
  <Breadcrumbs.Item href="/copilot/chat" selected>
    Chat
  </Breadcrumbs.Item>
</Breadcrumbs>
```

## Component props

### Breadcrumbs `Required`

| name      | type                 | default | required | description                               |
| --------- | -------------------- | ------- | -------- | ----------------------------------------- |
| `variant` | `BreadcrumbVariants` |         | `false`  | Specify alternative breadcrumb appearance |

### Breadcrumbs.Item `Required`

| name       | type      | default | required | description                         |
| ---------- | --------- | ------- | -------- | ----------------------------------- |
| `selected` | `boolean` |         | `false`  | Used for indicating the active link |
| `href`     | `string`  |         | `true`   | URL of the page the link goes to    |