components
breadcrumb
Mostra a posição da página atual numa hierarquia. Permite navegar pra qualquer nível superior. Usado em sites com 3+ níveis de profundidade.
overview
variantes
Variante única.
estados
anatomia
- Separador — barra verde pra ritmar a hierarquia
- Item atual — sem link, marcado com aria-current
modifiers · api
| prop | tipo | default | descrição |
|---|---|---|---|
| .breadcrumb | class | — | container nav |
| .sep | class | — | separador entre itens |
| aria-current | "page" | — | item ativo (não clicável) |
quando usar
use
não use
acessibilidade
- Elemento <nav aria-label="breadcrumb">
- aria-current="page" no item ativo
- Separador é decoração — pode ser aria-hidden
- Foco visível em cada link
código
<nav class="breadcrumb" aria-label="breadcrumb">
<a href="/">home</a>
<span class="sep">/</span>
<a href="/components">components</a>
<span class="sep">/</span>
<span aria-current="page">breadcrumb</span>
</nav>