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, etc., y compris la prise en charge de notre plug-in d'effondrement.
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|-xxl}
pour les classes de combinaison et de combinaison de couleurs réactives. - Les barres de navigation et leur contenu sont fluides par défaut. Modifiez le conteneur pour limiter leur largeur horizontale de différentes manières.
- 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.
- Garantissez 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 repère pour les utilisateurs de technologies d'assistance. - Indiquez l'élément en cours en utilisant
aria-current="page"
pour la page en cours ouaria-current="true"
pour l'élément en cours dans un ensemble.
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.- Utilitaires flexibles et d'espacement 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.- Ajoutez une option
.navbar-scroll
pour définirmax-height
et faire défiler le contenu de la barre de navigation étendue..
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">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</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="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<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">Disabled</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
Cet exemple utilise les classes utilitaires d' arrière-plan (bg-light
) et espacement (my-2
, my-lg-0
, me-sm-0
, my-sm-0
).
Brand
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.
Texte
Ajoutez votre texte dans un élément avec le .navbar-brand
classe.
<!-- As a link -->
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
</div>
</nav>
<!-- As a heading -->
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<span class="navbar-brand mb-0 h1">Navbar</span>
</div>
</nav>
Image
Vous pouvez remplacer le texte dans le .navbar-brand
par un <img>
.
<nav class="navbar navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">
<img src="/docs/5.1/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24">
</a>
</div>
</nav>
Image et texte
Vous pouvez également utiliser des utilitaires supplémentaires pour ajouter une image et du texte en même temps. Notez l'ajout de .d-inline-block
et .align-text-top
sur le <img>
.
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="/docs/5.1/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24" class="d-inline-block align-text-top">
Bootstrap
</a>
</div>
</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é.
Ajouter la .active
classe sur .nav-link
pour indiquer la page en cours.
Veuillez noter que vous devez également ajouter l' aria-current
attribut sur le fichier active .nav-link
.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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">
<a class="nav-link active" aria-current="page" href="#">Home</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>
</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">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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" aria-current="page" href="#">Home</a>
<a class="nav-link" href="#">Features</a>
<a class="nav-link" href="#">Pricing</a>
<a class="nav-link disabled">Disabled</a>
</div>
</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">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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">
<a class="nav-link active" aria-current="page" href="#">Home</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="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown link
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<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>
</ul>
</li>
</ul>
</div>
</div>
</nav>
Formulaires
Placez divers contrôles et composants de formulaire dans une barre de navigation :
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</nav>
Les éléments enfants immédiats de .navbar
utilise 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">
<div class="container-fluid">
<a class="navbar-brand">Navbar</a>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</nav>
Les groupes d'entrée fonctionnent également. Si votre barre de navigation est un formulaire entier, ou principalement un formulaire, vous pouvez utiliser l' <form>
élément comme conteneur et enregistrer du code HTML.
<nav class="navbar navbar-light bg-light">
<form class="container-fluid">
<div class="input-group">
<span class="input-group-text" id="basic-addon1">@</span>
<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="container-fluid justify-content-start">
<button class="btn btn-outline-success me-2" 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">
<div class="container-fluid">
<span class="navbar-text">
Navbar text with an inline element
</span>
</div>
</nav>
Mélangez et assortissez avec d'autres composants et utilitaires selon vos besoins.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar w/ text</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</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>
</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, mais notez qu'un conteneur interne est toujours requis. 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">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
</div>
</nav>
</div>
Utilisez l'un des conteneurs réactifs pour modifier la largeur de présentation du contenu de votre barre de navigation.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-md">
<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
utilises position: sticky
, qui n'est pas entièrement pris en charge dans tous les navigateurs..
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Default</a>
</div>
</nav>
<nav class="navbar fixed-top navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Fixed top</a>
</div>
</nav>
<nav class="navbar fixed-bottom navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Fixed bottom</a>
</div>
</nav>
<nav class="navbar sticky-top navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Sticky top</a>
</div>
</nav>
Défilement
Ajouter .navbar-nav-scroll
à un .navbar-nav
(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 d'affichage), mais vous pouvez remplacer cela avec la propriété personnalisée CSS locale --bs-navbar-height
ou les styles 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 potentiel overflow
: 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
avec style="--bs-scroll-height: 100px;"
, quelques utilitaires de marge supplémentaires pour un espacement optimal.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar scroll</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto my-2 my-lg-0 navbar-nav-scroll" style="--bs-scroll-height: 100px;">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</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="#" id="navbarScrollingDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Link
</a>
<ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
<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 me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
Comportements réactifs
Les barres de navigation peuvent utiliser les classes .navbar-toggler
, .navbar-collapse
et .navbar-expand{-sm|-md|-lg|-xl|-xxl}
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.
Basculer
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">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</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="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
Avec un nom de marque affiché à gauche et un bouton à bascule à droite :
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</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="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
Avec un interrupteur à gauche et le nom de la marque à droite :
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</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="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</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-bs-target
correspondance, c'est facile à faire !
<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">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
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 idconteneur 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.
Offcanvas
Transform your expanding and collapsing navbar into an offcanvas drawer with the offcanvas plugin. We extend both the offcanvas default styles and use our .navbar-expand-*
classes to create a dynamic and flexible navigation sidebar.
In the example below, to create an offcanvas navbar that is always collapsed across all breakpoints, omit the .navbar-expand-*
class entirely.
<nav class="navbar navbar-light bg-light fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="#">Offcanvas navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasNavbarLabel">Offcanvas</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</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="#" id="offcanvasNavbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="offcanvasNavbarDropdown">
<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>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</div>
</nav>
To create an offcanvas navbar that expands into a normal navbar at a specific breakpoint like lg
, use .navbar-expand-lg
.
<nav class="navbar navbar-light navbar-expand-lg bg-light fixed-top">
<a class="navbar-brand" href="#">Offcanvas navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarOffcanvasLg" aria-controls="navbarOffcanvasLg">
<span class="navbar-toggler-icon"></span>
</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="navbarOffcanvasLg" aria-labelledby="navbarOffcanvasLgLabel">
...
</div>
</nav>
Sass
Variables
$navbar-padding-y: $spacer * .5;
$navbar-padding-x: null;
$navbar-nav-link-padding-x: .5rem;
$navbar-brand-font-size: $font-size-lg;
// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
$nav-link-height: $font-size-base * $line-height-base + $nav-link-padding-y * 2;
$navbar-brand-height: $navbar-brand-font-size * $line-height-base;
$navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) * .5;
$navbar-brand-margin-end: 1rem;
$navbar-toggler-padding-y: .25rem;
$navbar-toggler-padding-x: .75rem;
$navbar-toggler-font-size: $font-size-lg;
$navbar-toggler-border-radius: $btn-border-radius;
$navbar-toggler-focus-width: $btn-focus-width;
$navbar-toggler-transition: box-shadow .15s ease-in-out;
$navbar-dark-color: rgba($white, .55);
$navbar-dark-hover-color: rgba($white, .75);
$navbar-dark-active-color: $white;
$navbar-dark-disabled-color: rgba($white, .25);
$navbar-dark-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
$navbar-dark-toggler-border-color: rgba($white, .1);
$navbar-light-color: rgba($black, .55);
$navbar-light-hover-color: rgba($black, .7);
$navbar-light-active-color: rgba($black, .9);
$navbar-light-disabled-color: rgba($black, .3);
$navbar-light-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
$navbar-light-toggler-border-color: rgba($black, .1);
$navbar-light-brand-color: $navbar-light-active-color;
$navbar-light-brand-hover-color: $navbar-light-active-color;
$navbar-dark-brand-color: $navbar-dark-active-color;
$navbar-dark-brand-hover-color: $navbar-dark-active-color;
Loop
Responsive navbar expand/collapse classes (e.g., .navbar-expand-lg
) are combined with the $breakpoints
map and generated through a loop in scss/_navbar.scss
.
// Generate series of `.navbar-expand-*` responsive classes for configuring
// where your navbar collapses.
.navbar-expand {
@each $breakpoint in map-keys($grid-breakpoints) {
$next: breakpoint-next($breakpoint, $grid-breakpoints);
$infix: breakpoint-infix($next, $grid-breakpoints);
// stylelint-disable-next-line scss/selector-no-union-class-name
&#{$infix} {
@include media-breakpoint-up($next) {
flex-wrap: nowrap;
justify-content: flex-start;
.navbar-nav {
flex-direction: row;
.dropdown-menu {
position: absolute;
}
.nav-link {
padding-right: $navbar-nav-link-padding-x;
padding-left: $navbar-nav-link-padding-x;
}
}
.navbar-nav-scroll {
overflow: visible;
}
.navbar-collapse {
display: flex !important; // stylelint-disable-line declaration-no-important
flex-basis: auto;
}
.navbar-toggler {
display: none;
}
.offcanvas-header {
display: none;
}
.offcanvas {
position: inherit;
bottom: 0;
z-index: 1000;
flex-grow: 1;
visibility: visible !important; // stylelint-disable-line declaration-no-important
background-color: transparent;
border-right: 0;
border-left: 0;
@include transition(none);
transform: none;
}
.offcanvas-top,
.offcanvas-bottom {
height: auto;
border-top: 0;
border-bottom: 0;
}
.offcanvas-body {
display: flex;
flex-grow: 0;
padding: 0;
overflow-y: visible;
}
}
}
}
}