Dashboard Sidebar

Navigation latérale pour tableaux de bord avec branding, sections de liens, items collapsibles et mode compact.

Sidebar par défaut

<aside class="bj-dashboard-sidebar">
  <a class="bj-dashboard-sidebar__brand" href="/">
    <img src="/sigle.svg" alt="" class="bj-dashboard-sidebar__brand-img">
    <span class="bj-dashboard-sidebar__brand-text">Mon Dashboard</span>
  </a>
  <nav class="bj-dashboard-sidebar__nav" aria-label="Dashboard">
    <div class="bj-dashboard-sidebar__section">
      <p class="bj-dashboard-sidebar__section-title">Principal</p>
      <ul class="bj-dashboard-sidebar__list">
        <li class="bj-dashboard-sidebar__item">
          <a class="bj-dashboard-sidebar__link bj-dashboard-sidebar__link--active" href="#" aria-current="page">
            <i class="ri-dashboard-line bj-dashboard-sidebar__link-icon"></i>
            <span class="bj-dashboard-sidebar__link-label">Tableau de bord</span>
          </a>
        </li>
        <li class="bj-dashboard-sidebar__item">
          <a class="bj-dashboard-sidebar__link" href="#">
            <i class="ri-bar-chart-line bj-dashboard-sidebar__link-icon"></i>
            <span class="bj-dashboard-sidebar__link-label">Statistiques</span>
          </a>
        </li>
      </ul>
    </div>
  </nav>
</aside>

Mode compact

<aside class="bj-dashboard-sidebar bj-dashboard-sidebar--compact">
  <a class="bj-dashboard-sidebar__brand" href="/">
    <img src="/sigle.svg" alt="" class="bj-dashboard-sidebar__brand-img">
    <span class="bj-dashboard-sidebar__brand-text">App</span>
  </a>
  <nav class="bj-dashboard-sidebar__nav" aria-label="Dashboard">
    <div class="bj-dashboard-sidebar__section">
      <p class="bj-dashboard-sidebar__section-title">Menu</p>
      <ul class="bj-dashboard-sidebar__list">
        <li class="bj-dashboard-sidebar__item">
          <a class="bj-dashboard-sidebar__link bj-dashboard-sidebar__link--active" href="#" aria-current="page">
            <i class="ri-dashboard-line bj-dashboard-sidebar__link-icon"></i>
            <span class="bj-dashboard-sidebar__link-label">Accueil</span>
          </a>
        </li>
      </ul>
    </div>
  </nav>
</aside>

Variantes de branding

Bloc .bj-dashboard-sidebar__brand en <a> si lien, sinon <div>. Logo et texte sont optionnels indépendamment.

<aside class="bj-dashboard-sidebar">
  <div class="bj-dashboard-sidebar__brand">
    <span class="bj-dashboard-sidebar__brand-text">Texte seul</span>
  </div>
  <nav class="bj-dashboard-sidebar__nav" aria-label="Dashboard">…</nav>
</aside>

Section sans titre

Omettre .bj-dashboard-sidebar__section-title pour un groupe de liens sans libellé de section.

<div class="bj-dashboard-sidebar__section">
  <ul class="bj-dashboard-sidebar__list">
    <li class="bj-dashboard-sidebar__item">
      <a class="bj-dashboard-sidebar__link" href="#">
        <i class="ri-inbox-line bj-dashboard-sidebar__link-icon"></i>
        <span class="bj-dashboard-sidebar__link-label">Boîte de réception</span>
      </a>
    </li>
  </ul>
</div>

Liens imbriqués (collapsible)

Un item avec sous-liens : bouton .bj-dashboard-sidebar__btn, aria-expanded, puis .bj-dashboard-sidebar__sublist pour les enfants.

<li class="bj-dashboard-sidebar__item">
  <button type="button" class="bj-dashboard-sidebar__btn" aria-expanded="true">
    <i class="ri-folder-line bj-dashboard-sidebar__link-icon"></i>
    <span class="bj-dashboard-sidebar__link-label">Dossiers</span>
  </button>
  <ul class="bj-dashboard-sidebar__sublist">
    <li class="bj-dashboard-sidebar__item">
      <a class="bj-dashboard-sidebar__link" href="#">
        <i class="ri-file-line bj-dashboard-sidebar__link-icon"></i>
        <span class="bj-dashboard-sidebar__link-label">Rapport Q1</span>
      </a>
    </li>
    <li class="bj-dashboard-sidebar__item">
      <a class="bj-dashboard-sidebar__link bj-dashboard-sidebar__link--active" href="#" aria-current="page">
        <i class="ri-file-line bj-dashboard-sidebar__link-icon"></i>
        <span class="bj-dashboard-sidebar__link-label">Rapport Q2</span>
      </a>
    </li>
  </ul>
</li>

Zone .bj-dashboard-sidebar__footer sous la navigation.

<aside class="bj-dashboard-sidebar">
  …
  <div class="bj-dashboard-sidebar__footer">
    <p class="bj-text-sm" style="margin:0;color:var(--bj-text-alt)">Utilisateur · Déconnexion</p>
  </div>
</aside>

Combinaison : compact + footer + sous-menu

Classes CSS

Classe	Description
`bj-dashboard-sidebar`	Conteneur principal de la sidebar
`bj-dashboard-sidebar--compact`	Modificateur : mode compact, icônes seules
`bj-dashboard-sidebar__brand`	Zone de branding (logo + texte)
`bj-dashboard-sidebar__brand-img`	Image du logo
`bj-dashboard-sidebar__brand-text`	Texte de la marque
`bj-dashboard-sidebar__nav`	Zone de navigation scrollable
`bj-dashboard-sidebar__section`	Groupe de liens
`bj-dashboard-sidebar__section-title`	Titre de section (uppercase)
`bj-dashboard-sidebar__list`	Liste de liens
`bj-dashboard-sidebar__item`	Élément de liste
`bj-dashboard-sidebar__link`	Lien de navigation
`bj-dashboard-sidebar__link--active`	Modificateur : lien actif
`bj-dashboard-sidebar__link-icon`	Icône du lien
`bj-dashboard-sidebar__link-label`	Libellé du lien
`bj-dashboard-sidebar__btn`	Bouton collapsible
`bj-dashboard-sidebar__sublist`	Sous-liste de liens
`bj-dashboard-sidebar__footer`	Pied de la sidebar