Navigation du site
Tâche#
Utilisez ce motif lorsqu’une personne doit se déplacer entre les zones principales du site, chercher dans le site courant, choisir une langue ou choisir un thème depuis n’importe quelle page. C’est l’en-tête persistant du site, non une table des matières locale ou un filtre.
Composition#
L’en-tête compose Navigation, Recherche, Sélecteur de langue et Sélecteur de thème. Le partial d’en-tête possède leur disposition; les pages de composants possèdent l’API et le comportement de chaque unité.
Contenu et données#
Les liens principaux proviennent de la configuration menu.main de la langue courante. Une entrée de menu peut avoir un niveau d’enfants. La recherche consomme l’index Pagefind local produit après le rendu Hugo. Le sélecteur de langue résout une page traduite lorsqu’elle existe et revient à l’accueil ou à la racine de documentation de cette langue lorsqu’elle n’existe pas.
Comportement adaptatif#
À partir de 48rem, les liens principaux apparaissent dans l’en-tête et une entrée parente peut révéler un déroulant d’un niveau. Sous cette largeur, la marque et le bouton de menu restent visibles; le panneau ouvert contient la navigation principale, la recherche, les contrôles de langue et de thème. Le motif ne cache aucune destination derrière une interaction uniquement au survol.
Implémentation#
layouts/partials/header.html est la racine de composition. Il rend ensemble le point de repère de navigation principale, le déclencheur de recherche, les liens de langue et le contrôle de thème. layouts/_default/baseof.html rend le dialogue de recherche une fois afin qu’il puisse recouvrir la page courante. assets/js/site.js gère les comportements du menu mobile, des déroulants, du dialogue de recherche et de la préférence de thème; assets/css/site.css fournit la disposition adaptative et les états partagés.
Manifeste de motif
- Nature
- Motif
- Catégorie
- Navigation
- Statut
- Implémenté
- Contenu et données
- configuration menu.main pour chaque langueune traduction ou un repli vers l’accueil de langue pour chaque pageun index Pagefind généré localement pour la recherche
- Accessibilité
- points de repère distincts pour la navigation principale et la sélection de languefocus visible et comportement Échap pour les contrôles ouvertsétat du bouton de menu mobile synchronisé avec son panneau contrôlé
- Implémentation
- Partial:
layouts/partials/header.htmllayouts/partials/search.htmllayouts/partials/theme-toggle.htmlGabarit:layouts/_default/baseof.htmlCSS:assets/css/site.cssJavaScript:assets/js/site.jsConfiguration:config/_default/languages.ymlconfig/brand/languages.yml - Motifs liés
- Mise en page de documentation
Accessibilité#
- La navigation principale et le sélecteur de langue sont deux points de repère
<nav>nommés séparément. - Le menu mobile utilise un bouton natif dont l’état
aria-expandedet le libellé accessible suivent le panneau contrôlé. - Une entrée de menu parente sur ordinateur reste une destination et un déclencheur de sous-menu; le focus clavier et Échap exposent et ferment le sous-menu sans piéger une personne.
- La recherche possède sa propre gestion du focus modal. Les contrôles de thème et de langue restent des contrôles ordinaires utilisables dans le panneau mobile ouvert.
- Gardez la profondeur du menu à un niveau enfant. Une arborescence plus profonde n’est ni rendue ni navigable dans cette implémentation.