Menu à onglet Bootstrap - Tutoriel Boostrap

Menus à onglet

Pour obtenir différents styles de menu à onglet avec Boostrap, nous utiliserons la classe ".nav" (indispensable dans la conception d'un menu) et les classes ".nav-tabs", ".nav-pills", ".nav-stacked" et ".nav-justified" qui elles permettront de peronnaliser le design du menu.

Pour utiliser pleinement les fonctionnalités des menus à onglet, il faudra utiliser le plugin JavaScript tabs et ajouter des balises "role" et les attributs "aria" dans votre code HTML.

En savoir +

Menu à onglet classique (tab)

<ul class="nav nav-tabs">

 <li role="presentation" class="active"><a href="#">Programme de formation</a></li>

 <li role="presentation"><a href="#">Public</a></li>

 <li role="presentation"><a href="#">Objectifs</a></li>

</ul>

Exemple

Menu à onglet arrondi (pills)

<ul class="nav nav-pills">

  ...

</ul>

Exemple

Ce menu peut passer à la verticale

Pour cela, il faudra utiliser la classe ".nav-stacked".

<ul class="nav nav-pills nav-stacked">

  ...

</ul>

Exemple

Menu à onglet justifié

Vous pouvez obtenir des onglets de même taille et justifié avec la classe ".nav-justify".

Un bug sur le rendu se produit sur Safari quand on redimensionne horizontalement le navigateur. Celui ci se corrige lorsque l'on rafraichit.
Voir le bug.


  <ul class="nav nav-tabs nav-justified">

    ...

  </ul>

Exemple

Lien désactivé

Pour désactiver un lien, il suffit d'utiliser la classe ".disabled".

<ul class="nav nav-tabs">

 <li role="presentation" class="active"><a href="#">Programme de formation</a></li>

 <li role="presentation"><a href="#">Public</a></li>

 <li role="presentation" class="disabled"><a href="#">Objectifs</a></li>

</ul>

Exemple

Menu à onglet avec menu déroulant

Pour ajouter un menu déroulant, il faudra le plugin JavaScript dropdowns et adapter un peu de code HTML

Il peut être utilisé avec nav-tabs ou nav-pills

<ul class="nav nav-tabs">

    <li role="presentation" class="active"><a href="#">Programme de formation</a></li>

    <li role="presentation" class="dropdown">

    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"> 
Public <span class="caret"></span>

    </a>

    <ul class="dropdown-menu">

      <li><a href="#" title="Pour qui ?">Pour qui ?</a></li>

      <li><a href="#" title="Comment financer ?">Comment financer ?</a></li>

    </ul>

  </li>

  <li role="presentation"><a href="#">Objectifs</a></li>

</ul>

Exemple

Menu à onglet avec le détail de chaque onglet

<ul class="nav nav-pills">

  <li class="active"><a href="#tab1" data-toggle="tab">Programme</a></li>

  <li><a href="#tab2" data-toggle="tab">Public</a></li>

  <li><a href="#tab3" data-toggle="tab">Objectifs</a></li>

  <li><a href="#tab4" data-toggle="tab">En complément</a></li>

</ul>

<div class="tab-content">

  <div class="tab-pane active" id="tab1">Vous pouvez consulter le détail du programme</div>

  <div class="tab-pane" id="tab2">Vous pouvez consulter le détail sur le public</div>

  <div class="tab-pane" id="tab3">Vous pouvez consulter le détail des objectifs pédagogiques</div>

  <div class="tab-pane" id="tab4">Vous pouvez consulter le détail des compléments</div>

</div>

Exemple

Vous pouvez consulter le détail du programme

Vous pouvez consulter le détail sur le public

Vous pouvez consulter le détail des objectifs pédagogiques

Vous pouvez consulter le détail des compléments

Tutoriel Bootstrap

Menus à onglet

Menu à onglet classique (tab)

Menu à onglet arrondi (pills)

Ce menu peut passer à la verticale

Menu à onglet justifié

Lien désactivé

Menu à onglet avec menu déroulant

Menu à onglet avec le détail de chaque onglet