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.

Sur cette page

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 .navbaravec .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.
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 un role="navigation"à chaque barre de navigation pour l'identifier explicitement comme une région de référence pour les utilisateurs de technologies d'assistance.
Indiquez l'élément en cours en utilisant aria-current="page"pour la page en cours ou aria-current="true"pour l'élément en cours dans un ensemble.

L'effet d'animation de ce composant dépend de la prefers-reduced-motionrequê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-brandpour votre entreprise, produit ou nom de projet.
.navbar-navpour 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-textpour ajouter des chaînes de texte centrées verticalement.
.collapse.navbar-collapsepour regrouper et masquer le contenu de la barre de navigation par un point d'arrêt parent.
Ajoutez une option .navbar-scrollpour définir max-heightet 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" href="#" tabindex="-1" aria-disabled="true">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 d' espacement ( my-2, my-lg-0, me-sm-0, ).my-sm-0

Marque

Le .navbar-brandpeut ê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 la .navbar-brandclasse.

<!-- 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-brandpar un <img>.

<nav class="navbar navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">
      <img src="/docs/5.0/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-blocket .align-text-topsur le <img>.

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img src="/docs/5.0/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 .navoptions 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é.

Ajoutez la .activeclasse sur .nav-linkpour indiquer la page en cours.

Veuillez noter que vous devez également ajouter l' aria-currentattribut 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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">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-itemet .nav-linkcomme 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>

Formes

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 .navbaruse 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-colorutilitaires. Choisissez parmi .navbar-lightpour une utilisation avec des couleurs d'arrière-plan claires ou .navbar-darkpour 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 .containerpour la centrer sur une page, mais notez qu'un conteneur interne est toujours requis. Ou vous pouvez ajouter un conteneur à l'intérieur du .navbarpour 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-topsur le <body>) pour éviter tout chevauchement avec d'autres éléments.

Notez également que .sticky-toputilise 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

Ajoutez .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-heightou 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 potentieloverflow : lorsque le paramètre overflow-y: auto(nécessaire pour faire défiler le contenu ici), overflow-xest l'équivalent de auto, ce qui recadrera du contenu horizontal.

Voici un exemple de barre de navigation utilisant .navbar-nav-scrollwith style="--bs-scroll-height: 100px;", avec 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" href="#" tabindex="-1" aria-disabled="true">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-collapseet .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-expandclasse sur la barre de navigation. Pour les barres de navigation qui s'effondrent toujours, n'ajoutez aucune .navbar-expandclasse.

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-brandaffichage 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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">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 idet la data-bs-targetcorrespondance, c'est facile à faire !

Collapsed content

Toggleable via the navbar brand.

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

Toupet

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;

Boucle

Les classes de développement/réduction de la barre de navigation réactive (par exemple, .navbar-expand-lg) sont combinées avec la $breakpointscarte et générées via une boucle dans 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;
        }
      }
    }
  }
}