Barre de navigation Bootstrap 4
Barres de navigation
Une barre de navigation est un en-tête de navigation placé en haut de la page :
Barre de navigation de base
Avec Bootstrap, une barre de navigation peut s'étendre ou se réduire, selon la taille de l'écran.
Une barre de navigation standard est créée avec la .navbar
classe, suivie d'une classe de réduction réactive : .navbar-expand-xl|lg|md|sm
(empile la barre de navigation verticalement sur des écrans extra larges, grands, moyens ou petits).
Pour ajouter des liens dans la barre de navigation, utilisez un <ul>élément avec class="navbar-nav". Ajoutez ensuite des <li>éléments avec une .nav-itemclasse suivis d'un <a>élément avec une .nav-linkclasse :
Exemple
<!-- A grey horizontal navbar that becomes
vertical on small screens -->
<nav class="navbar navbar-expand-sm
bg-light">
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link
1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link
2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link
3</a>
</li>
</ul>
</nav>
Barre de navigation verticale
Supprimez la .navbar-expand-xl|lg|md|smclasse pour créer une barre de navigation verticale :
Exemple
<!-- A vertical navbar -->
<nav class="navbar bg-light">
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link
1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link
2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link
3</a>
</li>
</ul>
</nav>
Barre de navigation centrée
Ajoutez la .justify-content-centerclasse pour centrer la barre de navigation.
L'exemple suivant centrera la barre de navigation sur des écrans moyens, grands et très grands. Sur les petits écrans, il sera affiché verticalement et aligné à gauche (à cause de la classe .navbar-expand-sm) :
Exemple
<nav class="navbar navbar-expand-sm
bg-light justify-content-center">
...
</nav>
Barre de navigation colorée
Utilisez l'une des .bg-colorclasses pour modifier la couleur d'arrière-plan de la barre de navigation ( .bg-primary,
.bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-darket .bg-light)
Conseil : ajoutez une couleur de texte blanche à tous les liens de la barre de navigation avec la .navbar-darkclasse, ou utilisez la .navbar-lightclasse pour ajouter une
couleur de texte noire .
Exemple
<!-- Grey with black text -->
<nav class="navbar navbar-expand-sm bg-light navbar-light">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link"
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="#">Disabled</a>
</li>
</ul>
</nav>
<!-- Black with white text -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">...</nav>
<!-- Blue with white text -->
<nav class="navbar navbar-expand-sm
bg-primary navbar-dark">...</nav>
Etat actif/désactivé : Ajoutez la .activeclasse à un
<a>élément pour mettre en évidence le lien actuel, ou la .disabledclasse pour indiquer que le lien est non cliquable.
Logo de la marque
La .navbar-brandclasse est utilisée pour mettre en évidence la marque/le logo/le nom du projet de votre page :
Exemple
<nav class="navbar navbar-expand-sm
bg-dark navbar-dark">
<a
class="navbar-brand" href="#">Logo</a>
...
</nav>
Lors de l'utilisation de la .navbar-brandclasse sur des images, Bootstrap 4 stylise automatiquement l'image pour qu'elle s'adapte verticalement à la barre de navigation.
Exemple
<nav class="navbar navbar-expand-sm
bg-dark navbar-dark">
<a class="navbar-brand" href="#">
<img src="bird.jpg"
alt="Logo" style="width:40px;">
</a>
...
</nav>
Réduire la barre de navigation
Très souvent, notamment sur les petits écrans, vous souhaitez masquer les liens de navigation et les remplacer par un bouton qui devrait les faire apparaître lorsqu'on clique dessus.
Pour créer une barre de navigation pliable, utilisez un bouton avec . Enveloppez ensuite le contenu de la barre de navigation (liens, etc.) dans un élément div avec , suivi d'un identifiant correspondant au bouton : " thetarget ".class="navbar-toggler",
data-toggle="collapse" and data-target="#thetarget"class="collapse navbar-collapse"data-target
Exemple
<nav class="navbar navbar-expand-md bg-dark
navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">Navbar</a>
<!-- Toggler/collapsibe Button -->
<button
class="navbar-toggler" type="button"
data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse"
id="collapsibleNavbar">
<ul class="navbar-nav">
<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"
href="#">Link</a>
</li>
</ul>
</div>
</nav>
Conseil : Vous pouvez également supprimer la classe .navbar-expand-md pour TOUJOURS masquer les liens de la barre de navigation et afficher le bouton bascule.
Barre de navigation avec liste déroulante
Les barres de navigation peuvent également contenir des menus déroulants :
Exemple
<nav class="navbar navbar-expand-sm
bg-dark navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">Logo</a>
<!-- Links -->
<ul class="navbar-nav">
<li
class="nav-item">
<a class="nav-link" href="#">Link
1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop"
data-toggle="dropdown">
Dropdown
link
</a>
<div class="dropdown-menu">
<a
class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</li>
</ul>
</nav>
Formulaires et boutons de la barre de navigation
Ajoutez un <form>élément avec class="form-inline"pour regrouper les entrées et les boutons côte à côte :
Exemple
<nav class="navbar navbar-expand-sm
bg-dark navbar-dark">
<form class="form-inline" action="/action_page.php">
<input class="form-control
mr-sm-2"
type="text" placeholder="Search">
<button class="btn btn-success" type="submit">Search</button>
</form>
</nav>
Vous pouvez également utiliser d'autres classes d'entrée, telles que .input-group-prependou .input-group-appendpour attacher une icône ou un texte d'aide à côté du champ d'entrée. Vous en apprendrez plus sur ces classes dans le chapitre Bootstrap Inputs.
Exemple
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<form class="form-inline" action="/action_page.php">
<div class="input-group">
<div
class="input-group-prepend">
<span class="input-group-text">@</span>
</div>
<input type="text"
class="form-control" placeholder="Username">
</div>
</form>
</nav>
Texte de la barre de navigation
Utilisez la .navbar-textclasse pour aligner verticalement tous les éléments à l'intérieur de la barre de navigation qui ne sont pas des liens (garantit un rembourrage et une couleur de texte appropriés).
Exemple
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<!--
Links -->
<ul class="navbar-nav">
<li
class="nav-item">
<a class="nav-link" href="#">Link
1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
</ul>
<!-- Navbar text-->
<span class="navbar-text">
Navbar text
</span>
</nav>
Barre de navigation fixe
La barre de navigation peut également être fixée en haut ou en bas de la page.
Une barre de navigation fixe reste visible dans une position fixe (en haut ou en bas) indépendamment du défilement de la page.
La .fixed-topclasse fixe la barre de navigation en haut :
Exemple
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
...
</nav>
Utilisez la .fixed-bottomclasse pour que la barre de navigation reste en bas de la page :
Exemple
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">
...
</nav>
Use the .sticky-top class to make the navbar fixed/stay at
the top of the page when you scroll past it. Note:
This class does not work in IE11 and earlier (will treat it as position:relative).
Example
<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
...
</nav>