breadcrumb

Como utilizar o breadcrumb do BootstrapVue

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.

Este conteúdo te ajudou de alguma forma?