Componentes de Navegação no Bootstrap 4

A navegação no Bootstrap é geralmente implementada usando elementos ul e li, pois alguns recursos como abas dinâmicas exigem essa estrutura.

Estilo Básico de Navegação

<ul class="nav">
  <li class="nav-item"><a href="#" class="nav-link">Item de Navegação 1</a></li>
  <li class="nav-item"><a href="#" class="nav-link">Item de Navegação 2</a></li>
</ul>

Classes e Atributos Disponíveis

Para elementos ul:

• .nav - Classe base para navegação
• .nav-tabs - Abas tradicionais
• .nav-pills - Navegação em formato de pílulas
• .nav-justified - Itens com largura igual
• .flex-column - Navegação vertical
• .justify-content-start / .justify-content-center / .justify-content-end - Alinhamento dos itens

Para elementos li:

• .nav-item - Define um item de navegação
• .dropdown - Indica um menu suspenso

Para elementos a:

• .nav-link - Define um link de navegação
• .active - Indica o item ativo
• .disabled - Desabilita um link
• data-toggle="tab" ou data-toggle="pill" - Habilita abas dinâmicas
• href="#id" - Referencia o conteúdo da aba

Para conteúdo dinâmico:

• .tab-pane - Container para conteúdo de abas
• .fade - Efeito de transição suave

Exemplo de Abas Dinâmicas com Menu Suspenso

<div class="container">
  <h3>Sistema de Abas Dinâmicas</h3>
  <ul class="nav nav-tabs" role="tablist">
    <li class="nav-item"><a href="#sec1" class="nav-link active" data-toggle="tab">Seção 1</a></li>
    <li class="nav-item dropdown">
      <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Menu Suspenso</a>
      <div class="dropdown-menu">
        <a href="#" class="dropdown-item">Opção A</a>
        <a href="#" class="dropdown-item">Opção B</a>
      </div>
    </li>
    <li class="nav-item"><a href="#sec2" class="nav-link" data-toggle="tab">Seção 2</a></li>
    <li class="nav-item"><a href="#sec3" class="nav-link" data-toggle="tab">Seção 3</a></li>
    <li class="nav-item"><a href="#" class="nav-link disabled">Desabilitado</a></li>
  </ul>
  
  <div class="tab-content">
    <div id="sec1" class="tab-pane active">
      Conteúdo da Seção 1
    </div>
    <div id="sec2" class="tab-pane fade">
      Conteúdo da Seção 2
    </div>
    <div id="sec3" class="tab-pane fade">
      Conteúdo da Seção 3
    </div>
  </div>
</div>

Observações Importantes

• O conteúdo das abas deve estar dentro de um container com a classe tab-content, que é obrigatória para o correto funcionamento.
• Cada aba de conteúdo deve ter a classe .tab-pane.
• A aba ativa deve incluir a classe .active.
• Para animações suaves, adicione a classe .fade nas abas não ativas.