Source

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 .navbaravec .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-printau 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 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.

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

Lisez la suite pour un exemple et une liste des sous-composants pris en charge.

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 .
  • .form-inlinepour 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.

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="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <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" href="#" tabindex="-1" aria-disabled="true">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-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.

<!-- 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-brandné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.4/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.4/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
    Bootstrap
  </a>
</nav>

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

Les états actifs — avec .active— pour indiquer que la page actuelle peuvent être appliqués directement aux .nav-links ou à leurs parents immédiats .nav-items.

<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" href="#" tabindex="-1" aria-disabled="true">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-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#">Features</a>
      <a class="nav-item nav-link" href="#">Pricing</a>
      <a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">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-itemet .nav-linkcomme 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="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <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 .navbarutilisent la mise en page flexible et seront par défaut 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-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 ou en ajouter une 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-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">
  <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>

Comportements réactifs

Les barres de navigation peuvent utiliser les classes .navbar-toggler, .navbar-collapseet .navbar-expand{-sm|-md|-lg|-xl}pour changer lorsque leur contenu s'effondre 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 dans le point d'arrêt le plus bas :

<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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">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 plugin d'effondrement pour déclencher du contenu caché ailleurs sur la page. Parce que notre plugin fonctionne sur le idet la data-targetcorrespondance, c'est facile à faire !

<div class="pos-f-t">
  <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>