# Breadcrumb
> Componentes / Navegação e estrutura · Estado: **Em andamento** — Implementado e utilizável, mas ainda sem a validação completa de acessibilidade.
Trilha de navegação do início até a página atual: a casinha para o início, os degraus do meio (links, ou texto quando não têm página) e a página atual em negrito — a única com `aria-current="page"` (E71). Acima de quatro níveis, o meio recolhe num "…" com menu.
- Função: Navegação e estrutura
- Também chamado de: trilha, migalhas, caminho, breadcrumbs
- Mora em: `app/components/molecules/Breadcrumb.tsx`
- Página: [https://phorte-design-system.vercel.app/styleguide/peca/Breadcrumb](https://phorte-design-system.vercel.app/styleguide/peca/Breadcrumb)
- Ficha no Storybook: [components-complex-breadcrumb](https://main--69b4847d498a9bd8659db9ba.chromatic.com/?path=/docs/components-complex-breadcrumb--docs)
- Prévia ao vivo, sozinha: [https://phorte-design-system.vercel.app/previa/Breadcrumb/0](https://phorte-design-system.vercel.app/previa/Breadcrumb/0)
- Todas as peças: [https://phorte-design-system.vercel.app/llms.txt](https://phorte-design-system.vercel.app/llms.txt)
## Como usar no código
```tsx
import { Breadcrumb } from '@/app/components/molecules/Breadcrumb';
…
```
O `…` marca as props obrigatórias — ver *Propriedades*.
## Uso
### Variantes na ficha
1. [Padrão](https://phorte-design-system.vercel.app/previa/Breadcrumb/0)
2. [Trilha longa](https://phorte-design-system.vercel.app/previa/Breadcrumb/1)
3. [Um nível](https://phorte-design-system.vercel.app/previa/Breadcrumb/2)
4. [Degrau do meio sem link](https://phorte-design-system.vercel.app/previa/Breadcrumb/3)
No topo de páginas internas com dois ou mais níveis de profundidade — curso dentro de área, post dentro de categoria.
### Quando não usar
Na página inicial e em páginas de primeiro nível, onde a trilha teria só o início. Para navegar entre páginas do mesmo nível, a Navbar; para uma lista longa em partes, a Pagination.
### Faça
- Passe os degraus do mais alto ao atual; o último vira a página atual sozinho.
- Use os mesmos nomes que a página e o menu usam.
- Mude o `homeHref` quando o início da área não for a raiz do site, e o `maximoDeNiveis` se quatro for pouco para a área.
### Evite
- Trilha que repete o título da página logo abaixo com outro nome.
- Degrau do meio sem página, a não ser que ele de fato não tenha uma — ele vira texto, sem link.
### Anatomia
1. **Início** — Link com o ícone de casa, 44×44, nomeado "Início".
2. **Separador** — Seta para a direita, decorativa, antes de cada degrau.
3. **Degrau** — Link em `--muted-foreground`, 44px de altura (E71), sublinhado no hover; sem `href`, texto comum.
4. **Recolhidos** — Acima de `maximoDeNiveis`: um Dropdown só-ícone "Mostrar N níveis escondidos", com os degraus do meio.
5. **Página atual** — Texto em negrito, sem link, com `aria-current="page"` — só o último.
### Estados
| Estado | O que muda |
| --- | --- |
| Degrau | Link em cinza; no hover, vermelho de interface e sublinhado. |
| Degrau sem página | Texto cinza, sem link e sem `aria-current` (E71). |
| Foco | O anel de foco no link, só no teclado. |
| Página atual | Negrito, sem link e `aria-current="page"`. |
### Comportamento
| Situação | O que acontece |
| --- | --- |
| Último item | Sai como texto, mesmo com `href`. |
| Item do meio sem `href` | Sai como texto comum — conferido no teste da ficha. Até a E71 também ganhava `aria-current="page"`. |
| Mais de `maximoDeNiveis` (padrão 4) | O primeiro degrau e o último ficam; os do meio vão para o menu do "…" — conferido no teste da ficha. |
| Tela estreita | A lista quebra linha (`flex-wrap` no `ol`, E71): a trilha não rola para os lados. |
### Relacionados
- [Navbar](https://phorte-design-system.vercel.app/styleguide/md/Navbar.md) — A navegação principal, acima da trilha.
- [Dropdown](https://phorte-design-system.vercel.app/styleguide/md/Dropdown.md) — O menu dos degraus recolhidos.
- [PageLayout](https://phorte-design-system.vercel.app/styleguide/md/PageLayout.md) — O molde de página onde ela entra.
## Especificação
### Propriedades
| Prop | Tipo | Padrão | Obrigatória | Descrição |
| --- | --- | --- | --- | --- |
| `items` | `BreadcrumbItem[]` | — | sim | |
| `homeHref` | `string` | `'/'` | não | |
| `maximoDeNiveis` | `number` | `4` | não | Acima deste número de níveis (contando o início), os do meio recolhem num "…" com menu (E71). Padrão 4: a trilha de uma especialização passava de 375px e rolava para os lados. |
Aceita também: `React.HTMLAttributes`.
### Medidas
| Parte | Valor | Classe |
| --- | --- | --- |
| Link do início | 44 × 44px | `min-h-alvo-toque min-w-alvo-toque` |
| Degrau com link | 44px de altura (E71) | `min-h-alvo-toque` |
### Tokens de cor
| Token | Valor | Usado como |
| --- | --- | --- |
| `--foreground` | #1A1A1A | `text-ink` |
| `--muted` | #F4F6F9 | `bg-muted` |
| `--muted-foreground` | #595959 | `text-muted-foreground` |
| `--primary` | #D42B2B | `text-primary` |
## Acessibilidade
### Teclado
| Tecla | Faz |
| --- | --- |
| Tab | Passa pelo Início, pelos degraus com link e pelo "…", nessa ordem; a página atual não recebe foco. |
| Enter | Segue o link em foco; no "…", abre o menu dos degraus escondidos, com as setas do Dropdown — conferido no teste da ficha. |
### Leitor de tela
- É uma `