Vox Mente
Navegação

Componentes

Breadcrumb

beta

Onde o usuário está dentro de uma hierarquia, e como subir um nível. Não substitui o botão voltar do navegador.

Ainda não é estável porque Pendência editorial: oQueE, quandoUsar, quandoNaoUsar; Rota não varrida pelo sensor. Ausência de medição não é aprovação. O contrato de maturidade explica o que cada requisito exige.

@voxmente/ui/components/ui/breadcrumb

Playground
<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/escolas">Escolas</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="/escolas/colegio-vila-nova">Colégio Vila Nova</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>7º ano B</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

Anatomia

As partes deste componente e como se aninham. A árvore vem das demonstrações desta página, então descreve um exemplo que renderiza.
Breadcrumb
  └─ BreadcrumbList
    └─ BreadcrumbItem
      └─ BreadcrumbLink
    └─ BreadcrumbSeparator
    └─ BreadcrumbItem
      └─ BreadcrumbEllipsis
    └─ BreadcrumbSeparator
    └─ BreadcrumbItem
      └─ BreadcrumbLink
    └─ BreadcrumbSeparator
    └─ BreadcrumbItem
      └─ BreadcrumbPage

Uso

Mostra onde o usuário está dentro de uma hierarquia de navegação. Cada nível é um passo — não use para ações nem para histórico.

Página atual

O último nível é sempre `BreadcrumbPage`, não `BreadcrumbLink`. Ele não navega — tem `aria-current="page"` e `aria-disabled` fixos, porque clicar onde já se está não faz sentido.

Colapsado

Trilhas longas escondem os níveis do meio atrás de `BreadcrumbEllipsis`. Reserve isso para hierarquias fundas — três ou quatro níveis cabem sem colapsar.

Separador customizado

`BreadcrumbSeparator` aceita `children`. Sem filho, cai no ícone padrão — passe outro conteúdo só quando o traço visual do produto pedir.

Sem slot na casca de tela

O `ScreenHeader` da casca de tela ainda não tem um slot para trilha de navegação — é uma lacuna conhecida, registrada em /storybook/patterns/casca-de-tela. Enquanto o slot não existir, não improvise a trilha dentro do conteúdo da tela só para preencher o vazio.

Referência da API

Extraída do TypeScript de @voxmente/ui a cada build. Se divergir do código, o código mudou.

Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator não têm props próprias — aceitam apenas as props herdadas, incluindo className e os atributos de DOM.

Pendência editorial: o que é, quando usar, quando não usar, acessibilidade, componentes relacionados, exemplo em contexto de produto. A lacuna aparece aqui em vez de ser preenchida com orientação inventada.

Origem do dado
  • Anatomia: exemplo desta página
  • Demonstrações e playground: componente real de @voxmente/ui
  • Referência da API: TypeScript do pacote
  • Cor, espaçamento e raio das demonstrações: tokens de theme.css