Breadcrumb
StablePrimitive 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 breadcrumbGera chevron-right, ellipsis para a biblioteca de ícones do projeto (components.json → iconLibrary).
Preview
Default
Nested
Custom Separator
Truncated
All states
Default
Nested
Custom Separator
Truncated
Truncated With Menu
Usage
Props
Composition
O <nav> é o Breadcrumb, a lista é o BreadcrumbList, e a página atual é BreadcrumbPage — não um link para onde já se está.
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