En-tête de page

Identité de l’État, service ou portail, raccourcis et navigation ; bande tricolore en haut.

Exemple complet

<header class="bj-header" role="banner">
  <div class="bj-container">
    <div class="bj-header__body">
      <a href="/" class="bj-header__brand">
        <div class="bj-logo"><p>République<br />du Bénin</p></div>
        <div class="bj-header__service">
          <span class="bj-header__service-title">Portail démo</span>
          <span class="bj-header__service-tagline">Démarches en ligne</span>
        </div>
      </a>
      <div class="bj-header__tools">
        <a href="#" class="bj-header__tools-link"><i class="ri-user-line" aria-hidden="true"></i> Mon compte</a>
        <button type="button" class="bj-header__menu-btn" data-bj-header-menu aria-controls="main-nav" aria-expanded="false">
          <i class="ri-menu-line" aria-hidden="true"></i>
          <span class="bj-header__menu-label">Menu</span>
        </button>
      </div>
    </div>
    <nav class="bj-header__nav" id="main-nav" aria-label="Navigation principale">
      <ul class="bj-header__nav-list">
        <li class="bj-header__nav-item">
          <a class="bj-header__nav-link bj-header__nav-link--active" href="#" aria-current="page">Accueil</a>
        </li>
        <li class="bj-header__nav-item">
          <a class="bj-header__nav-link" href="#">Démarches</a>
        </li>
      </ul>
    </nav>
  </div>
</header>

Marque seule (sans bloc service)

Sur petit écran, <code>bj-header__service</code> est masqué par défaut (breakpoint <code>md</code>).

<header class="bj-header" role="banner">
  <div class="bj-container">
    <div class="bj-header__body">
      <a href="/" class="bj-header__brand">
        <div class="bj-logo"><p>République<br />du Bénin</p></div>
      </a>
      <div class="bj-header__tools">
        <button type="button" class="bj-header__menu-btn" data-bj-header-menu aria-controls="nav-min" aria-expanded="false">
          <i class="ri-menu-line" aria-hidden="true"></i>
          <span class="bj-header__menu-label">Menu</span>
        </button>
      </div>
    </div>
    <nav class="bj-header__nav" id="nav-min" aria-label="Navigation principale">
      <ul class="bj-header__nav-list">
        <li class="bj-header__nav-item"><a class="bj-header__nav-link" href="#">Accueil</a></li>
      </ul>
    </nav>
  </div>
</header>

Variantes

Sur mobile, data-bj-header-menu sur le bouton avec aria-controls vers l’id du nav ouvre le menu ; placez data-bj-expanded sur le nav lorsqu’il est ouvert.

Classes CSS

ClasseDescription
bj-headerEn-tête (bande tricolore <code>::before</code>).
bj-header__bodyLigne marque / outils.
bj-header__brandLien d’accueil (logo + texte service).
bj-header__serviceBloc titre service (affiché à partir du breakpoint <code>md</code>).
bj-header__service-titleNom du service (titre).
bj-header__service-taglineSous-titre ou baseline du service.
bj-header__toolsZone des raccourcis (liens, actions).
bj-header__tools-linkLien dans la zone outils.
bj-header__menu-btnBouton menu mobile (visible &lt; <code>lg</code>).
bj-header__menu-labelLibellé « Menu » (masqué sur très petit écran).
bj-header__navPanneau de navigation principale.
bj-header__nav-listListe des entrées du menu.
bj-header__nav-itemÉlément de liste.
bj-header__nav-linkLien ou entrée de navigation.
bj-header__nav-link--activeÉtat actif (courant) ; peut s’appairer avec <code>aria-current="page"</code>.

Accessibilité

Synchronisez aria-expanded du bouton burger avec l’ouverture du panneau nav.