# Breadcrumb

O caminho até onde a pessoa esta.

Encolhe sozinho: passando de `max`, o meio vira reticencia. No celular
sobram as duas ultimas migalhas, porque caminho comprido rola para fora da tela e
ninguém le o começo.

O teto se chama `max`, o mesmo nome que `Indicator`, `AvatarGroup` e `TagsInput`
usam para a mesma ideia.

O caminho entra por `items`, uma lista de `Crumb` (`{ label, href }`, com o
`href` de fora na última, que é onde a pessoa já está):

```tsx
const trilha: Crumb[] = [
  { label: 'Notas fiscais', href: '/notas' },
  { label: 'Nota 4813' },
]
```

A última não é link e leva `aria-current="page"`.

## No React Native

Não porta. O caminho até onde a pessoa está é, no celular, o botão de voltar do router mais o título da tela. Desenhar uma trilha por cima disso duplica a navegação e come a largura que o título precisa.

## Importação

```tsx
import { Breadcrumb } from '@rivocode/ui'
```

## Exemplos

### Caminho

```tsx
import { Breadcrumb } from '@rivocode/ui'

export function Path() {
  return (
    <Breadcrumb
      items={[
        { label: 'Início', href: '#' },
        { label: 'Clientes', href: '#' },
        { label: 'Clínica São Lucas', href: '#' },
        { label: '4813' },
      ]}
    />
  )
}
```

### Dobrado

```tsx
import { Breadcrumb } from '@rivocode/ui'

export function Folded() {
  return (
    <Breadcrumb
      max={4}
      items={[
        { label: 'Início', href: '#' },
        { label: 'Clientes', href: '#' },
        { label: 'Clínica São Lucas', href: '#' },
        { label: 'Notas', href: '#' },
        { label: '4813' },
      ]}
    />
  )
}
```

## Props

| Prop | Tipo | Obrigatória | Desde | O que faz |
| --- | --- | --- | --- | --- |
| `items` | `Crumb[]` | sim | 0.4.0 |  |
| `max` | `number` |  | - | Quantas migalhas cabem antes de o meio virar reticencia. |

Além dessas: repassa `className`, `style`, `id` e os demais atributos do elemento raiz.

## Ver também

- [Command](/componentes/command.md)
- [Menu](/componentes/menu.md)
- [Menubar](/componentes/menubar.md)
- [NavigationMenu](/componentes/navigation-menu.md)
- [Pagination](/componentes/pagination.md)
- [Sidebar](/componentes/sidebar.md)
- [Convenções da biblioteca](/convencoes.md): Provider, tokens e as regras que valem para toda peça
- [Índice completo](/llms.txt)