Le bloc Navigation construit le menu de votre site, horizontal, vertical ou replié derrière un burger. Cette page décrit ses réglages, le menu burger, le lien de navigation, le menu déroulant et le bloc Liens d’un type de contenu.
Ajouter le bloc
Insérez le bloc Navigation (Ajouter un bloc), ou tapez menu dans la recherche des blocs. Sa place habituelle est l’en-tête ou le pied de page du site, écrits une fois pour toutes les pages (Écrire une fois l’en-tête, le menu et le pied de page).
Dans la navigation, ajoutez ses entrées avec le + :
| Bloc | Usage |
|---|---|
| Lien de navigation | Un lien vers une page, ou un libellé non cliquable. |
| Menu déroulant de navigation | Un sous-menu : un titre et un panneau qui se déplie. |
| Bouton | Un appel à l’action qui se détache des autres entrées, « Prendre rendez-vous » par exemple (Bouton). |
| Liens d’un type de contenu | Un lien vers chaque contenu publié d’un type, tenu à jour par le site. Voir la section Les liens d’un type de contenu. |
| Paragraphe | Du texte libre entre les liens. |
Sur un lien, Ajouter avant et Ajouter après du menu ⋮, ou Ctrl+Alt+T et Ctrl+Alt+Y, ajoutent un lien de navigation juste à côté. Ils fonctionnent dans la navigation comme dans le panneau d’un sous-menu.
La navigation n’espace pas ses liens d’elle-même : réglez l’Écart dans le panneau Mise en page flex de son onglet Réglages, comme sur un Conteneur. L’en-tête des créations en pose un.
Régler la navigation
Sélectionnez le bloc Navigation. En haut de l’onglet Réglages, le champ Nom de la région nomme le menu pour les lecteurs d’écran. Le panneau Réglages de la navigation règle ses sous-menus et son menu burger.
| Réglage | Effet | Valeur par défaut |
|---|---|---|
| Nom de la région | Le nom que les lecteurs d’écran annoncent pour ce menu, « Menu principal » ou « Menu du pied de page » par exemple. | Vide |
| Ouvrir les sous-menus | Au survol : un sous-menu s’ouvre quand le pointeur passe sur son titre. Au clic : il s’ouvre au clic sur son titre et reste ouvert jusqu’au clic suivant. Vaut pour tous les sous-menus de cette navigation. | Au survol |
| Menu burger sur | Les appareils sur lesquels les entrées se replient derrière une icône burger : Mobile, Tablette et Ordinateur. Les trois cases se combinent. | Aucune case cochée |
| Icône du burger | L’icône qui ouvre le menu, choisie dans le sélecteur d’icônes : la bibliothèque, les icônes animées et vos propres SVG. Affiché quand un appareil est coché. | Les trois barres |
| Position du burger | Groupe le burger au début, au centre ou à la fin de la barre. Affiché quand un appareil est coché. | Sa place naturelle |
| Composition à ouvrir | La composition que le burger ouvre. Les compositions se trouvent dans Gabarits > Compositions. | Aucune |
| Mode d’ouverture | Modale : la composition s’ouvre au centre, par-dessus la page. Panneau latéral : elle glisse depuis le côté. Affiché quand une composition est choisie. | Modale |
Le menu burger
Le burger replie les entrées de la navigation et ouvre à leur place une composition, que vous composez avec les mêmes blocs qu’une page. Une seule composition sert tous les appareils cochés.
- Pour préparer le menu mobile, créez une composition dans Gabarits > Compositions, puis publiez-la. Commencez-la par un titre, qui devient le nom annoncé de la fenêtre.
- Sélectionnez le bloc Navigation, onglet Réglages.
- Sous Menu burger sur, cochez les appareils, par exemple Mobile et Tablette.
- Dans Composition à ouvrir, choisissez votre composition, puis le Mode d’ouverture.
- Si vous le voulez, changez l’Icône du burger et la Position du burger.
Le burger n’est publié qu’avec un appareil coché et une composition choisie. Tant qu’il en manque un, la navigation est publiée telle quelle, sans burger et sans replier ses entrées. Dès que vous cochez un appareil sans composition, un encadré Menu burger apparaît dans la page à la place du burger. Il porte la liste des compositions et le mode d’ouverture : choisissez-les là.
- Pour fermer le menu, posez dans la composition un bloc Fermer la modale ou le panneau, avec l’icône de votre choix (Ouvrir une modale ou un panneau latéral). Le burger, caché sous le panneau ouvert, ne le referme pas.
- Une composition en brouillon ne s’ouvre pas.
- Sur un site en plusieurs langues, traduisez la composition : le burger ouvre la version de la langue de la page (Traduire une page).
- Le burger se style par les états Par défaut et Survol du bloc Navigation. Il n’est pas un bloc à sélectionner.
Le lien de navigation
Écrivez le libellé dans le bloc, sur le champ marqué Libellé du lien…. Le libellé est du texte brut, sans gras ni lien posé à la main : sa mise en forme se règle dans l’onglet Styles. Sans destination, l’entrée reste un libellé non cliquable, pour coiffer une colonne de sous-menu par exemple.
Un lien de navigation porte le style enregistré Lien de menu : il prend la couleur du texte qui l’entoure, celle du menu ou de l’en-tête. Le style lui donne un peu d’espace autour de son texte. Son panneau Couleurs n’a pas de couleur des liens : l’entrée est elle-même un lien. Pour un menu clair sur fond sombre, donnez une couleur de texte au menu : ses liens suivent.
Ses états sont Par défaut, Survol, Focus et Actif. Sur le site, l’entrée qui mène à la page affichée prend l’état Actif et un lecteur d’écran l’annonce comme la page en cours. Une entrée qui ouvre une modale ou un panneau latéral n’est jamais marquée.
Le panneau Lien
La destination se règle dans l’onglet Réglages, panneau Lien. Le bloc Bouton, le Conteneur, le Titre et le Média ont le même panneau.
| Réglage | Effet | Valeur par défaut |
|---|---|---|
| Champ Cherchez ou collez une adresse… | Un clic dans le champ vide propose Page d’accueil et l’archive de chaque type qui en a une, marquées Gabarit. Tapez deux caractères pour chercher vos pages, articles, compositions et fichiers de la médiathèque. Tapez une adresse, https://, mailto:, tel: ou #ancre, puis validez-la sous l’étiquette Adresse. | Vide |
| Masquer le lien aux moteurs de recherche | Retire l’adresse de la page publiée : l’entrée reste cliquable, mais les moteurs ne la suivent pas. Grise Nofollow et Ouvrir dans un nouvel onglet. | Désactivé |
| Ouverture du lien | Dans une modale, Modale en bas à gauche, Modale en bas au centre, Modale en bas à droite, Sur le côté droit ou Classique (dans l’onglet du navigateur). Absent pour une adresse mailto:, tel: ou #ancre, pour l’accueil et pour une archive. | Classique (dans l’onglet du navigateur) |
| Nom accessible | Le nom que les lecteurs d’écran annoncent à la place du contenu du lien. À laisser vide sur une entrée qui porte un libellé visible. | Vide |
| Nofollow | Demande aux moteurs de ne pas suivre le lien ni lui transmettre de valeur. Pour un lien sponsorisé ou un lien dont vous ne vous portez pas garant. | Désactivé |
| Ouvrir dans un nouvel onglet | Ouvre la destination dans un nouvel onglet. Disponible avec l’ouverture Classique (dans l’onglet du navigateur) et sans Masquer le lien aux moteurs de recherche. | Désactivé |
- Une fois la destination choisie, le champ devient une pastille avec le titre du contenu et deux boutons, Modifier et Retirer le lien. Les deux effacent la destination : choisissez-en une autre.
- Un lien vers une page de votre site est gardé par l’identifiant de la page : renommez-la ou changez son adresse, le lien suit.
- Une destination vers une composition ou un fichier de la médiathèque ne s’ouvre qu’en surimpression. Classique (dans l’onglet du navigateur) disparaît, Masquer le lien aux moteurs de recherche et Nofollow restent activés et Ouvrir dans un nouvel onglet est désactivé.
- Un lien en nouvel onglet porte une mention invisible, lue par les lecteurs d’écran : « s’ouvre dans un nouvel onglet ». Ne l’écrivez pas dans le libellé : elle serait lue deux fois.
Le menu déroulant
Le bloc Menu déroulant de navigation crée deux blocs verrouillés ensemble : un Lien de navigation pour le titre et un Panneau déroulant pour le contenu. Le panneau accepte des liens, des boutons et d’autres menus déroulants. Dans l’éditeur, cliquez sur le titre du sous-menu pour afficher son panneau et le remplir.
Pour régler le symbole, sélectionnez le menu déroulant (sélectionnez le titre puis remontez au bloc parent) et ouvrez son panneau Symbole.
| Réglage | Effet | Valeur par défaut |
|---|---|---|
| Afficher le symbole | Affiche le symbole à côté du titre. | Activé |
| Style du symbole | Le + qui pivote pour former un ×, le + qui devient −, le chevron qui bascule de ↓ à ↑ ou le chevron qui pivote de → à ↓. | Le chevron qui bascule de ↓ à ↑ |
| Cercle autour du symbole | Entoure le symbole d’un cercle. | Désactivé |
| Position du symbole | Gauche ou Droite du titre. | Droite |
Le symbole fait partie du lien : il prend sa couleur et change avec lui au survol. Pour un visiteur qui demande moins de mouvement, il se retourne d’un coup.
Le panneau déroulant
Sélectionnez le Panneau déroulant, onglet Réglages, panneau Réglages du menu déroulant. Le réglage Largeur propose Classique, la largeur naturelle du panneau, ou Pleine largeur, toute la largeur disponible. Classique est la valeur par défaut.
Le panneau porte le style enregistré Panneau déroulant : le fond de la page, des coins arrondis, une ombre légère, 8 px d’espace intérieur et un fondu à l’ouverture. Il est placé sous son lien et par-dessus la page, en Position Absolue avec un Plan (z-index) de 1000 (Régler la taille, les bordures et les effets).
Ouvrir les sous-menus au clic
Un grand sous-menu, sur toute la largeur de la page, se traverse mal au survol. Sélectionnez alors le bloc Navigation et réglez Ouvrir les sous-menus sur Au clic.
| Comportement | Au survol | Au clic |
|---|---|---|
| Ouverture | Le pointeur sur le titre. | Un clic sur le titre. |
| Fermeture | Le pointeur qui quitte le sous-menu, après un court instant. | Un nouveau clic sur le titre, un lien suivi, un clic ailleurs, Échap ou le focus qui quitte le sous-menu. |
| Le titre ouvert | Son style habituel. | Son état Actif. |
| Le lien du titre | Le titre peut mener à une page. | Le titre ouvre le sous-menu et ne mène plus à une page. |
Au clic, le panneau Lien du titre affiche « En mode clic, le titre ouvre le sous-menu : mettez le lien de la page dans le panneau ». Une adresse déjà saisie sur le titre est gardée et revient si vous repassez Au survol.
Les liens d’un type de contenu
Le bloc Liens d’un type de contenu affiche un lien vers chaque contenu publié d’un type, regroupés sous leur parent. Un contenu ajouté ou dépublié met la liste à jour sans que vous y touchiez. Tapez liste dans la recherche des blocs pour le trouver.
Tant qu’aucun type n’est choisi, le bloc affiche « Choisissez un type de contenu dans les réglages du bloc ». Un type sans contenu publié affiche « Aucune entrée publiée pour ce type de contenu ».
| Réglage | Effet | Valeur par défaut |
|---|---|---|
| Type de contenu | Le type à lister. Seuls les types affichables sur le site sont proposés. | Choisir un type de contenu |
| Trier par | Alphabétique, Identifiant ou Date de publication. | Alphabétique |
| Ordre | Croissant ou Décroissant. | Croissant |
| Afficher les enfants | Range les contenus sous leur parent, en dépliants. Désactivé, tous les contenus sont listés à plat. | Activé |
| Enfants maximum par élément | Le nombre d’enfants affichés sous chaque parent. 0 signifie sans limite. Avec Afficher les enfants. | 0 |
Le panneau Réglages de l’accordéon règle le dépliage des parents :
- Mode d’ouverture, Un à la fois parmi les parents d’un même niveau, ou Multiple ;
- Tous ouverts par défaut ;
- Ne peut pas être fermé, qui garde tous les parents dépliés sans que le visiteur puisse les replier, et masque les autres réglages du panneau ;
- le style, le cercle et la position du symbole.
Le symbole ne se masque pas : sur téléphone, sans survol, il est le seul repère d’un parent dépliable. Avec Ne peut pas être fermé, rien ne se replie et le symbole disparaît.
Le panneau Affichage de la liste règle le Retrait (px) des niveaux imbriqués : vide, il vaut les 40 px du navigateur. Il propose un Style de liste par niveau pour les trois premiers niveaux. La Numérotation imbriquée (1, 1.1, 1.1.1) est proposée quand tous les niveaux sont numérotés.
Habiller l’entrée de lien
La liste contient un seul bloc Entrée de lien, qui habille chaque contenu listé, parent comme enfant. Dans l’aperçu, cliquez sur n’importe quelle entrée : l’entrée de lien se sélectionne et les autres reprennent son habillage à mesure que vous le réglez. Ses états sont Par défaut, Survol, Focus et Actif.
L’état Actif habille l’entrée de la page en cours de lecture. Elle porte le style Entrée de lien : un soulignement au survol et au focus, l’entrée de la page lue en couleur principale et en gras. Les parents de la page lue restent dépliés. Même dans un menu burger, un lecteur d’écran annonce l’entrée comme la page courante.
Habiller les menus
La partie Menu du catalogue de design donne une allure aux liens de menu et aux sous-menus de tout le site : Simple, Souligné au survol, Barre active ou Pastilles (Adopter un design du catalogue). Pour une couleur propre aux liens de menu, réglez-la sur un lien puis mettez à jour le style Lien de menu (Enregistrer le style d’un bloc).
Les liens de navigation, les panneaux déroulants et les boutons reprennent la couleur et la typographie de la navigation. Vous pouvez leur en donner d’autres (Colorer un bloc et Mettre en forme un texte).
Sur téléphone
Sur les appareils cochés dans Menu burger sur, les entrées se replient derrière le burger, qui ouvre votre composition. Sur les autres, la navigation reste déployée. Un panneau déroulant qui manque de place sur la droite de l’écran s’ouvre vers l’intérieur.
Accessibilité
Les sous-menus s’ouvrent au clavier, selon le contenu de leur titre :
| Le titre du sous-menu | Ouverture |
|---|---|
| Un lien, avec une destination | Le focus : arriver sur le titre avec Tab déroule le sous-menu. Entrée suit le lien. |
| Un libellé sans destination, ou tout titre d’une navigation au clic | Entrée ou Espace, comme un bouton. |
Échapreferme le sous-menu et rend le focus à son titre. Dans un sous-menu imbriqué, il ne referme que le niveau où se trouve le focus.- Quitter le sous-menu au clavier le referme. Un lecteur d’écran annonce le titre déplié ou replié.
- Le burger est un vrai lien, annoncé Ouvrir le menu. Le panneau qu’il ouvre s’annonce comme une fenêtre, reçoit le focus et met la page du dessous en sommeil.
Échaple referme et rend le focus au burger. Le focus ne boucle pas à l’intérieur du panneau. - Quand une page porte deux menus, donnez à chacun un Nom de la région. Si l’un n’en a pas, le panneau Accessibilité de l’éditeur le signale.