BaseBreadcrumb

Mostra onde a página está dentro do sistema, do nível mais alto até a página atual, e leva de volta a qualquer nível acima. Fica no topo da página, acima do título.

1. Contratos
2. CF001/2022 · Fórum de Alegre
3. Medição 29

Uso

• items é o caminho, do nível mais alto até a página atual. O último item é sempre a página atual.
• Os níveis acima têm href e viram links. A página atual fica sem href: aparece como texto, mais escuro e em peso médio.
• Use o mesmo nome que o título de cada página, para o usuário reconhecer o caminho: "Contratos", "CF001/2022 · Fórum de Alegre", "Medição 29".
• A trilha mostra a hierarquia, não o histórico de navegação. Para voltar à tela anterior, use o botão Voltar do navegador.
• Dispensável em telas de primeiro nível, como a lista de contratos: com um item só, ela não leva a lugar nenhum.
• Com duas trilhas na mesma tela, dê um label diferente a cada uma.

Caminho longo

1. Início
3. Obras
4. Contratos
5. CF001/2022 · Fórum de Alegre
6. Medição 29

Em telas de celular (até 575 px), com quatro itens ou mais, os níveis entre o primeiro e o pai da página atual ficam atrás de um botão "…". Ele diz ao leitor de tela quantos níveis estão escondidos, por exemplo "Mostrar 2 níveis ocultos da trilha". Ao tocar, todos os níveis aparecem e o foco vai para o primeiro link revelado (ou para o primeiro nível revelado, se nenhum deles for link). Se o caminho mudar, a trilha volta a recolher; um array novo com o mesmo caminho não recolhe. Reduza a janela para ver.

Um nome longo quebra a linha em vez de empurrar a página para o lado.

Página atual com link

1. Contratos
2. CF001/2022 · Fórum de Alegre
3. Medição 29

Se a página atual tiver href, ela vira um link para si mesma, com aria-current="page", como no exemplo do WAI-ARIA APG. Prefira a página atual sem href: um link que não leva a lugar novo é um Tab a mais para quem usa teclado.

Tamanhos

1. Contratos
2. CF001/2022 · Fórum de Alegre
3. Medição 29

1. Contratos
2. CF001/2022 · Fórum de Alegre
3. Medição 29

Use sm (13 px, padrão) acima do título da página e md (14 px) quando a trilha estiver sozinha, sem título por perto.

Estilo

Propriedade	Token
Níveis acima	Texto --tj-text-helper, peso --tj-weight-regular; ao passar o mouse e ao pressionar, --tj-link-primary e sublinhado
Nível acima sem link	Texto --tj-text-helper em itálico, para se distinguir dos links sem depender da cor
Página atual	Texto --tj-text-primary, peso --tj-weight-medium
Separador	Ícone chevron-right a 0,75 do texto, cor --tj-icon-secondary
Texto	--tj-text-sm (13 px) e --tj-text-md (14 px)
Espaço entre itens	--tj-space-2 (8 px) na linha, --tj-space-1 (4 px) entre linhas
Botão "…"	24 × 24 px (--tj-space-6), texto --tj-link-primary; hover --tj-layer-accent-01 com --tj-link-primary-hover; pressionado --tj-layer-accent-02; raio --tj-radius-sm
Foco	O do BaseLink nos links; no botão, contorno sólido de 2 px --tj-border-interactive a 2 px, mais o halo --tj-ring
Transição do botão	--tj-duration-fast-02, --tj-easing-standard; desligada com movimento reduzido

As cores trocam sozinhas no tema escuro ([data-theme="dark"]). O visual vem da trilha do protótipo v3 (.tj-breadcrumb em tjes-theme.css). O espaço de 6 px do protótipo virou --tj-space-2, e o separador saiu do CSS para um ícone escondido do leitor de tela.

Código

<script setup lang="ts">
import { BaseBreadcrumb, type BreadcrumbItem } from '@lab-inovacao/design-system'

const trilha: BreadcrumbItem[] = [
  { label: 'Contratos', href: '/contratos' },
  { label: 'CF001/2022 · Fórum de Alegre', href: '/contratos/1' },
  { label: 'Medição 29' },
]
</script>

<template>
  <BaseBreadcrumb :items="trilha" />
</template>

Propriedade	Tipo	Padrão	Descrição
items	BreadcrumbItem[]	—	Caminho até a página atual, que é o último item. Obrigatório
label	string	'Trilha'	Nome da região de navegação; mude quando a tela tiver mais de uma trilha
size	'sm' | 'md'	'sm'	Tamanho do texto

BreadcrumbItem tem label (string, o texto do nível) e href (string, opcional, o destino). Um nível acima sem href aparece como texto em itálico; use só quando aquele nível não tiver página própria. Um label vazio volta para 'Trilha', para a região nunca ficar sem nome.

Sem eventos próprios: cada nível é um BaseLink, que navega pelo href.

Acessibilidade

• Segue o padrão de trilha (breadcrumb) do WAI-ARIA APG: um <nav> com aria-label="Trilha" e os níveis numa lista ordenada <ol>, então o leitor de tela anuncia a região e quantos níveis ela tem.
• Cada nível acima é um <a href> nativo (BaseLink): entra na ordem do Tab e Enter abre o destino.
• O último item tem aria-current="page", como texto ou como link. Para quem enxerga, a página atual se distingue por ser a última, mais escura e de peso médio; a cor não é o único sinal.
• Os separadores são ícones com aria-hidden="true" dentro de cada <li>, então o leitor de tela não os lê e a lista só tem itens <li>. O separador não vem de content no CSS, que alguns leitores de tela anunciam.
• No celular, o botão "…" é um <button> nativo: Tab chega nele, Enter e Espaço acionam. O nome diz quantos níveis estão escondidos. Ele mede 24 × 24 px, o mínimo da WCAG 2.5.8. Depois do toque o botão some, e o foco vai para o primeiro link revelado, para não cair no início da página. Se nenhum nível revelado for link, o foco vai para o primeiro deles, que recebe tabindex="-1" só para isso e continua fora da ordem do Tab.
• Os níveis recolhidos ficam com display: none também para o leitor de tela, até o botão ser acionado: quem enxerga e quem ouve encontram a mesma trilha. Em telas maiores, o botão fica escondido e todos os níveis aparecem.
• O foco dos links é o do BaseLink; o do botão é um contorno sólido de 2 px (contraste de 3:1 ou mais, WCAG 1.4.11) e o halo --tj-ring por fora. No modo de alto contraste do sistema, o contorno usa a cor Highlight, o botão usa ButtonText e ganha sublinhado ao passar o mouse, já que o fundo de hover some nesse modo.
• A transição do botão some com prefers-reduced-motion. Funciona nos temas claro e escuro.
• Um nível acima sem link aparece em itálico, então quem enxerga distingue o que é clicável sem depender da cor.
• Testado com axe em: um item, dois itens, três itens, página atual com link, nível acima sem link, caminho longo (um e dois níveis ocultos) com todos os itens no DOM, o mesmo caminho como o celular mostra (níveis recolhidos com display: none e o botão "…" visível, aplicando as regras do celular no teste), caminho revelado, tamanho md, label próprio e duas trilhas na mesma tela. O ponto de quebra de 575 px, Enter e Espaço no botão e o modo de alto contraste dependem do navegador e são conferidos visualmente.