Navegadores e abas

Documentação e exemplos de como usar os componentes de navegação incluídos no Bootstrap.

Nesta página

Navegação básica

A navegação disponível no Bootstrap compartilha marcações e estilos gerais, desde a .navclasse base até os estados ativo e desabilitado. Troque as classes modificadoras para alternar entre cada estilo.

O .navcomponente base é construído com flexbox e fornece uma base sólida para construir todos os tipos de componentes de navegação. Ele inclui algumas substituições de estilo (para trabalhar com listas), algum preenchimento de link para áreas de ocorrência maiores e estilo básico desabilitado.

O .navcomponente base não inclui nenhum .activeestado. Os exemplos a seguir incluem a classe, principalmente para demonstrar que essa classe em particular não aciona nenhum estilo especial.

Para transmitir o estado ativo para tecnologias assistivas, use o aria-currentatributo — usando o pagevalor da página atual ou truedo item atual em um conjunto.

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

As classes são usadas por toda parte, então sua marcação pode ser super flexível. Use <ul>s como acima, <ol>se a ordem de seus itens for importante, ou role seu próprio com um <nav>elemento. Como .navusa display: flex, os links de navegação se comportam da mesma forma que os itens de navegação, mas sem a marcação extra.

<nav class="nav">
  <a class="nav-link active" aria-current="page" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

Estilos disponíveis

Altere o estilo do .navcomponente s com modificadores e utilitários. Misture e combine conforme necessário, ou construa o seu próprio.

Alinhamento horizontal

Altere o alinhamento horizontal de sua navegação com utilitários flexbox . Por padrão, os navs são alinhados à esquerda, mas você pode alterá-los facilmente para o centro ou alinhamento à direita.

Centralizado com .justify-content-center:

<ul class="nav justify-content-center">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Alinhado à direita com .justify-content-end:

<ul class="nav justify-content-end">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Vertical

Empilhe sua navegação alterando a direção do item flexível com o .flex-columnutilitário. Precisa empilhá-los em algumas viewports, mas não em outras? Use as versões responsivas (por exemplo, .flex-sm-column).

<ul class="nav flex-column">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Como sempre, a navegação vertical <ul>também é possível sem s.

<nav class="nav flex-column">
  <a class="nav-link active" aria-current="page" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

Abas

Pega a navegação básica de cima e adiciona a .nav-tabsclasse para gerar uma interface com guias. Use-os para criar regiões tabable com nosso plug-in JavaScript de guia .

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Comprimidos

Pegue o mesmo HTML, mas use .nav-pills:

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Preencha e justifique

Force o .navconteúdo do seu 's para estender a largura total disponível de uma das duas classes modificadoras. Para preencher proporcionalmente todo o espaço disponível com seus .nav-items, use .nav-fill. Observe que todo o espaço horizontal está ocupado, mas nem todos os itens de navegação têm a mesma largura.

<ul class="nav nav-pills nav-fill">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Much longer nav link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Ao usar uma <nav>navegação baseada, você pode omitir com segurança .nav-item, pois .nav-linké necessário apenas para <a>elementos de estilo.

<nav class="nav nav-pills nav-fill">
  <a class="nav-link active" aria-current="page" href="#">Active</a>
  <a class="nav-link" href="#">Much longer nav link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

Para elementos de largura igual, use .nav-justified. Todo o espaço horizontal será ocupado por links de navegação, mas ao contrário do .nav-fillacima, todos os itens de navegação terão a mesma largura.

<ul class="nav nav-pills nav-justified">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Much longer nav link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Semelhante ao .nav-fillexemplo usando uma <nav>navegação baseada.

<nav class="nav nav-pills nav-justified">
  <a class="nav-link active" aria-current="page" href="#">Active</a>
  <a class="nav-link" href="#">Much longer nav link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

Trabalhando com utilitários flexíveis

Se você precisar de variações de navegação responsivas, considere usar uma série de utilitários flexbox . Embora mais detalhados, esses utilitários oferecem maior personalização em pontos de interrupção responsivos. No exemplo abaixo, nosso nav será empilhado no ponto de interrupção mais baixo e, em seguida, se adaptará a um layout horizontal que preencha a largura disponível a partir do ponto de interrupção pequeno.

<nav class="nav nav-pills flex-column flex-sm-row">
  <a class="flex-sm-fill text-sm-center nav-link active" aria-current="page" href="#">Active</a>
  <a class="flex-sm-fill text-sm-center nav-link" href="#">Longer nav link</a>
  <a class="flex-sm-fill text-sm-center nav-link" href="#">Link</a>
  <a class="flex-sm-fill text-sm-center nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

Em relação à acessibilidade

Se você estiver usando navs para fornecer uma barra de navegação, certifique-se de adicionar um role="navigation"ao contêiner pai mais lógico do <ul>, ou envolver um <nav>elemento em toda a navegação. Não adicione a função à <ul>própria, pois isso impediria que ela fosse anunciada como uma lista real por tecnologias assistivas.

Observe que as barras de navegação, mesmo se visualmente estilizadas como guias com a .nav-tabsclasse, não devem receber atributos ou . Eles são apropriados apenas para interfaces dinâmicas com guias, conforme descrito nas Práticas de autoria WAI ARIA . Consulte o comportamento do JavaScript para interfaces com guias dinâmicas nesta seção para obter um exemplo. O atributo não é necessário em interfaces com guias dinâmicas, pois nosso JavaScript manipula o estado selecionado adicionando na guia ativa.role="tablist"role="tab"role="tabpanel" aria-currentaria-selected="true"

Usando listas suspensas

Adicione menus suspensos com um pouco de HTML extra e o plug-in JavaScript suspenso .

Abas com menus suspensos

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Comprimidos com dropdowns

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Sass

Variáveis

$nav-link-padding-y:                .5rem;
$nav-link-padding-x:                1rem;
$nav-link-font-size:                null;
$nav-link-font-weight:              null;
$nav-link-color:                    $link-color;
$nav-link-hover-color:              $link-hover-color;
$nav-link-transition:               color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
$nav-link-disabled-color:           $gray-600;

$nav-tabs-border-color:             $gray-300;
$nav-tabs-border-width:             $border-width;
$nav-tabs-border-radius:            $border-radius;
$nav-tabs-link-hover-border-color:  $gray-200 $gray-200 $nav-tabs-border-color;
$nav-tabs-link-active-color:        $gray-700;
$nav-tabs-link-active-bg:           $body-bg;
$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg;

$nav-pills-border-radius:           $border-radius;
$nav-pills-link-active-color:       $component-active-color;
$nav-pills-link-active-bg:          $component-active-bg;

Comportamento JavaScript

Use o plug-in JavaScript da guia - inclua-o individualmente ou por meio do bootstrap.jsarquivo compilado - para estender nossas guias e pílulas de navegação para criar painéis com guias de conteúdo local.

As interfaces dinâmicas com guias, conforme descrito nas Práticas de autoria WAI ARIA , exigem role="tablist", role="tab", role="tabpanel"e aria-atributos adicionais para transmitir sua estrutura, funcionalidade e estado atual aos usuários de tecnologias assistivas (como leitores de tela). Como prática recomendada, recomendamos o uso <button>de elementos para as guias, pois são controles que acionam uma alteração dinâmica, em vez de links que navegam para uma nova página ou local.

Observe que as interfaces dinâmicas com guias não devem conter menus suspensos, pois isso causa problemas de usabilidade e acessibilidade. De uma perspectiva de usabilidade, o fato de que o elemento de gatilho da guia exibida no momento não é imediatamente visível (como está dentro do menu suspenso fechado) pode causar confusão. Do ponto de vista da acessibilidade, atualmente não há uma maneira sensata de mapear esse tipo de construção para um padrão WAI ARIA, o que significa que não pode ser facilmente compreendido por usuários de tecnologias assistivas.

Este é um conteúdo de espaço reservado ao conteúdo associado da guia Início. Clicar em outra guia alternará a visibilidade desta para a próxima. A guia JavaScript troca classes para controlar a visibilidade e o estilo do conteúdo. Você pode usá-lo com guias, pílulas e qualquer outra .navnavegação alimentada.

This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

This is some placeholder content the Contact tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>

Para ajudar a atender às suas necessidades, isso funciona com <ul>marcação baseada, conforme mostrado acima, ou com qualquer marcação arbitrária do tipo “role sua própria”. Observe que, se você estiver usando <nav>, não deverá adicionar role="tablist"diretamente a ele, pois isso substituiria a função nativa do elemento como um ponto de referência de navegação. Em vez disso, mude para um elemento alternativo (no exemplo abaixo, um simples <div>) e envolva <nav>-o.

<nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Home</button>
    <button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</button>
    <button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</button>
  </div>
</nav>
<div class="tab-content" id="nav-tabContent">
  <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">...</div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div>
  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div>
</div>

O plugin de abas também funciona com pílulas.

<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
  </li>
</ul>
<div class="tab-content" id="pills-tabContent">
  <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">...</div>
  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">...</div>
  <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">...</div>
</div>

E com pílulas verticais.

This is some placeholder content the Messages tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

This is some placeholder content the Settings tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

<div class="d-flex align-items-start">
  <div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
    <button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</button>
    <button class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</button>
    <button class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill" data-bs-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</button>
    <button class="nav-link" id="v-pills-settings-tab" data-bs-toggle="pill" data-bs-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</button>
  </div>
  <div class="tab-content" id="v-pills-tabContent">
    <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">...</div>
    <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">...</div>
    <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">...</div>
    <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">...</div>
  </div>
</div>

Usando atributos de dados

Você pode ativar uma navegação por guias ou pílulas sem escrever nenhum JavaScript simplesmente especificando data-bs-toggle="tab"ou data-bs-toggle="pill"em um elemento. Use esses atributos de dados em .nav-tabsou .nav-pills.

<!-- Nav tabs -->
<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="messages-tab" data-bs-toggle="tab" data-bs-target="#messages" type="button" role="tab" aria-controls="messages" aria-selected="false">Messages</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Settings</button>
  </li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
  <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>

Por JavaScript

Habilite as guias com guias via JavaScript (cada guia precisa ser ativada individualmente):

var triggerTabList = [].slice.call(document.querySelectorAll('#myTab a'))
triggerTabList.forEach(function (triggerEl) {
  var tabTrigger = new bootstrap.Tab(triggerEl)

  triggerEl.addEventListener('click', function (event) {
    event.preventDefault()
    tabTrigger.show()
  })
})

Você pode ativar guias individuais de várias maneiras:

var triggerEl = document.querySelector('#myTab a[href="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name

var triggerFirstTabEl = document.querySelector('#myTab li:first-child a')
bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first tab

Efeito de desvanecimento

Para fazer as guias aparecerem gradualmente, adicione .fadea cada .tab-pane. O primeiro painel de guias também deve .showtornar visível o conteúdo inicial.

<div class="tab-content">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
  <div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>

Métodos

Métodos e transições assíncronas

Todos os métodos de API são assíncronos e iniciam uma transição . Eles retornam ao chamador assim que a transição é iniciada, mas antes que ela termine . Além disso, uma chamada de método em um componente de transição será ignorada .

Consulte nossa documentação JavaScript para obter mais informações .

constructor

Ativa um elemento de guia e um contêiner de conteúdo. A guia deve ter um data-bs-targetou, se estiver usando um link, um hrefatributo, visando um nó de contêiner no DOM.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="messages-tab" data-bs-toggle="tab" data-bs-target="#messages" type="button" role="tab" aria-controls="messages" aria-selected="false">Messages</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Settings</button>
  </li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
  <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>

<script>
  var firstTabEl = document.querySelector('#myTab li:last-child a')
  var firstTab = new bootstrap.Tab(firstTabEl)

  firstTab.show()
</script>

mostrar

Seleciona a guia fornecida e mostra seu painel associado. Qualquer outra guia selecionada anteriormente torna-se desmarcada e seu painel associado fica oculto. Retorna ao chamador antes que o painel de guias tenha sido realmente mostrado (ou seja, antes que o shown.bs.tabevento ocorra).

  var someTabTriggerEl = document.querySelector('#someTabTrigger')
  var tab = new bootstrap.Tab(someTabTriggerEl)

  tab.show()

dispor

Destrói a aba de um elemento.

getInstance

Método estático que permite obter a instância da guia associada a um elemento DOM

var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance

getOrCreateInstance

Método estático que permite obter a instância da guia associada a um elemento DOM ou criar uma nova caso não tenha sido inicializada

var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getOrCreateInstance(triggerEl) // Returns a Bootstrap tab instance

Eventos

Ao mostrar uma nova guia, os eventos são acionados na seguinte ordem:

hide.bs.tab(na guia ativa atual)
show.bs.tab(na guia a ser exibida)
hidden.bs.tab(na aba ativa anterior, a mesma do hide.bs.tabevento)
shown.bs.tab(na guia recém-ativada recém-exibida, a mesma do show.bs.tabevento)

Se nenhuma guia já estiver ativa, os eventos hide.bs.tabe hidden.bs.tabnão serão acionados.

Tipo de evento	Descrição
`show.bs.tab`	Este evento é acionado na exibição de guias, mas antes que a nova guia seja exibida. Use `event.target`e `event.relatedTarget`para direcionar a guia ativa e a guia ativa anterior (se disponível), respectivamente.
`shown.bs.tab`	Este evento é acionado na exibição de guias após a exibição de uma guia. Use `event.target`e `event.relatedTarget`para direcionar a guia ativa e a guia ativa anterior (se disponível), respectivamente.
`hide.bs.tab`	Este evento é acionado quando uma nova guia deve ser mostrada (e, portanto, a guia ativa anterior deve ser ocultada). Use `event.target`e `event.relatedTarget`para segmentar a guia ativa atual e a nova guia em breve ativa, respectivamente.
`hidden.bs.tab`	Este evento é acionado depois que uma nova guia é mostrada (e, portanto, a guia ativa anterior fica oculta). Use `event.target`e `event.relatedTarget`para segmentar a guia ativa anterior e a nova guia ativa, respectivamente.

var tabEl = document.querySelector('button[data-bs-toggle="tab"]')
tabEl.addEventListener('shown.bs.tab', function (event) {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})