Menu latéral - Sidemenu

Le menu latéral est un système de navigation secondaire présentant une liste verticale de liens placée à côté du contenu.

Vue d’ensemble

Le rendu de base du SideMenuComponent

Code

= dsfr_side_menu(title: "Test") do |component|
  = component.with_item(title: "Accueil", path: "#", current_page: true)
  = component.with_item(title: "Qui sommes-nous ?", path: "#")

Résultat

<nav class="fr-sidemenu" role="navigation" aria-labelledby="sidemenu-title-33700">
  <div class="fr-sidemenu__inner">
    <button type="button" class="fr-sidemenu__btn" aria-expanded="false" aria-controls="sidemenu-collapse-33700">
      Test
    </button>
    <div class="fr-collapse" id="sidemenu-collapse-33700">
      <p class="fr-sidemenu__title" id="sidemenu-title-33700">
        Test
      </p>
      <ul class="fr-sidemenu__list">
        <li class="fr-sidemenu__item">
          <a href="#" class="fr-sidemenu__link" aria-current="page">
            Accueil
          </a>
        </li>
        <li class="fr-sidemenu__item">
          <a href="#" class="fr-sidemenu__link">
            Qui sommes-nous ?
          </a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Avec des sous items

Le rendu avec des items de niveau 2 et 3

Code

= dsfr_side_menu(title: "Test") do |component|
  = component.with_item(title: "Accueil", path: "#")
  = component.with_item(title: "Les composants", path: "#") do |item|
    = item.with_sub_item(title: "En-tête", path: "#")
    = item.with_sub_item(title: "Pied de page", path: "#")
  = component.with_item(title: "Documentation", path: "#", expanded: true) do |item|
    = item.with_sub_item(title: "Guide d'utilisation", path: "#", expanded: true) do |sub_item|
      = sub_item.with_sub_item(title: "Installation", path: "#")
      = sub_item.with_sub_item(title: "Configuration", path: "#", current_page: true)
    = item.with_sub_item(title: "API", path: "#")

Résultat

<nav class="fr-sidemenu" role="navigation" aria-labelledby="sidemenu-title-33800">
  <div class="fr-sidemenu__inner">
    <button type="button" class="fr-sidemenu__btn" aria-expanded="false" aria-controls="sidemenu-collapse-33800">
      Test
    </button>
    <div class="fr-collapse" id="sidemenu-collapse-33800">
      <p class="fr-sidemenu__title" id="sidemenu-title-33800">
        Test
      </p>
      <ul class="fr-sidemenu__list">
        <li class="fr-sidemenu__item">
          <a href="#" class="fr-sidemenu__link">
            Accueil
          </a>
        </li>
        <li class="fr-sidemenu__item">
          <button type="button" class="fr-sidemenu__btn" aria-expanded="false" aria-controls="sidemenu-33820">
            Les composants
          </button>
          <div class="fr-collapse" id="sidemenu-33820">
            <ul class="fr-sidemenu__list">
              <li class="fr-sidemenu__item">
                <a href="#" class="fr-sidemenu__link">
                  En-tête
                </a>
              </li>
              <li class="fr-sidemenu__item">
                <a href="#" class="fr-sidemenu__link">
                  Pied de page
                </a>
              </li>
            </ul>
          </div>
        </li>
        <li class="fr-sidemenu__item">
          <button type="button" class="fr-sidemenu__btn" aria-expanded="true" aria-controls="sidemenu-33860">
            Documentation
          </button>
          <div class="fr-collapse fr-collapse--expanded" id="sidemenu-33860">
            <ul class="fr-sidemenu__list">
              <li class="fr-sidemenu__item">
                <button type="button" class="fr-sidemenu__btn" aria-expanded="true" aria-controls="sidemenu-33840">
                  Guide d'utilisation
                </button>
                <div class="fr-collapse fr-collapse--expanded" id="sidemenu-33840">
                  <ul class="fr-sidemenu__list">
                    <li class="fr-sidemenu__item">
                      <a href="#" class="fr-sidemenu__link">
                        Installation
                      </a>
                    </li>
                    <li class="fr-sidemenu__item">
                      <a href="#" class="fr-sidemenu__link" aria-current="page">
                        Configuration
                      </a>
                    </li>
                  </ul>
                </div>
              </li>
              <li class="fr-sidemenu__item">
                <a href="#" class="fr-sidemenu__link">
                  API
                </a>
              </li>
            </ul>
          </div>
        </li>
      </ul>
    </div>
  </div>
</nav>

Plus d’informations