---
title: "Breadcrumbs"
description: "Where the page sits: links up the hierarchy and the current page last, in a navigation landmark. With collapseOnPhone, a phone shows only the current page and its parent as a back arrow."
---

> Documentation Index
> Fetch the complete documentation index at: https://epidermis.getarbol.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Breadcrumbs

## A record in a section

```tsx
import { Breadcrumb, Breadcrumbs } from '@arbol-ai/ui';

<Breadcrumbs>
  <Breadcrumb href="#/breadcrumbs">Campaigns</Breadcrumb>
  <Breadcrumb href="#/breadcrumbs">Spring reminders</Breadcrumb>
  <Breadcrumb>Recipients</Breadcrumb>
</Breadcrumbs>
```

## Collapsed on phones

Narrow the window below 640px: the parent becomes a back arrow before the page name.

```tsx
import { Breadcrumb, Breadcrumbs } from '@arbol-ai/ui';

<Breadcrumbs collapseOnPhone>
  <Breadcrumb href="#/breadcrumbs">Settings</Breadcrumb>
  <Breadcrumb href="#/breadcrumbs">Patients</Breadcrumb>
  <Breadcrumb>Ana Torres</Breadcrumb>
</Breadcrumbs>
```

## Source

The examples above are [`src/components/breadcrumbs/breadcrumbs.examples.tsx`](https://github.com/getarbol/project-arbol-ui/blob/main/src/components/breadcrumbs/breadcrumbs.examples.tsx), which the library's tests render too.

Source: https://epidermis.getarbol.com/components/navigation/breadcrumbs/index.mdx