Pular para o conteúdo
Faculdade PhorteDesign System

Breadcrumb

Em andamento

Trilha de navegação do início até a página atual: a casinha para o início, os degraus do meio (links, ou texto quando não têm página) e a página atual em negrito — a única com aria-current="page" (E71). Acima de quatro níveis, o meio recolhe num "…" com menu.

Função
Navegação e estrutura
Também chamado de
trilha, migalhas, caminho, breadcrumbs
Mora em
app/components/molecules/Breadcrumb.tsx
Última mudança
2026-10-01
Ver como Markdown(abre em outra aba)Ficha no Storybook(abre em outra aba)

Prévia

A peça ao vivo, vinda da ficha, na largura escolhida. Em larguras fixas, ela roda num quadro do tamanho de uma tela de verdade.

Na largura da página: 0px

Pular a prévia
Variante Padrão, ao vivo — vem da ficha.Abrir sozinha(abre em outra aba)

Variantes na ficha

Lidas da ficha no build, na ordem do palco. Cada uma abre sozinha, sem o styleguide em volta — é o endereço que o palco carrega.

  1. Padrão
  2. Trilha longa
  3. Um nível
  4. Degrau do meio sem link

Quando usar

No topo de páginas internas com dois ou mais níveis de profundidade — curso dentro de área, post dentro de categoria.

Faça

  • Passe os degraus do mais alto ao atual; o último vira a página atual sozinho.
  • Use os mesmos nomes que a página e o menu usam.
  • Mude o homeHref quando o início da área não for a raiz do site, e o maximoDeNiveis se quatro for pouco para a área.

Evite

  • Trilha que repete o título da página logo abaixo com outro nome.
  • Degrau do meio sem página, a não ser que ele de fato não tenha uma — ele vira texto, sem link.

Quando não usar. Na página inicial e em páginas de primeiro nível, onde a trilha teria só o início. Para navegar entre páginas do mesmo nível, a Navbar; para uma lista longa em partes, a Pagination.

Anatomia

As partes, na ordem em que o olho — e o teclado — passam.

  1. Início — Link com o ícone de casa, 44×44, nomeado "Início".
  2. Separador — Seta para a direita, decorativa, antes de cada degrau.
  3. Degrau — Link em `--muted-foreground`, 44px de altura (E71), sublinhado no hover; sem `href`, texto comum.
  4. Recolhidos — Acima de `maximoDeNiveis`: um Dropdown só-ícone "Mostrar N níveis escondidos", com os degraus do meio.
  5. Página atual — Texto em negrito, sem link, com `aria-current="page"` — só o último.

Estados

Os estados que a peça tem no código, e o que muda em cada um.

Estados da peça e o que muda em cada um
EstadoO que muda
DegrauLink em cinza; no hover, vermelho de interface e sublinhado.
Degrau sem páginaTexto cinza, sem link e sem aria-current (E71).
FocoO anel de foco no link, só no teclado.
Página atualNegrito, sem link e aria-current="page".

Comportamento

Como a peça reage em cada situação
SituaçãoO que acontece
Último itemSai como texto, mesmo com href.
Item do meio sem `href`Sai como texto comum — conferido no teste da ficha. Até a E71 também ganhava aria-current="page".
Mais de `maximoDeNiveis` (padrão 4)O primeiro degrau e o último ficam; os do meio vão para o menu do "…" — conferido no teste da ficha.
Tela estreitaA lista quebra linha (flex-wrap no ol, E71): a trilha não rola para os lados.

Relacionados