Navigation principale

Liste horizontale ou verticale de liens ; variante avec méga-menus (data-bj-nav-btn, data-bj-expanded sur le panneau). Le composant Vue BjNavigation ne fournit que bj-nav et bj-nav__list ; les entrées utilisent les classes ci-dessous en HTML.

Liste de liens

L’état actif d’un lien repose sur aria-current="page" (styles dans bj-nav__link). Vous pouvez ajouter un modificateur BEM bj-nav__link--active en miroir si vos feuilles de style l’exigent.

<nav class="bj-nav bj-container" aria-label="Navigation">
  <ul class="bj-nav__list">
    <li class="bj-nav__item">
      <a class="bj-nav__link" href="/">Accueil</a>
    </li>
    <li class="bj-nav__item">
      <a class="bj-nav__link" href="/demarches">Démarches</a>
    </li>
    <li class="bj-nav__item">
      <a class="bj-nav__link bj-nav__link--active" href="/contact" aria-current="page">Contact</a>
    </li>
  </ul>
</nav>

Méga-menu

<nav class="bj-nav bj-container" aria-label="Navigation">
  <ul class="bj-nav__list">
    <li class="bj-nav__item">
      <a class="bj-nav__link" href="#">Accueil</a>
    </li>
    <li class="bj-nav__item">
      <button type="button" class="bj-nav__btn" data-bj-nav-btn aria-expanded="false" aria-controls="mega-id">Thématiques</button>
      <div class="bj-nav__mega" id="mega-id">
        <div class="bj-nav__mega-content">
          <div>
            <p class="bj-nav__mega-title">Citoyenneté</p>
            <ul class="bj-nav__mega-list">
              <li><a class="bj-nav__mega-link" href="#">État civil</a></li>
            </ul>
          </div>
        </div>
      </div>
    </li>
  </ul>
</nav>

Variantes

Fermeture des autres méga-menus à l’ouverture d’un nouveau panneau ; clic extérieur referme (script DSBJ).

Classes CSS

ClasseDescription
bj-navConteneur <code>nav</code>.
bj-nav__listListe <code>ul</code> des entrées.
bj-nav__itemÉlément <code>li</code>.
bj-nav__linkLien de navigation.
bj-nav__link--activeModificateur optionnel pour l’entrée courante (préférer <code>aria-current="page"</code>).
bj-nav__btnBouton qui ouvre un méga-menu.
bj-nav__megaPanneau déroulant du méga-menu.
bj-nav__mega-contentGrille du contenu du panneau.
bj-nav__mega-titleTitre de colonne dans le panneau.
bj-nav__mega-listListe de liens dans une colonne du méga-menu.
bj-nav__mega-linkLien dans le méga-menu.

Accessibilité

aria-expanded sur le bouton ; focus clavier dans le panneau ouvert ; aria-current="page" sur le lien de la page courante.