Navigation

Navigation latérale

stableClasses hb-nav hb-nav-brand hb-nav-sections hb-nav-section hb-nav-group hb-nav-items hb-nav-railVuetify 2 v-navigation-drawer dark permanent avec le crochet hb-nav-drawer (habillé par vuetify.scss ; les listes en theme--dark gardent le rendu Vuetify)Vuetify 3 v-navigation-drawer + thème nav

Mot-symbole en haut, sections avec un titre en capitales dépliable (hb-nav-group, aria-expanded), entrées avec icône et libellé ; l'entrée active (aria-current="page") est en couleur d'accent sur fond --nav-active-bg avec une barre à gauche. hb-nav-rail réduit à 56 px avec les icônes seules.

Code

<div style="display:flex;gap:var(--space-4);align-items:flex-start">
  <nav class="hb-nav" style="min-height:360px;border-radius:var(--radius-lg)">
    <div class="hb-nav-brand"><i></i><span>Hublot</span></div>
    <div class="hb-nav-sections">
      <div class="hb-nav-section"><button class="hb-nav-group" aria-expanded="true"><span>Rayon</span><i class="material-icons chev" style="font-size:16px">chevron_right</i></button><div class="hb-nav-items"><a href="#" aria-current="page"><i class="material-icons">checklist</i><span>Check-lists</span></a><a href="#"><i class="material-icons">thermostat</i><span>Températures</span></a><a href="#"><i class="material-icons">cleaning_services</i><span>Nettoyages</span></a></div></div>
      <div class="hb-nav-section"><button class="hb-nav-group" aria-expanded="true"><span>Achats</span><i class="material-icons chev" style="font-size:16px">chevron_right</i></button><div class="hb-nav-items"><a href="#"><i class="material-icons">receipt_long</i><span>Factures</span></a><a href="#"><i class="material-icons">local_shipping</i><span>Fournisseurs</span></a></div></div>
    </div>
  </nav>
  <nav class="hb-nav hb-nav-rail" style="min-height:360px;border-radius:var(--radius-lg)">
    <div class="hb-nav-brand"><i></i><span>Hublot</span></div>
    <div class="hb-nav-sections"><div class="hb-nav-section"><div class="hb-nav-items"><a href="#" aria-current="page" aria-label="Check-lists"><i class="material-icons">checklist</i><span>Check-lists</span></a><a href="#" aria-label="Températures"><i class="material-icons">thermostat</i><span>Températures</span></a><a href="#" aria-label="Factures"><i class="material-icons">receipt_long</i><span>Factures</span></a></div></div></div>
  </nav>
</div>

La barre reste sombre dans les deux thèmes ; elle change de couleur avec le métier (--nav), pas de dégradé.
Une seule entrée active ; les groupes se replient mais l'entrée active reste visible (son groupe est déplié au chargement).
Sur tablette et téléphone, la barre se cache derrière un bouton menu ou se remplace par une barre basse.
Dans magasin, le tiroir Vuetify garde ses propres listes (theme--dark) : seuls les crochets hb-topbar et hb-nav-drawer sont posés.

Navigation latérale

Anatomie

Règles