Barre de navigation
Documentation et exemples pour l'en-tête de navigation puissant et réactif de Bootstrap, la barre de navigation. Inclut la prise en charge de la marque, de la navigation, du plug-in de réduction, etc.
Comment ça fonctionne
Voici ce que vous devez savoir avant de commencer avec la barre de navigation :
- Les barres de navigation nécessitent un habillage
.navbar
avec.navbar-expand{-sm|-md|-lg|-xl}
pour les classes de combinaison et de combinaison de couleurs réactives . - Les barres de navigation et leur contenu sont fluides par défaut. Utilisez des conteneurs optionnels pour limiter leur largeur horizontale.
- Utilisez nos classes d'utilitaires d' espacement et flexibles pour contrôler l'espacement et l'alignement dans les barres de navigation.
- Les barres de navigation sont réactives par défaut, mais vous pouvez facilement les modifier pour changer cela. Le comportement réactif dépend de notre plugin Collapse JavaScript.
- Les barres de navigation sont masquées par défaut lors de l'impression. Forcez-les à être imprimés en ajoutant
.d-print
au fichier.navbar
. Voir la classe d'utilitaire d'affichage . - Assurez l'accessibilité en utilisant un
<nav>
élément ou, si vous utilisez un élément plus générique tel qu'un<div>
, ajoutez unrole="navigation"
à chaque barre de navigation pour l'identifier explicitement comme une région de référence pour les utilisateurs de technologies d'assistance.
prefers-reduced-motion
requête multimédia. Voir la
section mouvement réduit de notre documentation sur l'accessibilité .
Contenu pris en charge
Les barres de navigation sont livrées avec un support intégré pour une poignée de sous-composants. Choisissez parmi les éléments suivants selon vos besoins :
.navbar-brand
pour votre entreprise, produit ou nom de projet..navbar-nav
pour une navigation pleine hauteur et légère (y compris la prise en charge des menus déroulants)..navbar-toggler
à utiliser avec notre plugin d'effondrement et d'autres comportements de basculement de navigation ..form-inline
pour tous les contrôles et actions de formulaire..navbar-text
pour ajouter des chaînes de texte centrées verticalement..collapse.navbar-collapse
pour regrouper et masquer le contenu de la barre de navigation par un point d'arrêt parent.
Voici un exemple de tous les sous-composants inclus dans une barre de navigation réactive sur le thème de la lumière qui s'effondre automatiquement au lg
(grand) point d'arrêt.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
Cet exemple utilise les classes utilitaires de couleur ( bg-light
) et d' espacement ( my-2
, my-lg-0
, mr-sm-0
, ).my-sm-0
Marque
Le .navbar-brand
peut être appliqué à la plupart des éléments, mais une ancre fonctionne mieux, car certains éléments peuvent nécessiter des classes utilitaires ou des styles personnalisés.
<!-- As a link -->
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
</nav>
<!-- As a heading -->
<nav class="navbar navbar-light bg-light">
<span class="navbar-brand mb-0 h1">Navbar</span>
</nav>
L'ajout d'images au .navbar-brand
nécessitera probablement toujours des styles ou des utilitaires personnalisés pour dimensionner correctement. Voici quelques exemples à démontrer.
<!-- Just an image -->
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="/docs/4.6/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="">
</a>
</nav>
<!-- Image and text -->
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="/docs/4.6/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
Bootstrap
</a>
</nav>
Navigation
Les liens de navigation de la barre de navigation s'appuient sur nos .nav
options avec leur propre classe de modificateur et nécessitent l'utilisation de classes de basculement pour un style réactif approprié. La navigation dans les barres de navigation augmentera également pour occuper autant d'espace horizontal que possible afin de maintenir le contenu de votre barre de navigation bien aligné.
Les états actifs — avec .active
— pour indiquer que la page actuelle peuvent être appliqués directement aux .nav-link
s ou à leurs parents immédiats .nav-item
s.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
</div>
</nav>
Et parce que nous utilisons des classes pour nos navigations, vous pouvez éviter complètement l'approche basée sur les listes si vous le souhaitez.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-link" href="#">Features</a>
<a class="nav-link" href="#">Pricing</a>
<a class="nav-link disabled">Disabled</a>
</div>
</div>
</nav>
Vous pouvez également utiliser les listes déroulantes dans votre barre de navigation. Les menus déroulants nécessitent un élément d'habillage pour le positionnement, assurez-vous donc d'utiliser des éléments séparés et imbriqués pour .nav-item
et .nav-link
comme indiqué ci-dessous.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
Formes
Placez divers contrôles et composants de formulaire dans une barre de navigation avec .form-inline
.
<nav class="navbar navbar-light bg-light">
<form class="form-inline">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</nav>
Les éléments enfants immédiats de .navbar
use flex layout et prendront par défaut la valeur justify-content: space-between
. Utilisez des utilitaires flexibles supplémentaires si nécessaire pour ajuster ce comportement.
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand">Navbar</a>
<form class="form-inline">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</nav>
Les groupes d'entrée fonctionnent aussi :
<nav class="navbar navbar-light bg-light">
<form class="form-inline">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">@</span>
</div>
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>
</form>
</nav>
Divers boutons sont également pris en charge dans le cadre de ces formulaires de barre de navigation. C'est également un excellent rappel que les utilitaires d'alignement vertical peuvent être utilisés pour aligner des éléments de tailles différentes.
<nav class="navbar navbar-light bg-light">
<form class="form-inline">
<button class="btn btn-outline-success" type="button">Main button</button>
<button class="btn btn-sm btn-outline-secondary" type="button">Smaller button</button>
</form>
</nav>
Texte
Les barres de navigation peuvent contenir des morceaux de texte à l'aide de .navbar-text
. Cette classe ajuste l'alignement vertical et l'espacement horizontal des chaînes de texte.
<nav class="navbar navbar-light bg-light">
<span class="navbar-text">
Navbar text with an inline element
</span>
</nav>
Mélangez et assortissez avec d'autres composants et utilitaires selon vos besoins.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar w/ text</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
<span class="navbar-text">
Navbar text with an inline element
</span>
</div>
</nav>
Schémas de couleurs
La thématisation de la barre de navigation n'a jamais été aussi simple grâce à la combinaison de classes de thématisation et d' background-color
utilitaires. Choisissez parmi .navbar-light
pour une utilisation avec des couleurs d'arrière-plan claires ou .navbar-dark
pour des couleurs d'arrière-plan sombres. Ensuite, personnalisez avec des .bg-*
utilitaires.
<nav class="navbar navbar-dark bg-dark">
<!-- Navbar content -->
</nav>
<nav class="navbar navbar-dark bg-primary">
<!-- Navbar content -->
</nav>
<nav class="navbar navbar-light" style="background-color: #e3f2fd;">
<!-- Navbar content -->
</nav>
Conteneurs
Bien que ce ne soit pas obligatoire, vous pouvez envelopper une barre de navigation dans un .container
pour la centrer sur une page. Ou vous pouvez ajouter un conteneur à l'intérieur du .navbar
pour centrer uniquement le contenu d'une barre de navigation supérieure fixe ou statique .
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
</nav>
</div>
Lorsque le conteneur se trouve dans votre barre de navigation, son remplissage horizontal est supprimé aux points d'arrêt inférieurs à la .navbar-expand{-sm|-md|-lg|-xl}
classe spécifiée. Cela garantit que nous ne doublons pas inutilement le rembourrage sur les fenêtres inférieures lorsque votre barre de navigation est réduite.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">Navbar</a>
</div>
</nav>
Placement
Utilisez nos utilitaires de position pour placer les barres de navigation dans des positions non statiques. Choisissez entre fixé en haut, fixé en bas ou collé en haut (fait défiler la page jusqu'à ce qu'elle atteigne le haut, puis y reste). Les barres de navigation fixes utilisent position: fixed
, ce qui signifie qu'elles sont extraites du flux normal du DOM et peuvent nécessiter un CSS personnalisé (par exemple, padding-top
sur le <body>
) pour éviter tout chevauchement avec d'autres éléments.
Notez également que .sticky-top
utilise position: sticky
, qui n'est pas entièrement pris en charge dans tous les navigateurs .
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">Default</a>
</nav>
<nav class="navbar fixed-top navbar-light bg-light">
<a class="navbar-brand" href="#">Fixed top</a>
</nav>
<nav class="navbar fixed-bottom navbar-light bg-light">
<a class="navbar-brand" href="#">Fixed bottom</a>
</nav>
<nav class="navbar sticky-top navbar-light bg-light">
<a class="navbar-brand" href="#">Sticky top</a>
</nav>
Défilement
Ajoutez .navbar-nav-scroll
à un .navbar-collapse
(ou à un autre sous-composant de la barre de navigation) pour activer le défilement vertical dans le contenu basculable d'une barre de navigation réduite. Par défaut, le défilement démarre à 75vh
(ou 75 % de la hauteur de la fenêtre), mais vous pouvez remplacer cela avec des styles en ligne ou personnalisés. Dans les fenêtres plus grandes lorsque la barre de navigation est développée, le contenu apparaîtra comme dans une barre de navigation par défaut.
Veuillez noter que ce comportement présente un inconvénient potentieloverflow
: lorsque le paramètre overflow-y: auto
(nécessaire pour faire défiler le contenu ici), overflow-x
est l'équivalent de auto
, ce qui recadrera du contenu horizontal.
Voici un exemple de barre de navigation utilisant .navbar-nav-scroll
with style="max-height: 100px;"
, avec quelques utilitaires de marge supplémentaires pour un espacement optimal.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar scroll</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarScroll">
<ul class="navbar-nav mr-auto my-2 my-lg-0 navbar-nav-scroll" style="max-height: 100px;">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
Link
</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><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled">Link</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control mr-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</nav>
Comportements réactifs
Les barres de navigation peuvent utiliser les classes .navbar-toggler
, .navbar-collapse
et .navbar-expand{-sm|-md|-lg|-xl}
pour déterminer quand leur contenu se replie derrière un bouton. En combinaison avec d'autres utilitaires, vous pouvez facilement choisir quand afficher ou masquer des éléments particuliers.
Pour les barres de navigation qui ne s'effondrent jamais, ajoutez la .navbar-expand
classe sur la barre de navigation. Pour les barres de navigation qui s'effondrent toujours, n'ajoutez aucune .navbar-expand
classe.
Bascule
Les basculeurs de la barre de navigation sont alignés à gauche par défaut, mais s'ils suivent un élément frère comme un .navbar-brand
, ils seront automatiquement alignés à l'extrême droite. Inverser votre balisage inversera le placement du basculeur. Vous trouverez ci-dessous des exemples de différents styles de bascule.
Sans .navbar-brand
affichage au plus petit point d'arrêt :
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<a class="navbar-brand" href="#">Hidden brand</a>
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
Avec un nom de marque affiché à gauche et un bouton à bascule à droite :
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
Avec un interrupteur à gauche et le nom de la marque à droite :
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarTogglerDemo03">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
Contenu externe
Parfois, vous souhaitez utiliser le plug-in d'effondrement pour déclencher un élément de conteneur pour le contenu qui se trouve structurellement en dehors du fichier .navbar
. Parce que notre plugin fonctionne sur le id
et la data-target
correspondance, c'est facile à faire !
<div class="fixed-top">
<div class="collapse" id="navbarToggleExternalContent">
<div class="bg-dark p-4">
<h5 class="text-white h4">Collapsed content</h5>
<span class="text-muted">Toggleable via the navbar brand.</span>
</div>
</div>
<nav class="navbar navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
</div>
Lorsque vous faites cela, nous vous recommandons d'inclure du JavaScript supplémentaire pour déplacer le focus par programme vers le conteneur lorsqu'il est ouvert. Sinon, les utilisateurs de clavier et les utilisateurs de technologies d'assistance auront probablement du mal à trouver le contenu nouvellement révélé - en particulier si le conteneur qui a été ouvert vient avant le basculeur dans la structure du document. Nous vous recommandons également de vous assurer que le basculeur a l' aria-controls
attribut pointant vers le id
conteneur de contenu. En théorie, cela permet aux utilisateurs de technologies d'assistance de passer directement du basculeur au conteneur qu'il contrôle, mais la prise en charge de cela est actuellement assez inégale.