MeBreadcrumbs

Trilha de navegação com links clicáveis, separadores automáticos e renderização inteligente do último item.

Playground

Importação

<script>
import { MeBreadcrumbs } from '@/components/global/utils/export/index'
</script>

Uso Básico

Passe um array de items com label e to opcional. O último item nunca é renderizado como link.

• Home chevron_right
• Usuários chevron_right
• Detalhe

<MeBreadcrumbs
  :items="[
    { label: 'Home', to: '/' },
    { label: 'Usuários', to: '/users' },
    { label: 'Detalhe' }
  ]"
/>

Sem Links

Quando os itens não possuem to, todos são renderizados como texto simples.

• Início chevron_right
• Configurações chevron_right
• Perfil

<MeBreadcrumbs
  :items="[
    { label: 'Início' },
    { label: 'Configurações' },
    { label: 'Perfil' }
  ]"
/>

Item Único

Com apenas um item, nenhum separador é exibido.

• Página Atual

<MeBreadcrumbs :items="[{ label: 'Página Atual' }]" />

Navegação Profunda

• Home chevron_right
• Licitações chevron_right
• Pregão chevron_right
• 2024 chevron_right
• Processo nº 001/2024

<MeBreadcrumbs
  :items="[
    { label: 'Home', to: '/' },
    { label: 'Licitações', to: '/licitacoes' },
    { label: 'Pregão', to: '/licitacoes/pregao' },
    { label: '2024', to: '/licitacoes/pregao/2024' },
    { label: 'Processo nº 001/2024' }
  ]"
/>

Comportamento do Último Item

O último item sempre é renderizado como <span> com a classe me-breadcrumbs__current, mesmo que possua a propriedade to.

• Home chevron_right
• Página Final

<!-- O 'to' do último item é ignorado -->
<MeBreadcrumbs
  :items="[
    { label: 'Home', to: '/' },
    { label: 'Página Final', to: '/vai-ser-ignorado' }
  ]"
/>

Dica

Use to apenas nos itens que devem ser navegáveis. O último item (página atual) nunca precisa de to.

API

Props

Prop	Tipo	Padrão	Descrição
items	BreadcrumbItem[]	[]	Lista de itens do breadcrumb.

BreadcrumbItem

Campo	Tipo	Obrigatório	Descrição
label	string	Sim	Texto exibido no item.
to	string	Não	URL do link. Ignorado no último item.

Acessibilidade

• Elemento raiz é <nav aria-label="Breadcrumb"> para identificação por leitores de tela
• Itens com link usam <a> nativo para navegação por teclado
• Separadores (chevron_right) são elementos visuais, não interferem na leitura

Dica

Para aplicações com roteador (Vue Router / Nuxt), adapte o href para usar <router-link> ou a diretiva adequada ao seu roteador.