# Navigation entre contenus Le bloc **Navigation entre contenus** pose un lien vers une destination calculée : le contenu précédent ou suivant, la page parente, une archive ou la page d’un terme. Cette page décrit ses cibles, ses réglages d’ouverture, son comportement sans cible et le bloc qui affiche le titre de la cible. Un exemple pose une barre entre les articles d’un blog. ## Ajouter le bloc Insérez le bloc **Navigation entre contenus** ([Ajouter un bloc](https://lovelyrender.com/fr/documentation/ajouter-un-bloc/)), ou tapez `précédent` ou `suivant` dans la recherche des blocs. Sa destination se calcule à l’affichage d’après le contenu affiché. Sa place habituelle est le gabarit d’un type de contenu, où une seule barre « Précédent | Suivant » sert tous les contenus du type ([Décider de l’apparence avec les gabarits](https://lovelyrender.com/fr/documentation/gabarits/)). Posé dans le gabarit d’une modale ou d’un panneau latéral, il se réfère au contenu affiché dans cette surimpression. ## Composer le lien Le bloc est un conteneur : tout ce que vous y placez forme la zone cliquable. Il arrive avec un bloc **Titre de la cible de navigation**, qui affiche le nom de la cible. Ajoutez à côté une icône, un texte comme « Article précédent » ou un média. - Le bloc est en disposition **Flex**, pour que l’icône et le titre se placent sur une ligne. Sa barre d’outils propose **Bloc**, **Flex** et **Grille**, réglés comme sur un [Conteneur](https://lovelyrender.com/fr/documentation/bloc-conteneur/). - Les blocs qui affichent les données d’un contenu montrent celles du contenu visé. Ce sont l’**Image mise en avant**, le **Média du contenu**, le **Champ de contenu** et la **Donnée** dans une phrase. Dans l’éditeur, le média s’affiche en exemple avec la dernière image de votre médiathèque. - Une archive n’a ni média ni champ : seuls ces blocs disparaissent du lien. Un terme a les siens et le lien vers sa page les montre. ## Régler la cible Sélectionnez le bloc, onglet **Réglages**, panneau **Navigation**. | Réglage | Effet | Valeur par défaut | | --- | --- | --- | | **Cible** | La destination du lien, parmi cinq choix décrits dans le tableau Les cinq cibles. | **Contenu suivant** | | **Rester dans le même terme** | Limite la recherche du contenu voisin aux contenus classés sous l’un des termes du contenu affiché. Avec **Contenu précédent** et **Contenu suivant**. | Désactivé | | **Catégorie** | La catégorie à suivre, sous le nom du champ qui relie le type de contenu à cette catégorie, « Rubrique » par exemple. Avec **Page du terme**, ou avec **Rester dans le même terme** activé. | **La première catégorie du type** | | **Ouverture du lien** | **Dans l’onglet du navigateur**, **Dans une modale**, **Modale en bas à gauche**, **Modale en bas au centre**, **Modale en bas à droite** ou **Sur le côté droit**. Les surimpressions ne sont proposées que pour **Contenu précédent**, **Contenu suivant** et **Page parente**. | **Dans l’onglet du navigateur** | | **Nofollow** | Demande aux moteurs de ne pas suivre le lien. Avec l’ouverture **Dans l’onglet du navigateur**. | Désactivé | | **Ouvrir dans un nouvel onglet** | Ouvre la destination dans un nouvel onglet. Avec l’ouverture **Dans l’onglet du navigateur**. | Désactivé | | **Quand il n’y a pas de cible** | **Masquer le bloc** ou **Afficher désactivé**. | **Masquer le bloc** | ![Le panneau Navigation du bloc Navigation entre contenus : Cible sur Contenu suivant, Rester dans le même terme désactivé, Ouverture du lien sur Dans l’onglet du navigateur, Nofollow, Ouvrir dans un nouvel onglet et Quand il n’y a pas de cible sur Masquer le bloc.](https://static.lovelyrender.com/uploads/2026/10/923-doc-blocs2-navigation-contextuelle.png) | Cible | Le lien mène à | Le titre affiché | Pas de cible quand | | --- | --- | --- | --- | | **Contenu précédent** | Le contenu publié juste avant, dans le même type. | Son titre. | Le contenu affiché est le plus ancien du type. | | **Contenu suivant** | Le contenu publié juste après, dans le même type. | Son titre. | Le contenu affiché est le plus récent du type. | | **Page parente** | La page parente. | Son titre. | Le contenu n’a pas de parent, ou son parent n’est pas publié. | | **Archive de ce type** | La page qui liste tous les contenus du type. | Le nom du type. | Le type n’a pas de page de liste. | | **Page du terme** | La page du terme sous lequel le contenu est classé, dans la catégorie choisie sous **Catégorie**. | Le titre du terme. | Le contenu n’est classé sous aucun terme de cette catégorie, le terme n’est pas publié, ou la catégorie ne donne pas de page à ses termes. | - Précédent et suivant se calculent sur la date de publication, dans le même type de contenu et la même langue. Il n’y a pas d’autre ordre. - Pour **Page du terme**, un contenu classé sous plusieurs termes de la même catégorie mène au premier de sa liste. - Passer d’une cible qui accepte une modale à une archive ou à la page d’un terme remet l’ouverture sur **Dans l’onglet du navigateur**. ## Rester dans le même terme Avec **Rester dans le même terme**, le contenu précédent et le suivant se cherchent parmi les contenus classés sous au moins un des termes du contenu affiché, dans la catégorie choisie sous **Catégorie**. Un contenu classé sous aucun terme de cette catégorie n’a ni précédent ni suivant. La liste **Catégorie** montre les champs qui relient le type de contenu du gabarit à une catégorie. Si le type n’en a aucun, le panneau affiche « Ce type de contenu n’est classé dans aucune catégorie. » à sa place : ajoutez d’abord un champ de référence vers une catégorie ([Classer avec une catégorie](https://lovelyrender.com/fr/documentation/classer-avec-une-categorie/)). ## L’ouverture du lien Une ouverture en modale ou sur le côté affiche le contenu visé par-dessus la page, sans la quitter. Chaque mode d’ouverture peut avoir son gabarit, sans en-tête ni pied de page par exemple ([Ouvrir une modale ou un panneau latéral](https://lovelyrender.com/fr/documentation/modales/)). Ces ouvertures ne sont pas des liens que les moteurs suivent : l’adresse appelée est encodée. **Nofollow** et **Ouvrir dans un nouvel onglet** disparaissent du panneau. Le contenu reste lu par les moteurs à sa propre adresse. ## Quand la cible n’existe pas | Choix | Résultat | | --- | --- | | **Masquer le bloc** | Le bloc disparaît de la page. | | **Afficher désactivé** | Le bloc reste visible mais n’est plus cliquable. Il est annoncé désactivé aux technologies d’assistance. | Avec **Afficher désactivé**, le titre de la cible se vide. Les médias et les champs du contenu visé disparaissent. Prévoyez dans le lien un texte ou une icône qui reste. Le bloc garde son apparence, effet de survol compris : l’onglet **Styles** n’a pas d’état pour un lien désactivé. ## Le titre de la cible Le bloc **Titre de la cible de navigation** affiche le nom de la cible. Il n’a pas de réglage et suit la cible du bloc parent. Il n’est pas lui-même un lien : c’est le bloc parent qui l’est. Sur un vrai contenu, l’éditeur affiche le titre réel de la cible. Quand la cible dépend d’un terme, il le calcule d’après le contenu enregistré. Dans un gabarit, il n’y a pas de contenu affiché : l’éditeur montre un texte d’exemple. | Cible | Texte d’exemple | | --- | --- | | **Contenu précédent** | Titre du contenu précédent | | **Contenu suivant** | Titre du contenu suivant | | **Page parente** | Titre de la page parente | | **Archive de ce type** | Titre de l’archive | | **Page du terme** | Nom du terme | ## Habiller le lien Le bloc a trois états à habiller : **Par défaut**, **Survol** et **Focus**. Le titre de la cible en a deux, **Par défaut** et **Survol**. L’état **Focus** montre au visiteur au clavier où il se trouve : habillez-le. Les couleurs, les images de fond, la typographie et les animations se règlent comme sur tout bloc : voir [Colorer un bloc](https://lovelyrender.com/fr/documentation/couleurs-d-un-bloc/), [Poser un arrière-plan](https://lovelyrender.com/fr/documentation/arriere-plans/), [Mettre en forme un texte](https://lovelyrender.com/fr/documentation/typographie/) et [Animer un bloc](https://lovelyrender.com/fr/documentation/animations/). ## Sur téléphone La disposition se règle écran par écran, comme sur un conteneur. Une barre « Précédent | Suivant » en deux colonnes sur ordinateur peut s’empiler sur téléphone. ## Accessibilité - Le bloc n’a pas de champ de nom accessible : un lecteur d’écran annonce le texte écrit dans le lien. Un lien fait d’une seule flèche n’a pas de nom. Gardez le **Titre de la cible de navigation** ou un libellé visible. - Un lien en nouvel onglet porte une mention invisible, lue par les lecteurs d’écran : « s’ouvre dans un nouvel onglet ». ## Enchaîner les articles d’un blog Cet exemple pose sous chaque article de blog un lien vers l’article précédent et un lien vers le suivant. 1. Ouvrez le gabarit des articles et ajoutez un Conteneur en deux colonnes sous le contenu. 2. Dans la première colonne, insérez un bloc **Navigation entre contenus** et choisissez la **Cible** **Contenu précédent**. 3. Ajoutez devant le titre de la cible une icône de flèche vers la gauche et le texte « Article précédent ». 4. Dans la seconde colonne, insérez un second bloc, réglé sur **Contenu suivant**, avec une flèche vers la droite. 5. Si vos articles sont classés par rubrique, activez **Rester dans le même terme** sur les deux blocs. 6. Publiez le gabarit. Le lecteur qui arrive au bout d’un article enchaîne sur le suivant, dans sa rubrique si vous l’avez demandé. Sur l’article le plus récent, le lien suivant disparaît. ## Voir aussi - [Décider de l’apparence avec les gabarits](https://lovelyrender.com/fr/documentation/gabarits/) - [Navigation](https://lovelyrender.com/fr/documentation/bloc-navigation/) - [Fil d’Ariane](https://lovelyrender.com/fr/documentation/bloc-fil-d-ariane/) - [Classer avec une catégorie](https://lovelyrender.com/fr/documentation/classer-avec-une-categorie/)