Breadcrumb

Navegação hierárquica com separadores chevron. Links em cor sutil, item atual em cor padrão. Hover escurece o link sem underline. Dark mode automático via tokens semânticos.

components/breadcrumb.cssAbrir no Figma

Exemplo

Passe o mouse sobre os links para ver o hover.

Carregando exemplo...

Propriedades

Classes disponíveis para configurar o breadcrumb.

Propriedade	Tipo	Default	Descrição
.breadcrumb	classe	—	Container flex com gap 8px. Margin-top 24px, margin-bottom 40px.
.breadcrumb-item	classe	—	Wrapper de um item (link + separador).
.breadcrumb-link	classe	—	Link clicável (p3 medium, cor subtle).
.breadcrumb-current	classe	—	Item atual (p3 medium, cor default).
.breadcrumb-separator	classe	—	Chevron right (18x18, stroke 1.5px).

Código

Snippet pronto para copiar e usar.

<nav class="breadcrumb">
    <span class="breadcrumb-item">
        <a href="/tela-a" class="breadcrumb-link">Tela A</a>
        <span class="breadcrumb-separator">
            <svg viewBox="0 0 18 18" fill="none" stroke="currentColor"
                 stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                <path d="M7.125 4.5L11.625 9L7.125 13.5"/>
            </svg>
        </span>
    </span>
    <span class="breadcrumb-item">
        <a href="/tela-b" class="breadcrumb-link">Tela B</a>
        <span class="breadcrumb-separator">
            <svg viewBox="0 0 18 18" fill="none" stroke="currentColor"
                 stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                <path d="M7.125 4.5L11.625 9L7.125 13.5"/>
            </svg>
        </span>
    </span>
    <span class="breadcrumb-item">
        <span class="breadcrumb-current">Tela C</span>
    </span>
</nav>

Tokens utilizados

Variáveis semânticas aplicadas ao componente.

Token	Uso
--text-base-neutral-subtle	Cor dos links
--text-base-neutral-secondary	Cor do link no hover
--text-base-neutral-default	Cor do item atual
--icon-base-neutral-subtle	Cor do separador chevron
--spacing-2	Gap entre itens (8px)

Versão3.0.0

Última atualização2026-03-19

Caminhocomponentes/breadcrumb.md