Primitivenavigation

Breadcrumb

Stable

Primitive de navegação que indica a hierarquia de localização do usuário dentro da aplicação. Composto por links ou texto puro, facilita a navegação reversa e suporta delimitadores customizáveis.

Instalação

npx up-web-ds add breadcrumb

Gera chevron-right, ellipsis para a biblioteca de ícones do projeto (components.json → iconLibrary).

Preview

Default

Custom Separator

Truncated

Truncated With Menu

All states

Default

Custom Separator

Truncated

Truncated With Menu

Usage

@/components/ui/breadcrumb
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from '@/components/ui/breadcrumb'
Breadcrumb
<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/preview">Catálogo</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

Props

Breadcrumb

Estende React.ComponentProps<'nav'>. Aceita também os atributos padrão de um elemento React (280 não listados).

BreadcrumbList

Estende React.ComponentProps<'ol'>. Aceita também os atributos padrão de um elemento React (283 não listados).

BreadcrumbItem

Estende React.ComponentProps<'li'>. Aceita também os atributos padrão de um elemento React (281 não listados).

BreadcrumbPage

Estende React.ComponentProps<'span'>. Aceita também os atributos padrão de um elemento React (280 não listados).

BreadcrumbSeparator

Estende React.ComponentProps<'li'>. Aceita também os atributos padrão de um elemento React (281 não listados).

BreadcrumbEllipsis

Estende React.ComponentProps<'span'>. Aceita também os atributos padrão de um elemento React (280 não listados).

Composition

O <nav> é o Breadcrumb, a lista é o BreadcrumbList, e a página atual é BreadcrumbPage — não um link para onde já se está.

Composição de Breadcrumb

Breadcrumb

  • BreadcrumbList
    • BreadcrumbItem
      • BreadcrumbLink
    • BreadcrumbSeparator
    • BreadcrumbItem
      • BreadcrumbPage

Metadata

Notas de acessibilidade

Teclado e leitor de tela verificados por teste: a trilha é um landmark nav com nome — "Trilha de navegação" por padrão, sobrescrevível, porque duas nav sem nome são indistinguíveis na lista de landmarks. Os crumbs anteriores são links percorridos por Tab com outline visível; o último é a página atual, marcado por aria-current="page" e deliberadamente não é link. Os separadores ficam fora da árvore de acessibilidade: a lista já separa os crumbs, e pontuação anunciada entre cada par é ruído. O ellipsis decorativo não carrega texto sr-only — a origem marcava aria-hidden e punha um "More" dentro, texto que nenhum leitor alcança; quando os níveis ocultos precisam ser alcançáveis, o slot recebe um gatilho de DropdownMenu, que chega como botão com nome real. Touch verificado em viewport de 375px com emulação de toque: os crumbs receberam min-h-6 porque o corpo pequeno lhes dava caixa de 22px, abaixo do piso de 24x24 da política de interação do Up Web DS — e a política é a regra da casa, não um veredito WCAG: a SC 2.5.8 tem exceções de espaçamento e de alvo em linha que provavelmente absolveriam um crumb numa linha espaçada, e o DS pede 24 assim mesmo, porque "provavelmente isento" é resposta pior que "grande o bastante". A trilha profunda quebra em linhas em vez de empurrar a página para rolagem horizontal. Reduced motion verificado em navegador com prefers-reduced-motion: reduce — só há transição de cor no hover do crumb, que não é movimento e por isso permanece: removê-la não acomoda ninguém e custa a única pista de hover.

Classificação

Layer
Primitive
Domínio
Domain-free (compartilhado)
Categoria
navigation
Status
Stable

Origem e distribuição

Fonte
shadcn registry / breadcrumb
Licença
MIT
Distribuição
Interna

Acessibilidade

  • Teclado: revisado
  • Leitor de tela: revisado
  • Touch: revisado
  • Reduced motion: revisado

Dependências

Pacotes
Nenhuma
Ícones
chevron-right, ellipsis
Construído sobre
Nenhum
Usado por
Nenhum ainda