Introdução
O breadcrumb é um componente do BootstrapVue utilizado para indicar um “caminho” de páginas para o usuário.
Imagine em um sistema que tem muitas páginas, o usuário vai navegando para realizar as ações, porém após muitos cliques, pode ser que ele não saiba em qual página está.
Neste caso, é uma boa prática, fazer uma indicação para o usuário em todas as páginas, informando pelo menos qual a página atual.
Com este componente, além da página atual, é possível criar todo o caminho que ele percorreu no sistema, facilitando a navegação do usuário.
Sobre o componente
O componente não tem muitas configurações para se fazer, pois ele já tem o estilo próprio de como irá mostrar as páginas do sistema.
Sua principal configuração é a prop items, que contém as páginas de navegação que serão exibidas.
A prop items é um array de objetos, e em cada posição do objeto pode ter o nome da página que será mostrada, o link para a página, se é a página atual ou não, e caso esteja trabalhando com o vue-router, o link pode ser o name de uma rota.
Veja um exemplo do componente:
<template>
<b-breadcrumb :items="items"></b-breadcrumb>
</template>
<script>
export default {
data() {
return {
items: [
{
text: 'Admin',
href: '#'
},
{
text: 'Gerenciar',
href: '#'
},
{
text: 'Livros',
active: true
}
]
}
}
}
</script>
E o resultado é esse:
Na última página, ele sempre ficará com uma cor cinza mais clara, indicando que é o link da página atual, que nesse caso é a página “Livros”.
Utilizando com o Vue Router
No primeiro exemplo, os links foram colocados com o href, mas caso esteja utilizando o Vue Router, convém colocar o name das rotas, pois facilita muito a navegação e a escrita do código.
No objeto de cada item, no lugar de href, é possível passar o to, e pode passar somente o name em formato de string, ou então o { name: "nome_da_rota" }, em formato de objeto, veja:
items: [
{
text: "Componente 1",
to: "componente1",
},
{
text: "Componente 2",
to: { name: "componente2" },
},
],
Essas duas configurações irão funcionar normalmente.
Utilizando com HTML
Caso queira, em vez de utilizar com a prop items, você pode configurar as rotas no HTML diretamente.
Nesse caso, é possível fazer passando dentro do breadcrumb, os itens no formato de tag mesmo, dessa forma:
<template>
<b-breadcrumb>
<b-breadcrumb-item href="#home">
<b-icon icon="house-fill" scale="1.25" shift-v="1.25" aria-hidden="true"></b-icon>
Home
</b-breadcrumb-item>
<b-breadcrumb-item href="#Pagina">Pagina</b-breadcrumb-item>
<b-breadcrumb-item href="#Livro">Livro</b-breadcrumb-item>
<b-breadcrumb-item active>Novo</b-breadcrumb-item>
</b-breadcrumb>
</template>
Nesse caso, para cada página foi informado um item, no item tem o href, mas também poderia ser usado a prop to.
Para a página home, antes dela foi colocado um ícone de uma casa, é uma outra possível configuração utilizando o HTML.
Vídeo
Código fonte
O código fonte dos exemplos estão no meu CodeSandbox
Para ver outros canais onde o posto conteúdo e meu Github, veja os Links do Programando Soluções.