ComposantsJavaScript requis

Barre de navigation

La barre de navigation est l’en-tête d’un site : marque, liens principaux et actions. Elle se replie en menu sur petit écran et se déploie à partir du point de rupture que vous choisissez.

Structure de base#

Une barre se compose d’un .navbar, d’un point de rupture .navbar-expand-*, d’une marque, d’un bouton de repli et d’un bloc .collapse.navbar-collapse. Le bouton de repli ne s’affiche que sous le point de rupture.

<nav class="navbar navbar-expand-lg bg-body-tertiary" aria-label="Navigation principale">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">BDU CI</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#nav-base-menu" aria-controls="nav-base-menu" aria-expanded="false" aria-label="Afficher la navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="nav-base-menu">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Particuliers</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Entreprises</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Épargne</a></li>
        <li class="nav-item"><a class="nav-link disabled" aria-disabled="true">Bientôt disponible</a></li>
      </ul>
      <span class="navbar-text">Agences ouvertes de 8 h à 16 h</span>
    </div>
  </div>
</nav>

En-tête de la BDU#

Cet exemple reprend la structure de l’en-tête BDU : marque, liens, puis deux boutons d’action alignés à droite. Les classes cauri-header et cauri-brand ajoutent le filet vert et le style de la marque (voir l’en-tête).

<header class="cauri-header">
  <nav class="navbar navbar-expand-lg" aria-label="En-tête de la banque">
    <div class="container">
      <a class="navbar-brand cauri-brand" href="#">BDU CI<small>Banque de l'Union</small></a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#nav-cauri-menu" aria-controls="nav-cauri-menu" aria-expanded="false" aria-label="Afficher la navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="nav-cauri-menu">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
          <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Particuliers</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Entreprises</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Crédits</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Agences</a></li>
        </ul>
        <div class="d-flex flex-column flex-lg-row gap-2">
          <a class="btn btn-outline-primary" href="#">Devenir client</a>
          <a class="btn btn-primary" href="#">Accès à vos comptes</a>
        </div>
      </div>
    </div>
  </nav>
</header>

Couleurs#

Combinez un fond (bg-primary, bg-body-tertiary…) avec data-bs-theme="dark" sur la barre pour obtenir des liens clairs sur fond foncé. Les couleurs des liens, de la marque et du bouton de repli s’adaptent seules.

<nav class="navbar navbar-expand-lg bg-primary mb-3" data-bs-theme="dark" aria-label="Barre bleue">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">BDU CI</a>
    <ul class="navbar-nav flex-row gap-3">
      <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Comptes</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Cartes</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Prêts</a></li>
    </ul>
  </div>
</nav>
<nav class="navbar navbar-expand-lg bg-body-tertiary" aria-label="Barre claire">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">BDU CI</a>
    <ul class="navbar-nav flex-row gap-3">
      <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Comptes</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Cartes</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Prêts</a></li>
    </ul>
  </div>
</nav>

La marque peut contenir une image ou un texte. Un formulaire de recherche se place dans la zone repliable ; un menu déroulant s’ajoute dans un .nav-item.dropdown.

<nav class="navbar navbar-expand-lg bg-body-tertiary" aria-label="Recherche et menu">
  <div class="container-fluid">
    <a class="navbar-brand d-flex align-items-center gap-2" href="#">
      <svg width="28" height="28" viewBox="0 0 28 28" role="img" aria-label="Logo BDU CI"><rect width="28" height="28" rx="6" fill="#2B62AA"/><path d="M7 20V8h7a4 4 0 0 1 0 8H7" fill="none" stroke="#fff" stroke-width="2.5"/></svg>
      BDU CI
    </a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#nav-form-menu" aria-controls="nav-form-menu" aria-expanded="false" aria-label="Afficher la navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="nav-form-menu">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Accueil</a></li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Services</a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Virement</a></li>
            <li><a class="dropdown-item" href="#">Épargne</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Simulateur de prêt</a></li>
          </ul>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Rechercher une agence" aria-label="Rechercher une agence">
        <button class="btn btn-outline-primary" type="submit">Rechercher</button>
      </form>
    </div>
  </div>
</nav>

Ajoutez .navbar-nav-scroll sur la liste de liens pour limiter sa hauteur et la faire défiler quand le menu est long. La hauteur maximale se règle avec la variable --bs-scroll-height (75 vh par défaut).

<nav class="navbar navbar-expand-lg bg-body-tertiary" aria-label="Menu long">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Agences</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#nav-scroll-menu" aria-controls="nav-scroll-menu" aria-expanded="false" aria-label="Afficher la navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="nav-scroll-menu">
      <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="#">Abidjan Plateau</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Abidjan Cocody</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Abidjan Marcory</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Bouaké</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Yamoussoukro</a></li>
        <li class="nav-item"><a class="nav-link" href="#">San-Pédro</a></li>
      </ul>
    </div>
  </div>
</nav>

Pour un menu mobile plus riche, placez les liens dans un panneau latéral. Au-delà du point de rupture, le panneau s’affiche en ligne comme une barre ordinaire (voir offcanvas).

<nav class="navbar navbar-expand-lg bg-body-tertiary" aria-label="Menu latéral">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">BDU CI</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#nav-offcanvas-menu" aria-controls="nav-offcanvas-menu" aria-label="Afficher la navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="offcanvas offcanvas-end" tabindex="-1" id="nav-offcanvas-menu" aria-labelledby="nav-offcanvas-titre">
      <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="nav-offcanvas-titre">Menu BDU CI</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Fermer"></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="#">Comptes</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Virements</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Crédits</a></li>
        </ul>
      </div>
    </div>
  </div>
</nav>

Classes

Classes
Classe	Rôle
`.navbar`	Conteneur de la barre (flex, padding vertical, variables `--bs-navbar-*`).
`.navbar-expand`, `.navbar-expand-{sm\|md\|lg\|xl\|xxl}`	Point de rupture à partir duquel la barre se déploie. Sans suffixe, elle est toujours déployée ; sans classe, toujours repliée.
`.navbar-brand`	Nom ou logo de la marque.
`.navbar-nav`	Liste de liens (verticale sous le point de rupture, horizontale au-dessus).
`.navbar-text`	Texte simple aligné avec les liens.
`.navbar-toggler`, `.navbar-toggler-icon`	Bouton de repli et son icône à trois traits.
`.navbar-collapse`	Zone repliable ; à combiner avec `.collapse`.
`.navbar-nav-scroll`	Liste à hauteur limitée avec défilement vertical (`--bs-scroll-height`).
`.fixed-top`, `.fixed-bottom`, `.sticky-top`, `.sticky-bottom`	Placement : fixée en haut ou en bas de la fenêtre, ou collante. Ajoutez un espacement au contenu pour qu’il ne passe pas dessous.
`data-bs-theme="dark"`	Liens et bouton de repli clairs, pour un fond foncé ou coloré.
`.container`, `.container-fluid`, `.container-lg`…	Conteneur interne qui cadre la largeur du contenu de la barre.

Attributs data-bs-*

La barre n’a pas de script propre : elle s’appuie sur les composants repli ou offcanvas. Voyez leurs pages pour les options et les événements.

Attributs data-bs-*
Attribut	Élément	Effet
`data-bs-toggle="collapse"`	Bouton de repli	Ouvre ou ferme la zone ciblée.
`data-bs-target="#id"`	Bouton de repli	Sélecteur de la zone repliable ou du panneau.
`data-bs-toggle="offcanvas"`	Bouton de repli	Ouvre un panneau latéral au lieu d’une zone repliable.
`data-bs-toggle="dropdown"`	Lien de menu	Active un menu déroulant dans un `.nav-item.dropdown`.

Variables Sass

Les valeurs ci-dessous sont celles par défaut. Modifiez-les avant d’importer Cauri (voir Sass).

Variables Sass
Variable	Valeur par défaut
`$navbar-padding-y`	`$spacer * .5`
`$navbar-padding-x`	`null`
`$navbar-nav-link-padding-x`	`.5rem`
`$navbar-brand-font-size`	`$font-size-lg`
`$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-light-color`	`rgba(var(--bs-emphasis-color-rgb), .65)`
`$navbar-light-hover-color`	`rgba(var(--bs-emphasis-color-rgb), .8)`
`$navbar-light-active-color`	`rgba(var(--bs-emphasis-color-rgb), 1)`
`$navbar-light-disabled-color`	`rgba(var(--bs-emphasis-color-rgb), .3)`
`$navbar-dark-color`	`rgba($white, .85)` (valeur Cauri : contraste d’au moins 4,5:1 sur le bleu de marque)
`$navbar-dark-hover-color`	`$white`
`$navbar-dark-active-color`	`$white`
`$navbar-dark-disabled-color`	`rgba($white, .25)`

Personnalisation#

Chaque barre expose des variables CSS que vous pouvez surcharger localement, sans recompiler.

// Sass : marque plus grande et liens plus espacés
$navbar-brand-font-size: 1.5rem;
$navbar-nav-link-padding-x: 1rem;

// CSS : une barre précise
.mon-entete {
  --bs-navbar-padding-y: 1rem;
  --bs-navbar-color: #1f2a37;
  --bs-navbar-hover-color: #2B62AA;
  --bs-navbar-active-color: #2B62AA;
}

Bonnes pratiques

À faire

Placez la navigation dans un élément <nav> avec un aria-label explicite, surtout si la page contient plusieurs barres.
Marquez la page courante avec .active et aria-current="page".
Limitez-vous à cinq ou six liens principaux et réservez les boutons colorés aux actions clés (« Devenir client », « Accès à vos comptes »).
Choisissez le point de rupture selon le nombre de liens : navbar-expand-lg convient à la plupart des en-têtes.

À éviter

Ne mettez pas un grand nombre de boutons dans la barre : sous le point de rupture, ils s’empilent et saturent l’écran.
N’utilisez pas .fixed-top sans prévoir un espacement en haut du contenu : le début de la page passerait sous la barre.
Ne retirez pas le libellé du bouton de repli : un aria-label est nécessaire car il n’affiche qu’une icône.

Accessibilité

Le bouton de repli porte aria-controls, aria-expanded (mis à jour par Cauri) et un aria-label clair.
Pour un lien désactivé, ajoutez .disabled et aria-disabled="true" ; retirez l’attribut href s’il ne doit pas être activable.
Dans un menu déroulant, les touches Entrée, Espace et les flèches fonctionnent déjà ; gardez des éléments <a> ou <button> natifs.
Vérifiez le contraste des liens : sur fond coloré, utilisez data-bs-theme="dark" plutôt qu’une couleur de texte choisie à la main.