Breadcrumb

Quando usar

Use o breadcrumb quando a pagina atual esta a mais de um nivel de profundidade dentro de uma hierarquia navegavel: uma tela de ordem dentro de uma carteira, uma carteira dentro da conta. Ele ajuda o usuario a entender onde esta e a subir de nivel com um clique, sem depender do botao voltar do navegador.

Quando nao usar

Nao use breadcrumb em telas de nivel unico (o dashboard principal, uma tela de login): sem hierarquia para mostrar, ele so ocupa espaco. Tambem nao substitui a navegacao principal do produto (sidebar, tabs): o breadcrumb complementa, mostrando o caminho ate ali, nao os destinos possiveis a partir dali.

Anatomia

• Breadcrumb (data-slot="breadcrumb"): a raiz, um <nav aria-label="breadcrumb">.
• BreadcrumbList (data-slot="breadcrumb-list"): a lista ordenada (<ol>) dos itens.
• BreadcrumbItem (data-slot="breadcrumb-item"): um item da lista (<li>), com o link ou a pagina atual dentro.
• BreadcrumbLink (data-slot="breadcrumb-link"): o link para um nivel anterior. Aceita asChild para renderizar o filho no lugar do <a>, herdando classe, ref e o resto das props, o que permite usar o Link do Next sem duplicar o elemento:

  <BreadcrumbLink asChild>
    <Link href="/carteira">Carteira</Link>
  </BreadcrumbLink>

• BreadcrumbPage (data-slot="breadcrumb-page"): a pagina atual. Nao e um link, so texto marcado com aria-current="page".
• BreadcrumbSeparator (data-slot="breadcrumb-separator"): o separador entre itens. Renderiza um chevron por padrao, mas aceita qualquer filho no lugar.
• BreadcrumbEllipsis (data-slot="breadcrumb-ellipsis"): reticencias para colapsar niveis intermediarios em caminhos longos.

Nenhuma parte usa Radix nem estado: e uma arvore de elementos semanticos, renderizavel no servidor. O asChild do BreadcrumbLink e implementado na mao (nao com o Slot do radix-ui) exatamente para nao trazer a diretiva "use client" para um componente que nao precisa dela.

Acessibilidade

• A raiz usa aria-label="breadcrumb" no <nav>, para o leitor de tela anunciar a regiao antes de entrar nos itens.
• BreadcrumbPage marca a pagina atual com aria-current="page" e aria-disabled="true": e texto, nao um link para o lugar onde o usuario ja esta.
• BreadcrumbSeparator e BreadcrumbEllipsis levam aria-hidden="true" e role="presentation": sao pistas visuais, o leitor de tela nao precisa deles para entender a hierarquia (a ordem dos BreadcrumbItem ja comunica isso).
• BreadcrumbLink tem foco visivel (focus-visible:ring-2) e area de toque normal de link: garanta que o texto do link sozinho descreva o destino (evite "clique aqui").