# Navigation

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](https://lovelyrender.com/fr/documentation/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](https://lovelyrender.com/fr/documentation/compositions/)).

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](https://lovelyrender.com/fr/documentation/bloc-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](https://lovelyrender.com/fr/documentation/bloc-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** |

![Les réglages du bloc Navigation : le champ Nom de la région, puis le panneau Réglages de la navigation avec Ouvrir les sous-menus sur Au survol, les cases Mobile, Tablette et Ordinateur de Menu burger sur, puis Composition à ouvrir sur Aucune.](https://static.lovelyrender.com/uploads/2026/10/916-doc-blocs2-navigation.png)

## 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.

1. 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.
2. Sélectionnez le bloc **Navigation**, onglet **Réglages**.
3. Sous **Menu burger sur**, cochez les appareils, par exemple **Mobile** et **Tablette**.
4. Dans **Composition à ouvrir**, choisissez votre composition, puis le **Mode d’ouverture**.
5. 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](https://lovelyrender.com/fr/documentation/modales/)). 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](https://lovelyrender.com/fr/documentation/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é |

![Le panneau Lien d’un lien de navigation : le champ Cherchez ou collez une adresse, Masquer le lien aux moteurs de recherche, Ouverture du lien sur Classique (dans l’onglet du navigateur), le champ Nom accessible et son aide, Nofollow et Ouvrir dans un nouvel onglet.](https://static.lovelyrender.com/uploads/2026/10/919-doc-blocs2-lien.png)

- 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.

**Conseil :** Pour descendre vers une section d’une page, collez l’adresse de la page suivie de l’ancre, `https://mon-site.fr/offre#tarifs`. Sur une page unique, l’ancre seule suffit : `#tarifs`. L’ancre d’un bloc Titre s’affiche dans son panneau **Avancé**, champ **Ancre HTML**.

## 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](https://lovelyrender.com/fr/documentation/taille-bordures-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 la liste du bloc Liens d’un type de contenu : Type de contenu sur Choisir un type de contenu, Trier par Alphabétique, Ordre Croissant, Afficher les enfants activé et Enfants maximum par élément à 0.](https://static.lovelyrender.com/uploads/2026/10/940-doc-blocs2-liens-type.png)

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.

**Conseil :** Pour le menu latéral d’une documentation, réglez la liste sur le type « Documentation » avec ses enfants. Sur chaque article, le lecteur voit sa rubrique dépliée et l’article qu’il lit en évidence.

## 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](https://lovelyrender.com/fr/documentation/catalogue-de-design/)). 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](https://lovelyrender.com/fr/documentation/styles-enregistres/)).

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](https://lovelyrender.com/fr/documentation/couleurs-d-un-bloc/) et [Mettre en forme un texte](https://lovelyrender.com/fr/documentation/typographie/)).

## 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. |

- `Échap` referme 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. `Échap` le 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.

## Voir aussi

- [Écrire une fois l’en-tête, le menu et le pied de page](https://lovelyrender.com/fr/documentation/compositions/)
- [Ouvrir une modale ou un panneau latéral](https://lovelyrender.com/fr/documentation/modales/)
- [Bouton](https://lovelyrender.com/fr/documentation/bloc-bouton/)
- [Fil d’Ariane](https://lovelyrender.com/fr/documentation/bloc-fil-d-ariane/)