Navigation 14 variantes

La navigation repond a trois questions, toujours dans cet ordre : ou suis-je, ou puis-je aller, comment je reviens. Regle tenue partout : la position courante porte aria-current, et se distingue autrement que par la couleur seule.

A. Barres et en-tetes

Site vitrine, application interne, en-tete translucide pose sur une banniere.

JABS. 06 12 34 56 78

En-tete de site

Site vitrine : logo a gauche, liens au centre, action a droite. Le menu se replie en tiroir sous 860 px.

Voir le codeMasquer le code

<header class="nav-tete">
  <a href="#" class="nav-tete__logo">JABS<span>.</span></a>
  <nav class="nav-tete__liens">
    <a href="#" aria-current="page">Accueil</a>
    <a href="#">Prestations</a>
    <a href="#">Realisations</a>
    <a href="#">Contact</a>
  </nav>
  <a href="tel:+33612345678" class="btn btn--plein"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2 4.2 2 2 0 0 1 4 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.2-1.2a2 2 0 0 1 2.1-.5c.9.3 1.8.6 2.8.7A2 2 0 0 1 22 16.9Z"/></svg> 06 12 34 56 78</a>
  <button class="btn btn--icone btn--fantome nav-tete__burger" aria-label="Ouvrir le menu" aria-expanded="false"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01"/></svg></button>
</header>

.nav-tete {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  width: 100%;
  padding: var(--sp-3) var(--sp-5);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
}
.nav-tete__logo { font-size: var(--fs-xl); font-weight: 800; letter-spacing: -.02em; color: var(--c-text); text-decoration: none; }
.nav-tete__logo span { color: var(--c-primary); }
.nav-tete__liens { display: flex; align-items: center; gap: var(--sp-1); flex: 1; }
.nav-tete__liens a {
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  color: var(--c-text-soft);
  text-decoration: none;
  transition: background-color var(--t-fast), color var(--t-fast);
}
.nav-tete__liens a:hover { background: var(--c-surface-2); color: var(--c-text); }
.nav-tete__liens a[aria-current] { background: var(--c-primary-soft); color: var(--c-primary-ink); font-weight: var(--fw-semi); }
.nav-tete__burger { display: none; }
@media (max-width: 860px) {
  .nav-tete__liens { display: none; }
  .nav-tete__burger { display: inline-flex; }
  .nav-tete { gap: var(--sp-3); }
  .nav-tete__logo { flex: 1; }
}

flex items-center gap-6 border-b bg-white px-5 py-3 max-md:[&>nav]:hidden

En-tete d'application

Outil interne : fil d'Ariane a gauche, recherche au centre, compte a droite. Pas de liens de navigation ici, ils vivent dans la barre laterale.

Voir le codeMasquer le code

<header class="nav-appli">
  <button class="btn btn--icone btn--fantome" aria-label="Replier le menu"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01"/></svg></button>
  <nav class="doc-fil" aria-label="Chemin"><a href="#">Dossiers</a><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 18 6-6-6-6"/></svg><span aria-current="page">2026-103</span></nav>
  <span class="cat-head__spacer"></span>
  <label class="doc-recherche"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg><input type="search" placeholder="Rechercher"></label>
  <button class="btn btn--icone btn--fantome btn--pastille" data-pastille="3" aria-label="3 notifications"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 8a6 6 0 1 0-12 0c0 7-3 9-3 9h18s-3-2-3-9M13.7 21a2 2 0 0 1-3.4 0"/></svg></button>
  <button class="btn btn--avatar" aria-label="Mon compte"><span>JK</span></button>
</header>

.nav-appli {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
}
.nav-appli .doc-recherche { max-width: 240px; }
.nav-appli .doc-fil { flex-wrap: nowrap; white-space: nowrap; }
@media (max-width: 700px) { .nav-appli .doc-recherche { display: none; } }

flex items-center gap-3 border-b bg-white px-4 py-2

JABS.

En-tete collant translucide

Site vitrine avec banniere en image : l'en-tete flotte au-dessus du contenu et se laisse traverser par ce qui defile dessous.

Voir le codeMasquer le code

<div class="demo-verre" style="padding:0">
  <header class="nav-tete nav-tete--verre">
    <a href="#" class="nav-tete__logo">JABS<span>.</span></a>
    <nav class="nav-tete__liens"><a href="#" aria-current="page">Accueil</a><a href="#">Prestations</a><a href="#">Contact</a></nav>
    <button class="btn btn--lg-verre btn--lg-teinte">Devis gratuit</button>
  </header>
</div>

.nav-tete--verre {
  position: relative;
  isolation: isolate;
  border: none;
  border-radius: 0;
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.22);
}
.nav-tete--verre .nav-tete__logo,
.nav-tete--verre .nav-tete__liens a { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.35); }
.nav-tete--verre .nav-tete__liens a:hover { background: rgba(255,255,255,.16); }
.nav-tete--verre .nav-tete__liens a[aria-current] { background: rgba(255,255,255,.24); color: #fff; }

sticky top-0 z-50 border-white/20 bg-white/10 backdrop-blur-xl

B. Barres laterales

Navigation principale d'une application : complete, repliee en icones, a sections depliantes.

Barre laterale

La navigation principale d'une application. Les rubriques sont groupees et intitulees : une liste plate de 15 liens ne se lit pas.

Voir le codeMasquer le code

<aside class="nav-cote">
  <div class="nav-cote__marque">JABS<span> CRM</span></div>
  <nav>
    <h5>Pilotage</h5>
    <a href="#" aria-current="page"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg> Tableau de bord</a>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg> Planning</a>
    <h5>Activite</h5>
    <a href="#"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M3 6a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z"/></svg> Dossiers <span class="btn__badge">24</span></a>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"/><path d="M14 2v6h6M9 15h6"/></svg> Devis <span class="btn__badge">7</span></a>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="5" rx="1"/><path d="M5 9v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9M10 13h4"/></svg> Documents</a>
    <h5>Reglages</h5>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M17 3a2.8 2.8 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/></svg> Parametres</a>
  </nav>
</aside>

.nav-cote {
  display: flex;
  flex-direction: column;
  width: 230px;
  padding: var(--sp-3);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
}
.nav-cote__marque { padding: var(--sp-2) var(--sp-3) var(--sp-4); font-size: var(--fs-lg); font-weight: 800; letter-spacing: -.02em; color: var(--c-text); }
.nav-cote__marque span { color: var(--c-primary); font-weight: var(--fw-medium); }
.nav-cote nav { display: flex; flex-direction: column; gap: 2px; }
.nav-cote h5 {
  margin: var(--sp-4) 0 var(--sp-1);
  padding: 0 var(--sp-3);
  font-size: 10px;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--c-text-muted);
}
.nav-cote h5:first-child { margin-top: 0; }
.nav-cote a {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  color: var(--c-text-soft);
  text-decoration: none;
  transition: background-color var(--t-fast), color var(--t-fast);
}
.nav-cote a svg { width: 18px; height: 18px; flex: none; }
.nav-cote a .btn__badge { margin-left: auto; }
.nav-cote a:hover { background: var(--c-surface-2); color: var(--c-text); }
.nav-cote a[aria-current] { background: var(--c-primary-soft); color: var(--c-primary-ink); font-weight: var(--fw-semi); }
.nav-cote a[aria-current] svg { color: var(--c-primary); }

flex w-60 flex-col gap-1 border-r bg-white p-3 [&_h5]:px-3 [&_h5]:text-[11px] [&_h5]:uppercase

Barre laterale repliee

Gagner de la place sur un ecran de travail. L'info-bulle devient obligatoire : une icone seule n'est pas comprise par tout le monde.

Voir le codeMasquer le code

<aside class="nav-cote nav-cote--reduite">
  <div class="nav-cote__marque">J</div>
  <nav>
    <a href="#" aria-current="page" class="btn--bulle" data-bulle="Tableau de bord"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg></a>
    <a href="#" class="btn--bulle" data-bulle="Planning"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg></a>
    <a href="#" class="btn--bulle" data-bulle="Dossiers"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"/><path d="M14 2v6h6M9 15h6"/></svg></a>
    <a href="#" class="btn--bulle" data-bulle="Documents"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="5" rx="1"/><path d="M5 9v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9M10 13h4"/></svg></a>
    <a href="#" class="btn--bulle" data-bulle="Parametres"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M17 3a2.8 2.8 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/></svg></a>
  </nav>
</aside>

.nav-cote--reduite { width: 64px; align-items: center; }
.nav-cote--reduite .nav-cote__marque { padding: var(--sp-2) 0 var(--sp-4); text-align: center; }
.nav-cote--reduite nav { align-items: center; gap: var(--sp-1); }
.nav-cote--reduite a { width: 42px; height: 42px; padding: 0; justify-content: center; position: relative; overflow: visible; }
.nav-cote--reduite h5 { display: none; }
/* L'info-bulle sort a droite, pas au-dessus : la barre est collee au bord haut. */
.nav-cote--reduite .btn--bulle::before {
  bottom: auto; left: calc(100% + 10px); top: 50%;
  transform: translateY(-50%) translateX(-4px);
}
.nav-cote--reduite .btn--bulle:hover::before,
.nav-cote--reduite .btn--bulle:focus-visible::before { transform: translateY(-50%) translateX(0); }

w-16 items-center [&_a]:h-10 [&_a]:w-10 [&_a]:justify-center [&_span]:hidden

Menu a sections depliantes

Arborescence a deux niveaux. Le parent d'une page ouverte reste deplie : refermer la section a chaque navigation fait perdre le fil.

Voir le codeMasquer le code

<aside class="nav-cote">
  <nav>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg> Tableau de bord</a>
    <details open class="nav-cote__section">
      <summary><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"/><path d="M14 2v6h6M9 15h6"/></svg> Dossiers</summary>
      <a href="#" aria-current="page">En cours <span class="btn__badge">12</span></a>
      <a href="#">A relancer <span class="btn__badge">5</span></a>
      <a href="#">Archives</a>
    </details>
    <details class="nav-cote__section">
      <summary><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="5" rx="1"/><path d="M5 9v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9M10 13h4"/></svg> Facturation</summary>
      <a href="#">Devis</a>
      <a href="#">Factures</a>
      <a href="#">Avoirs</a>
    </details>
  </nav>
</aside>

.nav-cote__section summary {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  color: var(--c-text-soft);
  cursor: pointer;
  list-style: none;
}
.nav-cote__section summary::-webkit-details-marker { display: none; }
.nav-cote__section summary::after {
  content: "";
  margin-left: auto;
  width: 6px; height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--t-base);
  opacity: .6;
}
.nav-cote__section[open] summary::after { transform: rotate(45deg); }
.nav-cote__section summary:hover { background: var(--c-surface-2); color: var(--c-text); }
.nav-cote__section summary svg { width: 18px; height: 18px; flex: none; }
.nav-cote__section > a { padding-left: 44px; font-size: var(--fs-sm); }

[&_summary]:flex [&_summary]:cursor-pointer [&_details>a]:pl-11

C. Onglets et deplacement

Onglets souslignes ou en pilules, fil d'Ariane, menu deroulant.

Onglets souslignes

Sections d'une meme fiche. Le trait sous l'onglet actif est plus lisible qu'un simple changement de couleur, y compris en noir et blanc.

Voir le codeMasquer le code

<div class="nav-onglets" role="tablist">
  <button role="tab" aria-selected="true">Resume</button>
  <button role="tab" aria-selected="false">Documents <span class="btn__badge">12</span></button>
  <button role="tab" aria-selected="false">Interventions</button>
  <button role="tab" aria-selected="false">Facturation</button>
</div>

.nav-onglets {
  display: flex;
  gap: var(--sp-1);
  width: 100%;
  border-bottom: 1px solid var(--c-border);
  overflow-x: auto;
  scrollbar-width: none;
}
.nav-onglets::-webkit-scrollbar { display: none; }
.nav-onglets button {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  flex: none;
  padding: var(--sp-3);
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: transparent;
  font-family: var(--font-ui);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  color: var(--c-text-muted);
  cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.nav-onglets button:hover { color: var(--c-text); }
.nav-onglets button[aria-selected="true"] {
  border-bottom-color: var(--c-primary);
  color: var(--c-primary-ink);
  font-weight: var(--fw-semi);
}
.nav-onglets button:focus-visible { outline: 2px solid var(--c-focus); outline-offset: -2px; }

flex gap-1 border-b [&_button]:border-b-2 [&_button]:border-transparent aria-selected:border-blue-600

Onglets en pilules

Filtres de liste plutot que sections de page. Plus leger que des onglets souslignes, et se range facilement sur deux lignes.

Voir le codeMasquer le code

<div class="nav-pilules" role="tablist">
  <button role="tab" aria-selected="true">Tous <span class="btn__badge">24</span></button>
  <button role="tab" aria-selected="false">En cours <span class="btn__badge">12</span></button>
  <button role="tab" aria-selected="false">A relancer <span class="btn__badge">5</span></button>
  <button role="tab" aria-selected="false">Termines <span class="btn__badge">7</span></button>
</div>

.nav-pilules { display: flex; flex-wrap: wrap; gap: var(--sp-2); width: 100%; }
.nav-pilules button {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  height: 34px;
  padding: 0 var(--sp-4);
  border: 1px solid var(--c-border);
  border-radius: var(--r-full);
  background: var(--c-surface);
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--c-text-soft);
  cursor: pointer;
  transition: all var(--t-fast);
}
.nav-pilules button:hover { border-color: var(--c-border-strong); color: var(--c-text); }
.nav-pilules button[aria-selected="true"] {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: var(--c-primary-text);
  font-weight: var(--fw-semi);
}

flex flex-wrap gap-2 [&_button]:rounded-full [&_button]:px-4 aria-selected:bg-blue-600 aria-selected:text-white

Fil d'Ariane

Se situer dans une arborescence profonde. Le dernier element n'est pas un lien : c'est la page courante, il porte aria-current.

Voir le codeMasquer le code

<nav class="nav-fil" aria-label="Chemin">
  <a href="#">Accueil</a><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 18 6-6-6-6"/></svg>
  <a href="#">Dossiers</a><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 18 6-6-6-6"/></svg>
  <a href="#">2026-103</a><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 18 6-6-6-6"/></svg>
  <span aria-current="page">Documents</span>
</nav>

.nav-fil { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); font-size: var(--fs-sm); }
.nav-fil a { padding: 3px var(--sp-2); border-radius: var(--r-sm); color: var(--c-text-soft); text-decoration: none; }
.nav-fil a:hover { background: var(--c-surface-2); color: var(--c-text); }
.nav-fil > svg { width: 14px; height: 14px; color: var(--c-text-muted); flex: none; }
.nav-fil [aria-current] { padding: 3px var(--sp-2); font-weight: var(--fw-semi); color: var(--c-text); }

flex flex-wrap items-center gap-1 text-sm [&_svg]:h-3.5 [&_svg]:text-slate-400

Menu deroulant

Actions secondaires d'un objet. Le separateur isole les actions destructrices : elles ne doivent pas etre voisines d'une action banale.

Voir le codeMasquer le code

<div class="nav-menu">
  <button class="btn btn--secondaire btn--menu" aria-expanded="true">Actions <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg></button>
  <div class="nav-menu__panneau" role="menu">
    <button role="menuitem"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M17 3a2.8 2.8 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/></svg> Modifier</button>
    <button role="menuitem"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="9" width="12" height="12" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg> Dupliquer</button>
    <button role="menuitem"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg> Exporter en PDF</button>
    <hr>
    <button role="menuitem" class="is-danger"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6"/></svg> Supprimer</button>
  </div>
</div>

.nav-menu { position: relative; display: inline-block; }
.nav-menu__panneau {
  margin-top: 4px;
  min-width: 210px;
  padding: 4px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface);
  box-shadow: var(--sh-3);
  z-index: 20;
}
.nav-menu__panneau button {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  border: none;
  border-radius: var(--r-sm);
  background: transparent;
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--c-text);
  text-align: left;
  cursor: pointer;
}
.nav-menu__panneau button svg { width: 16px; height: 16px; color: var(--c-text-muted); flex: none; }
.nav-menu__panneau button:hover { background: var(--c-surface-2); }
.nav-menu__panneau hr { margin: 4px 0; border: none; border-top: 1px solid var(--c-border); }
.nav-menu__panneau .is-danger { color: var(--c-danger); }
.nav-menu__panneau .is-danger svg { color: var(--c-danger); }
.nav-menu__panneau .is-danger:hover { background: var(--c-danger-soft); }

absolute z-20 mt-1 min-w-48 rounded-lg border bg-white p-1 shadow-lg

D. Mobile

Barre du bas, tiroir lateral, onglets glissants, pied de page.

Barre du bas

Navigation principale sur telephone. Cinq entrees maximum, chacune avec son libelle : une icone seule n'est comprise que par ceux qui connaissent deja l'application.

Voir le codeMasquer le code

<nav class="nav-bas">
  <a href="#" aria-current="page"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg><span>Accueil</span></a>
  <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"/><path d="M14 2v6h6M9 15h6"/></svg><span>Dossiers</span></a>
  <a href="#" class="nav-bas__central"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg><span class="sr-only">Nouveau</span></a>
  <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg><span>Planning</span></a>
  <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 8a6 6 0 1 0-12 0c0 7-3 9-3 9h18s-3-2-3-9M13.7 21a2 2 0 0 1-3.4 0"/></svg><span>Alertes</span></a>
</nav>

.nav-bas {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 420px;
  padding: 6px 4px;
  padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: 0 -2px 12px rgba(16,24,40,.06);
}
.nav-bas a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  flex: 1;
  min-height: 50px;
  padding: 6px 2px;
  border-radius: var(--r-md);
  font-size: 11px;
  font-weight: var(--fw-medium);
  color: var(--c-text-muted);
  text-decoration: none;
}
.nav-bas a svg { width: 21px; height: 21px; }
.nav-bas a[aria-current] { color: var(--c-primary); font-weight: var(--fw-bold); }
.nav-bas__central {
  flex: none;
  width: 48px; height: 48px;
  justify-content: center;
  border-radius: var(--r-full);
  background: var(--c-primary);
  color: var(--c-primary-text) !important;
  box-shadow: var(--sh-2);
}
.nav-bas__central svg { width: 24px; height: 24px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

fixed inset-x-0 bottom-0 flex border-t bg-white pb-[env(safe-area-inset-bottom)]

Tiroir lateral

Le menu complet sur telephone. Ferme par la croix, par un clic sur le voile et par Echap : les trois, comme pour une modale.

Voir le codeMasquer le code

<div class="nav-tiroir">
  <div class="nav-tiroir__voile"></div>
  <aside class="nav-tiroir__panneau">
    <div class="nav-tiroir__tete">
      <span class="nav-cote__marque">JABS<span> CRM</span></span>
      <button class="btn btn--fermer" aria-label="Fermer le menu"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12"/></svg></button>
    </div>
    <nav>
      <a href="#" aria-current="page"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg> Tableau de bord</a>
      <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"/><path d="M14 2v6h6M9 15h6"/></svg> Dossiers</a>
      <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg> Planning</a>
      <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="5" rx="1"/><path d="M5 9v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9M10 13h4"/></svg> Documents</a>
    </nav>
  </aside>
</div>

.nav-tiroir { position: relative; display: flex; width: 100%; height: 300px; border-radius: var(--r-md); overflow: hidden; }
.nav-tiroir__voile { position: absolute; inset: 0; background: var(--c-overlay); }
.nav-tiroir__panneau {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 270px;
  padding: var(--sp-3);
  background: var(--c-surface);
  box-shadow: var(--sh-4);
}
.nav-tiroir__tete { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-3); }
.nav-tiroir__tete .nav-cote__marque { padding: 0; }
.nav-tiroir nav { display: flex; flex-direction: column; gap: 2px; }
.nav-tiroir nav a {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--r-md);
  font-size: var(--fs-md); font-weight: var(--fw-medium);
  color: var(--c-text-soft); text-decoration: none;
}
.nav-tiroir nav a svg { width: 19px; height: 19px; }
.nav-tiroir nav a[aria-current] { background: var(--c-primary-soft); color: var(--c-primary-ink); font-weight: var(--fw-semi); }

fixed inset-0 z-50 [&_aside]:h-full [&_aside]:w-72 [&_aside]:bg-white

Onglets glissants

Beaucoup d'onglets sur telephone. Ils defilent horizontalement avec calage, et le premier reste partiellement visible pour signaler qu'il y en a plus.

Voir le codeMasquer le code

<div class="nav-glisse" role="tablist">
  <button role="tab" aria-selected="true">Tous</button>
  <button role="tab" aria-selected="false">En cours</button>
  <button role="tab" aria-selected="false">A relancer</button>
  <button role="tab" aria-selected="false">Signes</button>
  <button role="tab" aria-selected="false">En pose</button>
  <button role="tab" aria-selected="false">Termines</button>
  <button role="tab" aria-selected="false">Archives</button>
</div>

.nav-glisse {
  display: flex;
  gap: var(--sp-2);
  width: 100%;
  padding-bottom: var(--sp-2);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* Le degrade de droite dit qu'il reste des onglets hors champ. */
  -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
          mask-image: linear-gradient(90deg, #000 88%, transparent);
}
.nav-glisse::-webkit-scrollbar { display: none; }
.nav-glisse button {
  flex: none;
  scroll-snap-align: start;
  height: 36px;
  padding: 0 var(--sp-4);
  border: 1px solid var(--c-border);
  border-radius: var(--r-full);
  background: var(--c-surface);
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--c-text-soft);
  cursor: pointer;
}
.nav-glisse button[aria-selected="true"] { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-primary-text); font-weight: var(--fw-semi); }

flex snap-x gap-2 overflow-x-auto [&::-webkit-scrollbar]:hidden [&>button]:shrink-0

Pied de page

Fin d'un site vitrine : colonnes de liens, coordonnees, mentions. Les mentions legales et la confidentialite ne sont jamais omises.

Voir le codeMasquer le code

<footer class="nav-pied">
  <div class="nav-pied__cols">
    <div><strong>JABS</strong><p>Just A Better Solution. Chauffage, sanitaire et renovation energetique en Ile-de-France.</p></div>
    <div><h6>Prestations</h6><a href="#">Pompe a chaleur</a><a href="#">Chauffe-eau</a><a href="#">Isolation</a></div>
    <div><h6>Contact</h6><a href="tel:+33612345678">06 12 34 56 78</a><a href="mailto:contact@jabsdev.fr">contact@jabsdev.fr</a></div>
  </div>
  <div class="nav-pied__bas">
    <span>&copy; 2026 JABS</span>
    <nav><a href="#">Mentions legales</a><a href="#">Confidentialite</a><a href="#">CGV</a></nav>
  </div>
</footer>

.nav-pied {
  width: 100%;
  padding: var(--sp-6);
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  font-size: var(--fs-sm);
}
.nav-pied__cols { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--sp-6); }
.nav-pied__cols > div { display: flex; flex-direction: column; gap: 6px; }
.nav-pied strong { font-size: var(--fs-lg); font-weight: 800; color: var(--c-text); }
.nav-pied p { margin: 0; color: var(--c-text-muted); line-height: 1.55; }
.nav-pied h6 { margin: 0 0 2px; font-size: var(--fs-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .06em; color: var(--c-text-muted); }
.nav-pied a { color: var(--c-text-soft); text-decoration: none; }
.nav-pied a:hover { color: var(--c-primary-ink); text-decoration: underline; }
.nav-pied__bas {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3);
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-border);
  color: var(--c-text-muted);
  font-size: var(--fs-xs);
}
.nav-pied__bas nav { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
@media (max-width: 640px) { .nav-pied__cols { grid-template-columns: 1fr; gap: var(--sp-5); } }

border-t bg-slate-50 [&_.cols]:grid [&_.cols]:grid-cols-[2fr_1fr_1fr] max-sm:[&_.cols]:grid-cols-1