Menu latéral

Navigation secondaire avec titre optionnel, état actif (<code>bj-sidemenu__link--active</code> + <code>aria-current="page"</code>) et sous-niveaux <code>bj-sidemenu__sublist</code> (comme <code>BjSidemenu</code>).

Exemple avec section repliable

<nav class="bj-sidemenu" aria-label="Menu latéral">
  <p class="bj-sidemenu__title">Mon espace</p>
  <ul class="bj-sidemenu__list">
    <li class="bj-sidemenu__item">
      <a class="bj-sidemenu__link bj-sidemenu__link--active" href="#" aria-current="page">Tableau de bord</a>
    </li>
    <li class="bj-sidemenu__item">
      <button type="button" class="bj-sidemenu__btn" aria-expanded="true" aria-controls="sub-reglages">Réglages</button>
      <ul class="bj-sidemenu__sublist" id="sub-reglages">
        <li class="bj-sidemenu__item">
          <a class="bj-sidemenu__link" href="#">Profil</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>

Sous-menus imbriqués

Chaque enfant reprend bj-sidemenu__item et bj-sidemenu__link ; l’état actif peut être sur un sous-lien.

<nav class="bj-sidemenu" aria-label="Menu latéral">
  <p class="bj-sidemenu__title">Documentation</p>
  <ul class="bj-sidemenu__list">
    <li class="bj-sidemenu__item">
      <a class="bj-sidemenu__link" href="#">Vue d'ensemble</a>
      <ul class="bj-sidemenu__sublist">
        <li class="bj-sidemenu__item">
          <a class="bj-sidemenu__link bj-sidemenu__link--active" href="#" aria-current="page">Installation</a>
        </li>
        <li class="bj-sidemenu__item">
          <a class="bj-sidemenu__link" href="#">Configuration</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>

section-variantes

La classe bj-sidemenu__btn stylise un bouton de section repliable ; associez un script si vous basculez aria-expanded et la visibilité du sous-menu.

Classes CSS

ClasseDescription
bj-sidemenuConteneur <code>nav</code>.
bj-sidemenu__titleTitre du menu (<code>p</code>).
bj-sidemenu__listListe principale <code>ul</code>.
bj-sidemenu__itemÉlément <code>li</code> (niveau principal ou enfant).
bj-sidemenu__link / bj-sidemenu__link--activeLien ; modificateur <code>--active</code> pour la page courante.
bj-sidemenu__sublistListe imbriquée pour les enfants.
bj-sidemenu__btnBouton de section repliable (pattern optionnel, présent en CSS).

Accessibilité

aria-current="page" sur le lien actif ; cohérence aria-expanded / visibilité du sous-menu pour les boutons.