# Breadcrumbs

Shows where the current page sits in the site hierarchy.

[View source and API](https://github.com/tempoxyz/ds/blob/main/src/web/components/Breadcrumbs.tsx)

## Overview

Breadcrumbs show the current page's place in the site hierarchy, as a trail of links back to its ancestors.

Use them on deeply nested pages so you can step back up one or more levels.

## Examples

### Basic

```tsx
import { Breadcrumbs } from '@tempoxyz/ds'

export function Demo() {
  return (
    <Breadcrumbs>
      <Breadcrumbs.Item href="#">Home</Breadcrumbs.Item>
      <Breadcrumbs.Item href="#">Payments</Breadcrumbs.Item>
      <Breadcrumbs.Item current>Invoices</Breadcrumbs.Item>
    </Breadcrumbs>
  )
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Breadcrumbs/Basic.tsx)

### Separator

Set `separator` to any node placed between items. It defaults to a right chevron.

```tsx
import { Breadcrumbs } from '@tempoxyz/ds'

export function Demo() {
  return (
    <Breadcrumbs separator="/">
      <Breadcrumbs.Item href="#">Docs</Breadcrumbs.Item>
      <Breadcrumbs.Item current>Guides</Breadcrumbs.Item>
    </Breadcrumbs>
  )
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Breadcrumbs/Separator.tsx)

## Guidelines

TODO: Write guidelines for Breadcrumbs.