Les exemples suivent le métier, la densité et le thème choisis.

Navigation

Barre de navigation basse

nouveauClasses hb-bottom-navVuetify 2 v-bottom-navigationVuetify 3 v-bottom-navigation

Quand l'utiliser

Sur tablette en format portrait et sur téléphone, quand les sections principales sont peu nombreuses et visitées souvent : Tâches, Températures, Produits, Plus. Au-delà de cinq, la navigation latérale derrière un bouton menu.

Code
<div style="max-width:480px;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden">
  <div class="hb-card-body hb-small" style="height:120px">Contenu de l'écran.</div>
  <nav class="hb-bottom-nav" aria-label="Sections">
    <a href="#" aria-current="page"><i class="material-icons">checklist</i>Tâches</a>
    <a href="#"><i class="material-icons">thermostat</i>Relevés<span class="hb-count">2</span></a>
    <a href="#"><i class="material-icons">inventory</i>Produits</a>
    <a href="#"><i class="material-icons">more_horiz</i>Plus</a>
  </nav>
</div>

Règles

  • Hauteur 56 px, zone de sécurité en bas sur iOS (env(safe-area-inset-bottom) à ajouter par l'application en padding).
  • Libellés d'un mot ; l'entrée active porte aria-current="page". Une pastille de compte sur l'entrée qui a du nouveau.
  • La barre ne se cache pas au défilement : le rayon est un lieu où l'on change d'écran souvent.