Navigation

2026.08.22 Navigation

La navigation principale est le menu dans l’en-tête du site. Elle est entièrement pilotée par la configuration menu.main de chaque langue : les entrées de premier niveau deviennent des liens, et une entrée avec des enfants devient un sous-menu déroulant sur ordinateur. Sous 48rem, un bouton de menu garde seulement la marque et ce bouton dans l’en-tête; le panneau ouvert contient les liens principaux, la recherche et les contrôles de langue.

L’en-tête de cette page affiche le composant en direct — sur ce site, le menu contient Documentation et BHDicaire.com.

Exemple#

Variantes#

Ordinateur : les liens directs restent dans l’en-tête; une entrée avec un niveau d’enfants révèle son sous-menu au survol ou au focus clavier
Mobile : la marque et le bouton de menu restent dans l’en-tête; le panneau ouvert contient tous les liens principaux, le déclencheur de recherche et le sélecteur de langue
État actif : la section courante reçoit le trait d’accent; les liens enfants utilisent leur propre classe d’état actif

Quand l’utiliser#

L’en-tête seulement : layouts/partials/header.html affiche la rangée sur chaque page et aucun autre gabarit ne la réutilise
Les liens vivent dans la configuration, jamais dans le gabarit — config/_default/languages.yml pour le site principal, config/brand/languages.yml pour le site de marque, un menu par langue
Un seul niveau d’enfants : une entrée avec des enfants devient un déroulant sur ordinateur et un groupe développé sur mobile; tout niveau plus profond ne s’affiche jamais
L’état actif est calculé par section : un billet de blogue met Blogue en évidence sans aucune déclaration par page

Implémentation#

menu:
  main:
    - identifier: docs
      name: Documentation
      pageRef: /docs
      weight: 10
    - identifier: main-site
      name: BHDicaire.com
      url: https://bhdicaire.com/fr/
      weight: 20

initNavDropdowns() gère l’état des sous-menus sur ordinateur. initMobileNavigation() contrôle le bouton de menu dans l’en-tête et ferme le panneau avec Échap ou au retour du point de rupture ordinateur.

Contexte	Déclencheur	Résultat
Sous-menu ordinateur	Survol ou focus clavier	Le panneau enfant s’ouvre et le lien parent reçoit `aria-expanded="true"`
Sous-menu ordinateur	Échap	Le panneau enfant se ferme et le focus revient au lien parent
En-tête mobile	Bouton de menu	Les liens principaux, la recherche et les contrôles de langue deviennent visibles; l’état et le libellé du bouton changent
En-tête mobile	Échap ou changement de largeur	Le panneau mobile se ferme; Échap renvoie le focus au bouton de menu

Le balisage dans layouts/partials/header.html parcourt .Site.Menus.main, calcule l’état actif d’après la section courante et enveloppe une entrée avec enfants dans .nav-menu et .nav-submenu. Le même partial place le déclencheur de recherche et le sélecteur de langue dans le panneau mobile. Le manifeste énumère chaque clé i18n statique utilisée par ce composant; les libellés de menu.main restent des données de configuration, pas des clés i18n dans le gabarit.

Options#

Option	Rôle
`identifier`	Clé stable; c’est aussi ce que les règles d’état actif du gabarit comparent
`name`	Texte visible du lien, par langue
`pageRef`	Chemin de contenu de la page cible; un mauvais chemin fait échouer la compilation
`url`	URL externe ou littérale, pour les entrées qui pointent hors du site
`parent`	Fait de l’entrée l’enfant d’une autre; un seul niveau
`weight`	Ordre de tri dans le menu

Manifeste d’interface

Nature: Composant
Catégorie: Navigation
Statut: Implémenté
Implémentation: Partial:layouts/partials/header.htmlCSS:assets/css/site.cssJavaScript:assets/js/site.jsi18n:mainNavigationnavigationMenuOpennavigationMenuCloseConfiguration:config/_default/languages.ymlconfig/brand/languages.yml
Utilisé par: layouts/partials/header.html
Interfaces liées: Fil d’Ariane Barre latérale de documentation Sélecteur de langue

Accessibilité#

Le bouton de menu porte un libellé accessible de navigationMenuOpen ou navigationMenuClose, contrôle le panneau de navigation principale et expose son état avec aria-expanded
La rangée est un seul point de repère <nav>, localisé par la clé i18n mainNavigation, ce qui la distingue du sélecteur de langue et des points de repère de navigation du pied de page
Une entrée parente sur ordinateur reste un vrai lien et porte aria-haspopup="true" : elle signale le sous-menu tout en restant une destination à part entière; initNavDropdowns() garde son aria-expanded synchronisé avec la visibilité du sous-menu sur ordinateur
Clavier : Tab atteint le bouton de menu puis les contrôles ouverts; Échap ferme un panneau mobile ou un sous-menu d’ordinateur ouvert et renvoie le focus à son déclencheur
Évitez d’imbriquer des entrées de menu sur plus d’un niveau — le gabarit ne fait qu’un seul passage sur .Children, alors un troisième niveau ne s’afficherait tout simplement jamais