Bootstrap - Navs et Onglets

Introduction

Bonjour, aspirants développeurs web ! Aujourd'hui, nous allons plonger dans l'un des composants les plus couramment utilisés dans la conception web : les menus de navigation et les onglets. Ces éléments sont comme les panneaux de signalisation de votre site web, guidant les utilisateurs vers différentes sections et contenus. Avec les composants nav et onglet de Bootstrap, nous pouvons créer des systèmes de navigation élégants et réactifs qui fonctionnent sur tous les appareils. Alors, mettons nos manches à la pâte et commencer à coder !

Bootstrap - Navs & tabs

Navigation de base

Commençons par les bases. Bootstrap offre une manière simple de créer des menus de navigation en utilisant la classe .nav. Voici un exemple de base :

<ul class="nav">
<li class="nav-item">
<a class="nav-link active" href="#">Accueil</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">À propos</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Contact</a>
</li>
</ul>

Ce code crée une liste horizontale de liens de navigation. La classe active met en évidence la page actuelle, tandis que la classe disabled grise les liens qui ne sont pas actuellement cliquables.

Styles disponibles

Bootstrap offre divers styles pour vos navs. Jetons un œil à deux des plus populaires :

Onglets de navigation

<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Accueil</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Profil</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Messages</a>
</li>
</ul>

Cela crée un menu de navigation à onglets, parfait pour organiser le contenu en différentes sections.

Pilules de navigation

<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Accueil</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Profil</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Messages</a>
</li>
</ul>

Le style pilules donne un aspect plus bouton-like à vos liens de navigation.

Alignement horizontal

Vous pouvez facilement changer l'alignement de vos éléments de navigation. Voici comment :

<ul class="nav justify-content-center">
<!-- Éléments de navigation ici -->
</ul>

<ul class="nav justify-content-end">
<!-- Éléments de navigation ici -->
</ul>

La classe justify-content-center centre les éléments de navigation, tandis que justify-content-end les aligne à droite.

Travail avec les utilitaires flex

Les utilitaires flex de Bootstrap vous offrent encore plus de contrôle sur votre mise en page de navigation :

<nav class="nav flex-column">
<a class="nav-link active" href="#">Actif</a>
<a class="nav-link" href="#">Lien</a>
<a class="nav-link" href="#">Lien</a>
<a class="nav-link disabled" href="#">Désactivé</a>
</nav>

Cela crée un menu de navigation vertical en utilisant la classe flex-column.

Accessibilité

Lors de la création de menus de navigation, il est crucial de prendre en compte l'accessibilité. Utilisez des éléments <nav> là où il est approprié, et ajoutez aria-current="page" à l'élément actif :

<nav class="nav">
<a class="nav-link active" aria-current="page" href="#">Actif</a>
<!-- Autres éléments de navigation -->
</nav>

Utilisation des menus déroulants

Les menus de navigation peuvent inclure des menus déroulants pour des structures de navigation plus complexes :

<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Actif</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Menu déroulant</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Autre action</a></li>
<li><a class="dropdown-item" href="#">Autre chose ici</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Lien séparé</a></li>
</ul>
</li>
<!-- Autres éléments de navigation -->
</ul>

Ce code crée un menu de navigation avec un menu déroulant. L'attribut data-bs-toggle="dropdown" active la fonctionnalité de menu déroulant.

Onglets avec menus déroulants

Vous pouvez également inclure des menus déroulants dans des navs de style onglet :

<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Actif</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Menu déroulant</a>
<ul class="dropdown-menu">
<!-- Éléments du menu déroulant -->
</ul>
</li>
<!-- Autres éléments de navigation -->
</ul>

Pilules avec menus déroulants

Le même principe s'applique aux navs de style pilule :

<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Actif</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Menu déroulant</a>
<ul class="dropdown-menu">
<!-- Éléments du menu déroulant -->
</ul>
</li>
<!-- Autres éléments de navigation -->
</ul>

Comportement JavaScript

Les plugins JavaScript de Bootstrap peuvent ajouter un comportement dynamique à vos navs et onglets. Voici comment créer un ensemble d'onglets avec des panneaux de contenu :

<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">Accueil</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">Profil</button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">Contenu de l'accueil...</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">Contenu du profil...</div>
</div>

Ce code crée un ensemble d'onglets qui, lorsque vous cliquez dessus, affichent différents panneaux de contenu.

Accessibilité

Pour rendre vos onglets accessibles, utilisez les attributs role, aria-controls, aria-selected, et aria-labelledby comme indiqué dans l'exemple précédent.

Utilisation des attributs de données

Les attributs de données vous permettent de contrôler le comportement des onglets sans écrire de JavaScript :

<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">Accueil</button>
</li>
<!-- Autres boutons d'onglet -->
</ul>

Les attributs data-bs-toggle="tab" et data-bs-target="#home" activent la fonctionnalité des onglets sans JavaScript supplémentaire.

Via JavaScript

Vous pouvez également activer les onglets via JavaScript :

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

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

Ce code attache des écouteurs d'événement de clic à chaque bouton d'onglet, activant l'onglet correspondant lorsque vous cliquez dessus.

Effet de fondu

Pour ajouter un effet de fondu à vos onglets, utilisez la classe fade :

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

Cela crée un effet de transition en douceur lors du passage d'un onglet à un autre.

Et voilà ! Vous venez d'apprendre à créer et personnaliser des menus de navigation et des onglets en utilisant Bootstrap. souvenez-vous, la pratique rend parfait, donc essayez d'expérimenter avec ces composants dans vos propres projets. Bon codage !

Méthode	Description
`Tab.getInstance(element)`	Récupère l'instance de l'onglet associée à un élément DOM
`Tab.getOrCreateInstance(element)`	Retourne une instance d'onglet associée à un élément DOM ou en crée une nouvelle
`show()`	Sélectionne l'onglet donné et affiche son panneau associé
`dispose()`	Détruit l'onglet d'un élément

Credits: Image by storyset

Tutoriel précédent:

Bootstrap - Barres de navigation

Tutoriel suivant:

Bootstrap - Offcanvas