Où placer le menu de navigation sur mobile ?

La réponse courte

• Meilleur placement : Navigation en bas (bottom bar)
• À éviter : Menu hamburger en haut à gauche
• Impact : +23% d’engagement avec navigation bottom

Comparaison des options

Position	Accessibilité	Engagement	Recommandation
Bottom bar	⭐⭐⭐⭐⭐	+23%	Idéal
Header central	⭐⭐⭐	Référence	Acceptable
Hamburger haut gauche	⭐	-20%	À éviter
Hamburger haut droite	⭐⭐	-10%	Si nécessaire

Pourquoi la navigation en bas ?

1. Thumb zone

La majorité des utilisateurs tiennent leur téléphone d’une main. Le bas de l’écran est la zone la plus accessible au pouce.

┌─────────────────────────────────────┐
│  ⬛ Zone difficile                  │
│                                     │
│  🟨 Zone moyenne                    │
│                                     │
│  🟩 Zone facile (thumb zone)        │
├─────────────────────────────────────┤
│  🏠    🔍    ➕    ❤️    👤        │ ← Navigation ici
└─────────────────────────────────────┘

2. Toujours visible

Pas besoin d’ouvrir un menu. Les options principales sont constamment accessibles.

3. Familiarité

Instagram, TikTok, Amazon, Spotify… Les apps les plus utilisées ont adopté ce pattern.

Implémentation bottom bar

Structure HTML

<nav class="bottom-nav" aria-label="Navigation principale">
  <a href="/" class="nav-item active">
    <svg><!-- Icône home --></svg>
    <span>Accueil</span>
  </a>
  <a href="/recherche" class="nav-item">
    <svg><!-- Icône search --></svg>
    <span>Recherche</span>
  </a>
  <a href="/favoris" class="nav-item">
    <svg><!-- Icône coeur --></svg>
    <span>Favoris</span>
  </a>
  <a href="/panier" class="nav-item">
    <svg><!-- Icône panier --></svg>
    <span>Panier</span>
    <span class="badge">3</span>
  </a>
  <a href="/compte" class="nav-item">
    <svg><!-- Icône user --></svg>
    <span>Compte</span>
  </a>
</nav>

CSS

.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: white;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
  z-index: 100;
  /* Safe area pour iPhone X+ */
  padding-bottom: env(safe-area-inset-bottom);
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  color: #666;
  font-size: 10px;
  position: relative;
}

.nav-item.active {
  color: #007bff;
}

.nav-item svg {
  width: 24px;
  height: 24px;
}

.badge {
  position: absolute;
  top: -4px;
  right: -8px;
  background: #ff4444;
  color: white;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 10px;
}

/* Espace pour le contenu principal */
main {
  padding-bottom: 70px;
}

Quoi mettre dans la bottom bar ?

E-commerce (5 items max)

Item	Icône	Pourquoi
Accueil	🏠	Point de départ
Recherche	🔍	Action fréquente
Catégories	☰	Navigation catalogue
Panier	🛒	Conversion
Compte	👤	Fidélisation

SaaS / App

Item	Icône	Pourquoi
Dashboard	🏠	Vue principale
Activité	🔔	Engagement
Action principale	➕	Core feature
Messages	💬	Communication
Profil	👤	Paramètres

Et le menu hamburger ?

Le hamburger reste utile pour :

• Navigation secondaire
• Pages légales
• Paramètres avancés
• Sites avec beaucoup de pages

Placement optimal du hamburger

Si vous devez utiliser un hamburger :

┌─────────────────────────────────────┐
│  [≡]        LOGO        [🛒] [👤]  │ ← Hamburger à gauche OK
└─────────────────────────────────────┘

Le hamburger en haut à droite est légèrement plus accessible que en haut à gauche.

Erreurs courantes

1. Trop d’items

❌ 7+ items dans la bottom bar
✅ Maximum 5 items

2. Labels manquants

❌ Icônes seules
✅ Icônes + labels courts

3. Pas de feedback

❌ Aucun état actif visible
✅ Couleur différente pour l'item actif

4. Masque le contenu

❌ Bottom bar qui cache le dernier élément
✅ padding-bottom sur le contenu principal

Mesurer l’impact

Métrique	Objectif
Taux de clic navigation	+20%
Pages par session	+15%
Temps sur site	+10%
Conversions mobile	+5-10%

Checklist navigation mobile

• Navigation principale en bas de l’écran
• Maximum 5 items
• Icônes + labels
• État actif visible
• Boutons 44px minimum
• Safe area iPhone X+ respectée
• Contenu pas masqué par la nav