Navigation

Le menu de navigation principale se construit avec un <nav> sémantique et une liste de liens. La page courante se marque avec aria-current="page" — pas de classe dédiée, pour rester fiable même si le rendu est fait côté serveur sans logique JS.

Do / Don’t

✓ Faire

Limiter le menu principal à 5-7 entrées maximum
Utiliser tds-nav—muted pour les sous-navigations afin de garder une hiérarchie visuelle claire

✗ Éviter

Marquer l’état courant uniquement par une couleur (sans aria-current)
Imbriquer des menus déroulants complexes sans les tester au clavier

Variante	Classe	Usage
Principale	`tds-nav`	Menu principal, fond bleu institutionnel
Secondaire	`tds-nav tds-nav--muted`	Sous-navigation, fond clair

Importation

@import "@tds-tchad/core/components/nav/nav.css";

import { nav } from '@tds-tchad/core/components/nav';

Exemple

<nav class="tds-nav" aria-label="Navigation principale">
  <ul class="tds-nav__list">
    <li><a href="/" class="tds-nav__link" aria-current="page">Accueil</a></li>
    <li><a href="/demarches" class="tds-nav__link">Démarches</a></li>
    <li><a href="/services" class="tds-nav__link">Services</a></li>
    <li><a href="/contact" class="tds-nav__link">Contact</a></li>
  </ul>
</nav>

Variante secondaire (fond clair)

Pour une navigation de sous-section (moins proéminente que le menu principal) :

<nav class="tds-nav tds-nav--muted" aria-label="Navigation secondaire">
  <ul class="tds-nav__list">
    <li><a href="#" class="tds-nav__link">Sous-section A</a></li>
    <li><a href="#" class="tds-nav__link" aria-current="page">Sous-section B</a></li>
  </ul>
</nav>