---
name: Breadcrumb
menu: Components
---

import PropsTable from 'website-src/components/PropsTable'
import { livePreviewStyle } from '../helpers/constants'
import Breadcrumb from './Breadcrumb'
import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live'

# Breadcrumb

The `Breadcrumb` component allows you to render a navigation of previously visited pages or page hierarchy, including the current page.

### Try it out

export const code = `<Breadcrumb>
  <Breadcrumb.Item href="/">Account</Breadcrumb.Item>
  <Breadcrumb.Active>Make a Payment</Breadcrumb.Active>
</Breadcrumb>`

<LiveProvider code={code} scope={{ Breadcrumb }}>
  <LiveEditor style={livePreviewStyle} />
  <LiveError />
  <LivePreview />
</LiveProvider>

## Best practices

It's important to render the Breadcrumb as a descendant of `ScreenSizeProvider`, as it calls the `useScreenSize` hook internally.

The Breadcrumb component consists of three parts:
- The `Breadcrumb` which works as a wrapper for the navigation links.
- A `Breadcrumb.Item` which represents a single Breadrumb or link. href should be passed as a prop.
- A `Breadcrumb.Active`, which represents the current page.  This will render non-clickable text.

In addition, you can use the `as` prop to use a custom component for `Breadcrumb.Item`, like a router's `Link` component,
instead of a standard HTML link.  For example:

```jsx
import { Link } from 'react-router-dom'

<Breadcrumb>
  <Breadcrumb.Item as={Link} to="/">Account</Breadcrumb.Item>
  <Breadcrumb.Active>Make a Payment</Breadcrumb.Active>
</Breadcrumb>
```

## Properties

<PropsTable of={Breadcrumb} />