Breadcrumb

Componente estável e recomendada para novos projetos.

Anatomia, uso, comportamento visual e recomendações conceituais são mantidos pelo Padrão Digital de Governo. Esta página documenta a implementação Web Components e sua API executável.

Visão Geral

Para a documentação completa, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o Design System do GovBR.

Exemplo(s)

Desktop (100%)

Tablet - 768px

iPhone (iOS) - 390x844

Android - 360x800

Compartilhar URL

Mudar fundo

Abrir no StackBlitz

Tela cheia

HTML

Controles

JS

CSS

Console

Angular (Somente leitura)

React (Somente leitura)

Vue (Somente leitura)

Acessibilidade

Recolher controles e código

Formatar código

Resetar código para o estado inicial

Copiar para a área de transferência

Propriedades

crumbs

Atributo	crumbs
Descrição	Define o array de objetos que receberá os nomes e links do breadcrumb. Define valor padrão do breadcrumb 'defaultCrumbs'. (obrigatório)
Tipo	BreadcrumbItem[] | string
Valor padrão	---

customId

Atributo	custom-id
Descrição	Identificador único do componente. Quando omitido, um valor é gerado automaticamente. > Padrão: valor único gerado por generateUniqueId().
Tipo	string
Valor padrão	generateUniqueId()

homeHref

Atributo	home-href
Descrição	URL canônica da página inicial. Quando informada, tem precedência sobre homeUrl.
Tipo	string
Valor padrão	---

homeUrl Componente mantido por compatibilidade; prefira a alternativa indicada na documentação.

Atributo	home-url
Depreciação	Use homeHref.
Descrição	Caso não seja fornecido, o valor padrão será /.
Tipo	string
Valor padrão	'/'

navigationMode

Atributo	navigation-mode
Descrição	Controla como os links do breadcrumb integram a navegação mantendo href real nos itens navegáveis. - native (padrão): preserva o comportamento do navegador, conforme HTML/W3C. - event: emite brNavigate; se o evento for cancelado, bloqueia a navegação nativa para a SPA assumir. Cliques com modificadores, botão do meio ou target diferente de _self permanecem nativos.
Tipo	"event" | "native"
Valor padrão	'native'

Slots

Nome	Descrição
"default"	Itens de breadcrumb declarados via elementos br-crumb.

CSS Shadow Parts

Nome	Descrição
"list"	Lista ordenada de itens do breadcrumb.
"nav"	Elemento nav do breadcrumb.

Dependências

Subcomponentes

• br-breadcrumb-item
• br-crumb

Depende de

• br-button
• br-icon
• br-list
• br-item

Gráfico

Migração de <br-breadcrumb> (1.x → 2.x)

Na 1.x, o breadcrumb recebia uma lista de objetos pela propriedade links. Na 2.x, a lista passou a ser chamada de crumbs, e cada item também pode ser composto com br-breadcrumb-item.

Propriedades

API 1.x	API 2.x	Ação na migração
—	homeHref	Use para definir o destino do item inicial.
—	navigationMode	Configure a integração com a navegação da aplicação.
label	aria-label	Substitua o rótulo visual pelo nome acessível, quando necessário.
links	crumbs	Renomeie a propriedade e revise o formato dos itens.

Composição e eventos

O item inicial e os demais níveis podem ser escritos explicitamente com br-breadcrumb-item. Para interceptar a navegação, use o evento brNavigate.

Exemplo

1.x:

<br-breadcrumb :links="links" label="Você está em"></br-breadcrumb>

2.x:

<br-breadcrumb :crumbs="crumbs" home-href="/" aria-label="Navegação estrutural"></br-breadcrumb>

Migração de Navegação

Antes, os itens declarados em crumbs usavam url e o componente podia receber comportamento SPA legado.

Agora, use href nos itens e navigation-mode="event" no br-breadcrumb quando a SPA for controlar a navegação.

<!-- Antes -->
<br-breadcrumb is-spa-link-behavior crumbs='[{"label":"Servicos","url":"/servicos"},{"label":"Atual","active":true}]'></br-breadcrumb>

<!-- Agora -->
<br-breadcrumb navigation-mode="event" crumbs='[{"label":"Servicos","href":"/servicos"},{"label":"Atual","active":true}]'></br-breadcrumb>

home-url continua existindo para o destino do botão Home. Em navigation-mode="event", o Home também emite brNavigate antes de navegar.