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.

html

<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">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.

html

<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">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:

html

<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">Disabled</a>
  </li>
</ul>

Alinhado à direita com .justify-content-end:

html

<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">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).

html

<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">Disabled</a>
  </li>
</ul>

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

html

<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">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 .

html

<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">Disabled</a>
  </li>
</ul>

Comprimidos

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

html

<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">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.

html

<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">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.

html

<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">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.

html

<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">Disabled</a>
  </li>
</ul>

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

html

<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">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.

html

<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">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 . Elas são apropriadas apenas para interfaces dinâmicas com guias, conforme descrito no padrão de guias do ARIA Authoring Practices Guide . 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

html

<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">Disabled</a>
  </li>
</ul>

Comprimidos com dropdowns

html

<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">Disabled</a>
  </li>
</ul>

CSS

Variáveis

Adicionado na v5.2.0

Como parte da abordagem de variáveis CSS em evolução do Bootstrap, os navs agora usam variáveis CSS locais em .nav, .nav-tabse .nav-pillspara personalização aprimorada em tempo real. Os valores das variáveis CSS são definidos por meio do Sass, portanto, a personalização do Sass também é suportada.

Na .navclasse base:

  --#{$prefix}nav-link-padding-x: #{$nav-link-padding-x};
  --#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
  @include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
  --#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
  --#{$prefix}nav-link-color: #{$nav-link-color};
  --#{$prefix}nav-link-hover-color: #{$nav-link-hover-color};
  --#{$prefix}nav-link-disabled-color: #{$nav-link-disabled-color};

Na .nav-tabsclasse modificadora:

  --#{$prefix}nav-tabs-border-width: #{$nav-tabs-border-width};
  --#{$prefix}nav-tabs-border-color: #{$nav-tabs-border-color};
  --#{$prefix}nav-tabs-border-radius: #{$nav-tabs-border-radius};
  --#{$prefix}nav-tabs-link-hover-border-color: #{$nav-tabs-link-hover-border-color};
  --#{$prefix}nav-tabs-link-active-color: #{$nav-tabs-link-active-color};
  --#{$prefix}nav-tabs-link-active-bg: #{$nav-tabs-link-active-bg};
  --#{$prefix}nav-tabs-link-active-border-color: #{$nav-tabs-link-active-border-color};

Na .nav-pillsclasse modificadora:

  --#{$prefix}nav-pills-border-radius: #{$nav-pills-border-radius};
  --#{$prefix}nav-pills-link-active-color: #{$nav-pills-link-active-color};
  --#{$prefix}nav-pills-link-active-bg: #{$nav-pills-link-active-bg};

Variáveis atrevidas

$nav-link-padding-y:                .5rem;
$nav-link-padding-x:                1rem;
$nav-link-font-size:                null;
$nav-link-font-weight:              null;
$nav-link-color:                    var(--#{$prefix}link-color);
$nav-link-hover-color:              var(--#{$prefix}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.

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.

This is some placeholder content the Disabled tab's associated content.

<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-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" 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-tab-pane" type="button" role="tab" aria-controls="profile-tab-pane" 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-tab-pane" type="button" role="tab" aria-controls="contact-tab-pane" aria-selected="false">Contact</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="disabled-tab" data-bs-toggle="tab" data-bs-target="#disabled-tab-pane" type="button" role="tab" aria-controls="disabled-tab-pane" aria-selected="false" disabled>Disabled</button>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="contact-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="disabled-tab-pane" role="tabpanel" aria-labelledby="disabled-tab" tabindex="0">...</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.

This is some placeholder content the Disabled tab's associated content.

<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>
    <button class="nav-link" id="nav-disabled-tab" data-bs-toggle="tab" data-bs-target="#nav-disabled" type="button" role="tab" aria-controls="nav-disabled" aria-selected="false" disabled>Disabled</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" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-disabled" role="tabpanel" aria-labelledby="nav-disabled-tab" tabindex="0">...</div>
</div>

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

This is some placeholder content the Disabled tab's associated content.

<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>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-disabled-tab" data-bs-toggle="pill" data-bs-target="#pills-disabled" type="button" role="tab" aria-controls="pills-disabled" aria-selected="false" disabled>Disabled</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" tabindex="0">...</div>
  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="pills-disabled" role="tabpanel" aria-labelledby="pills-disabled-tab" tabindex="0">...</div>
</div>

E com pílulas verticais. Idealmente, para guias verticais, você também deve adicionar aria-orientation="vertical"ao contêiner da lista de guias.

This is some placeholder content the Disabled tab's associated content.

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-disabled-tab" data-bs-toggle="pill" data-bs-target="#v-pills-disabled" type="button" role="tab" aria-controls="v-pills-disabled" aria-selected="false" disabled>Disabled</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" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-disabled" role="tabpanel" aria-labelledby="v-pills-disabled-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab" tabindex="0">...</div>
  </div>
</div>

Acessibilidade

As interfaces com guias dinâmicas, conforme descrito no padrão de guias ARIA Authoring Practices Guide , 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.

De acordo com o padrão ARIA Authoring Practices, apenas a guia ativa no momento recebe o foco do teclado. Quando o plug-in JavaScript for inicializado, ele será definido tabindex="-1"em todos os controles de guia inativos. Uma vez que a aba atualmente ativa tem foco, as teclas do cursor ativam a aba anterior/seguinte, com o plugin alterando o rovingtabindex de acordo. No entanto, observe que o plug-in JavaScript não distingue entre listas de guias horizontais e verticais quando se trata de interações de teclas de cursor: independentemente da orientação da lista de guias, tanto o cursor para cima quanto para a esquerda vão para a guia anterior e o cursor para baixo e para a direita vão para a próxima aba.

Em geral, para facilitar a navegação pelo teclado, é recomendável tornar os próprios painéis de guias também focáveis, a menos que o primeiro elemento contendo conteúdo significativo dentro do painel de guias já seja focalizável. O plug-in JavaScript não tenta lidar com esse aspecto - quando apropriado, você precisará explicitamente tornar seus painéis de guias focáveis adicionando tabindex="0"sua marcação.

O plug-in JavaScript da guia não oferece suporte a interfaces com guias que contêm menus suspensos, pois causam 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.

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" tabindex="0">...</div>
  <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
  <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab" tabindex="0">...</div>
  <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab" tabindex="0">...</div>
</div>

Por JavaScript

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

const triggerTabList = document.querySelectorAll('#myTab button')
triggerTabList.forEach(triggerEl => {
  const tabTrigger = new bootstrap.Tab(triggerEl)

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

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

const triggerEl = document.querySelector('#myTab button[data-bs-target="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name

const triggerFirstTabEl = document.querySelector('#myTab li:first-child button')
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" tabindex="0">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="messages-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="settings-tab" tabindex="0">...</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 .

Ativa seu conteúdo como um elemento de guia.

Você pode criar uma instância de tab com o construtor, por exemplo:

const bsTab = new bootstrap.Tab('#myTab')

Método	Descrição
`dispose`	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, você pode usá-lo assim: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	Método estático que retorna uma instância de tab associada a um elemento DOM ou cria uma nova caso não tenha sido inicializada. Você pode usar assim: `bootstrap.Tab.getOrCreateInstance(element)`.
`show`	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.tab`evento ocorra).

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
`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.
`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.

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

Navegadores e abas

Navegação básica

Estilos disponíveis

Alinhamento horizontal

Vertical

Abas

Comprimidos

Preencha e justifique

Trabalhando com utilitários flexíveis

Em relação à acessibilidade

Usando listas suspensas

Abas com menus suspensos

Comprimidos com dropdowns

CSS

Variáveis

Variáveis ​​atrevidas

Comportamento JavaScript

Acessibilidade

Usando atributos de dados

Por JavaScript

Efeito de desvanecimento

Métodos

Métodos e transições assíncronas

Eventos

Variáveis atrevidas