Breadcrumbs

Este componente é utilizado para demonstrar uma estrutura de navegação que representa o caminho percorrido no sistema para o acesso à funcionalidade que está sendo exibida no momento.

Como utilizar

Caminhos não navegáveis não são clicáveis; já em páginas navegáveis, utiliza-se o link para acesso rápido ao conteúdo. A página atual nunca será clicável, é apenas informativa.

Exemplo

Vanilla

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Grupo</a></li>
    <li class="breadcrumb-item"><a href="#">Subgrupo</a></li>
    <li class="breadcrumb-item active" aria-current="page">Item</li>
  </ol>
</nav>

React

<Breadcrumb>
  <Breadcrumb.Item href="#">Grupo</Breadcrumb.Item>
  <Breadcrumb.Item href="#">Subgrupo</Breadcrumb.Item>
  <Breadcrumb.Item active>Item</Breadcrumb.Item>
</Breadcrumb>

Vue

<b-breadcrumb :items="items"></b-breadcrumb>

<script>
  export default {
    data() {
      return {
        items: [
          {
            text: 'Grupo',
            href: '#'
          },
          {
            text: 'Subgrupo',
            href: '#'
          },
          {
            text: 'Item',
            active: true
          }
        ]
      }
    }
  }
</script>

O uso da estrutura acima requer a instalação das bibliotecas descritas em Tema para Bootstrap 4.