Composant BDUJavaScript requis

En-tête

Bandeau, marque et navigation, avec le filet vert de marque. Le logo est le PNG provisoire du site de la BDU ; il sera remplacé par le SVG de la charte officielle. Adaptez le chemin de l’image à votre projet.

En-tête complet#

<header class="cauri-header">
  <div class="cauri-topbar py-2">
    <div class="container d-flex justify-content-between">
      <span>Nouvelle application mobile BDU disponible</span>
      <span><a href="#">Contact</a> · <a href="#">Notre réseau</a></span>
    </div>
  </div>
  <nav class="navbar navbar-expand-lg">
    <div class="container">
      <a class="navbar-brand cauri-brand" href="#"><img class="cauri-brand__logo" src="/brand/bdu-logo.png" width="40" height="53" alt="BDU, Banque de l'Union"></a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#menuPrincipal" aria-controls="menuPrincipal" aria-expanded="false" aria-label="Ouvrir le menu">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="menuPrincipal">
        <ul class="navbar-nav me-auto">
          <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="#">Professionnels</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Entreprises</a></li>
          <li class="nav-item"><a class="nav-link" href="#">À propos</a></li>
        </ul>
        <div class="d-flex gap-2">
          <a class="btn btn-outline-primary" href="#">Devenir client</a>
          <a class="btn btn-secondary" href="#">Accès à vos comptes</a>
        </div>
      </div>
    </div>
  </nav>
</header>

Bonnes pratiques

À faire

Marque cliquable vers l’accueil.
« Accès à vos comptes » toujours visible.

À éviter

Plus de cinq entrées de premier niveau.
Remplacer le texte de marque par une image sans alt.

Accessibilité

Le bouton du menu a aria-label et aria-expanded.
La page courante porte aria-current.