Breadcrumb

O mk-breadcrumb exibe o caminho percorrido desde a raiz até a página atual em uma sequência de links separados por um divisor (/). Ele orienta o usuário em estruturas com múltiplos níveis e oferece atalhos para voltar a qualquer nível anterior sem usar o botão "voltar" do navegador. A página atual é sempre o último item da trilha e não é clicável.

Quando usar

• A interface tiver hierarquia de navegação com 2 ou mais níveis
• O usuário precisar entender sua localização dentro de uma estrutura de páginas
• A navegação de retorno para níveis superiores for frequente

• A interface for plana, sem hierarquia de páginas — o breadcrumb seria vazio de significado
• O espaço horizontal for muito limitado e o contexto de localização não for prioritário

Anatomia

O breadcrumb é uma sequência horizontal de itens alternados entre links de página e separadores.

Padrão

Passe um array de objetos { label, href } na prop items. O último item é automaticamente tratado como a página atual — omita o href nele.

import { MkBreadcrumb } from '@db1/makuco-ui-react';

<MkBreadcrumb
  items={[
    { label: 'Home', href: '/' },
    { label: 'Produtos', href: '/products' },
    { label: 'Detalhes', href: '/products/123' },
    { label: 'Página atual' },
  ]}
  onMkNavigate={(e) => router.navigate(e.detail.href)}
/>

<mk-breadcrumb
  [items]="breadcrumbItems"
  (mkNavigate)="onNavigate($event)"
></mk-breadcrumb>

breadcrumbItems = [
  { label: 'Home', href: '/' },
  { label: 'Produtos', href: '/products' },
  { label: 'Detalhes', href: '/products/123' },
  { label: 'Página atual' },
];

onNavigate(event: CustomEvent<{ href: string }>) {
  this.router.navigate([event.detail.href]);
}

Caminho curto

Com apenas 2 itens — raiz e página atual.

<MkBreadcrumb
  items={[
    { label: 'Home', href: '/' },
    { label: 'Página atual' },
  ]}
/>

<mk-breadcrumb [items]="[
  { label: 'Home', href: '/' },
  { label: 'Página atual' }
]"></mk-breadcrumb>

Caminho longo

Suporta até 7 níveis de profundidade.

<MkBreadcrumb
  items={[
    { label: 'Dashboard', href: '/' },
    { label: 'Configurações', href: '/settings' },
    { label: 'Conta', href: '/settings/account' },
    { label: 'Segurança', href: '/settings/account/security' },
    { label: 'Autenticação em dois fatores' },
  ]}
/>

<mk-breadcrumb [items]="deepPath"></mk-breadcrumb>

Comportamento

Os separadores (/) são inseridos automaticamente entre os itens — não é necessário adicioná-los manualmente. O último item do array é sempre tratado como a página atual: é renderizado como <span> com aria-current="page" e não dispara mkNavigate ao ser clicado.

Para integração com roteadores client-side, ouça o evento mkNavigate e execute a navegação programática — evite recarregar a página via href completo quando estiver em uma SPA.

Composição

O mk-breadcrumb é um componente de navegação secundária. Posicione-o próximo ao topo da página, abaixo do cabeçalho global e acima do título da página atual.

Não combine mk-breadcrumb com outros indicadores de localização na mesma área — ele é o único elemento responsável por comunicar a posição hierárquica do usuário.

Props

Eventos

Acessibilidade

Landmark de navegação: o elemento <mk-breadcrumb> recebe role="navigation" e aria-label="breadcrumb" diretamente no host, identificando o bloco como navegação secundária para leitores de tela. Internamente, a trilha é renderizada como <ol> com itens <li> — semântica de lista ordenada, compatível com a leitura sequencial esperada por tecnologias assistivas.

Página atual: o último item recebe automaticamente aria-current="page". Sem esse atributo, usuários de leitores de tela não conseguiriam distinguir o item ativo dos links anteriores.

Separadores decorativos: os separadores (/) são marcados com aria-hidden="true" e não são lidos — eles não carregam informação semântica.

Navegação por teclado: todos os itens anteriores ao atual são renderizados como <button> (via mk-link) e alcançáveis via Tab. O item atual é um <span> e não entra no fluxo de foco.