Bloc Navigation

Retour à la liste des blocs

Le bloc Navigation est un bloc avancé disponible depuis WordPress 5.9 qui vous offre la possibilité de créer ou modifier votre menu de navigation, aussi bien en termes de structure que d’apparence. Ce bloc peut être utilisé avec un thème basé sur des blocs ou un thème qui prend en charge l’édition des modèles.

Il vous sera possible de réutiliser un menu créé avec le bloc Navigation partout où vous le désirez, dans un nouveau modèle de page ou même avec un autre thème.

Afin de connaître la procédure à suivre pour ajouter un bloc, veuillez consulter l’article Ajouter un nouveau bloc.

Fonctionnement général du bloc

Pour afficher un menu de navigation dans votre site, il vous faut utiliser un bloc Navigation auquel vous associez un menu.
Vous avez la possibilité d’intégrer dans vos pages, plusieurs blocs Navigation, contenant chacun un menu différent. Par exemple, un bloc Navigation dans l’entête proposera un menu de navigation dans les pages principales du site, un autre bloc Navigation dans le pied de page permettra d’accéder aux pages secondaires du site ou à des liens externes au site, et un bloc Navigation en colonne latérale permettra d’accéder aux différentes catégories d’articles.

Lorsque vous ajoutez un bloc Navigation, que ce soit dans un modèle de page ou dans une publication, un menu y est intégré automatiquement et celui-ci correspond :

• au dernier menu créé, si vous avez déjà des menus enregistrés dans votre site ;
• ou à un menu créé automatiquement sous la forme d’un bloc Liste des pages (comprenant un lien vers chaque page du site), si aucun menu n’a encore été créé dans votre site.

Comme un bloc Navigation affiche le menu qui lui est assigné, si vous supprimez ce menu, le bloc Navigation affichera alors le message suivant : « Le menu de navigation a été supprimé ou n’est pas disponible. Créer un nouveau menu ? ». Notez que ce message ne sera pas affiché sur l’interface publique de votre site. Si vous décidez de ne pas créer de nouveau menu, vous pouvez alors supprimer le bloc Navigation.

Modifier les éléments du menu

Vous pouvez modifier le menu via l’onglet Vue en liste de la colonne latérale des réglages du bloc Navigation. Dans cet onglet Vue en liste, le menu est affiché avec les blocs enfants qui le composent.

Pour chacun de ces blocs, un menu Options (icône trois points superposés) est disponible au survol du bloc. Ce menu Options propose les commandes suivantes :

• Monter – Permet de monter l’élement de menu d’un cran vers le haut.
• Descendre – Permet de descendre l’élement de menu d’un cran vers le bas.
• Ajouter un lien de sous-menu – Saisissez une URL (interne ou externe) ou un terme de recherche, puis choisissez une publication du site dans la liste, ou sélectionnez directement dans la liste la publication souhaitée si elle y est présente. Cette commande n’est pas disponible pour les blocs incompatibles à la présence d’un sous-menu comme par exemple le bloc Logo du site. Elle transforme le bloc sélectionné en un bloc Sous-menu.
• Retirer [Nom de l’élément de menu] – Permet de supprimer l’élément de menu.

Pour modifier l’ordre des blocs du menu, vous pouvez aussi utiliser la fonctionnalité du glisser-déposer, dans l’onglet Vue en liste de la colonne latérale des réglages du bloc Navigation, ou encore dans la Vue en liste de l’éditeur.

Pour ajouter de nouveaux éléments de menu, sélectionnez le bloc Navigation, puis dans l’onglet Vue en liste de la colonne latérale des réglages, cliquez sur le bouton « + » situé sous la liste des blocs composant le menu, une fenêtre modale s’affiche vous proposant les blocs les plus utilisés dans les menus, tels que les blocs Lien de page, Lien personnalisé, Liste des pages, Lien de catégorie, etc. Vous pouvez aussi y effectuer une recherche, ou encore cliquer sur Tout parcourir pour accéder à la liste de tous les blocs via l’outil d’insertion.

Une autre méthode consiste à sélectionner le bloc dans l’éditeur puis à cliquer sur le bouton « + » (Ajouter un bloc). Lorsque vous cliquez sur ce bouton « + », une fenêtre modale vous propose de saisir soit un mot clé pour rechercher une page, soit directement une URL. Si vous cliquez sur + Ajouter un bloc, s’affiche une liste de blocs couramment utilisés pour créer un menu. En cliquant sur Tout parcourir, vous affichez l’outil d’insertion de blocs avec la liste de tous les blocs.

Voici une liste de blocs qui peuvent être ajoutés dans un menu :

• Boutons
• Espacement
• Lien personnalisé
• Lien d’article
• Lien de page
• Lien de catégorie
• Lien d’étiquette
• Sous-menu
• Lien vers l’accueil
• Liste des pages
• Recherche
• Icônes de réseaux sociaux
• Logo du site
• Titre du site
• Connexion-déconnexion

Chaque bloc vient avec son niveau de personnalisation, ses outils et réglages. Aussi vous disposerez, selon les blocs, d’outils différents. Par exemple, si vous insérez un bloc Icônes de réseaux sociaux, vous pourrez choisir lesquelles ajouter, puis leur justification, l’alignement horizontal et leur taille.

Dans le cas d’un menu composé d’un bloc Liste des pages (ajouté automatiquement), un message Modifier la liste des pages sera affiché lorsque vous cliquez sur un des éléments du menu. Ce message vous explique la nature des éléments qui composent le menu, c’est-à-dire une liste de pages synchronisées avec la liste des pages publiées sur votre site, et vous invite à cliquer sur le bouton Détacher afin de désynchroniser les éléments de cette liste et d’être en mesure de modifier (ou supprimer) individuellement chaque élément de menu. Le bloc Liste des pages est alors transformé en une liste de blocs Lien de page indépendants les uns des autres. Par contre, notez que lorsque vous publierez une nouvelle page, celle-ci ne sera plus ajoutée au menu.

Chaque bloc inséré dans un bloc Navigation peut être transformé en un autre bloc. Pour cela, sélectionnez le bloc puis cliquez sur son icône dans la barre d’outils puis dans le menu Transformer en qui s’affiche, cliquez sur le bloc souhaité, puis configurez-le. Cette option vous permet de construire rapidement un menu avec différents types de bloc, à partir par exemple d’un bloc Liste de pages désynchronisé en blocs Lien de page.

Gestion des menus

Il est tout à fait possible de gérer les menus à partir du bloc Navigation, que vous utilisiez un thème classique ou un thème basé sur des blocs.

Néanmoins, si vous utilisez un thème basé sur des blocs, il sera plus simple de gérer les menus depuis l’écran Navigation de l’éditeur de site puisque cet écran a été conçu pour créer et gérer les menus.

Si vous utilisez un thème classique, vous pouvez gérer les menus depuis l’écran Menus accessible via le Tableau de bord, menu Apparence, puis Menus, mais vous ne pourrez pas y voir les menus créés via le bloc Navigation.

Sélectionner un menu

Dans l’éditeur de blocs, si vous souhaitez sélectionner un autre menu à afficher dans un bloc Navigation :

• Cliquez sur le bloc Navigation pour le sélectionner.
• Dans l’onglet Vue en liste de la colonne latérale des réglages du bloc, cliquez sur le bouton Navigation (icône avec 3 points superposés) pour accéder au menu contextuel.
• Dans ce menu contextuel Menus, choisissez un autre menu en cliquant sur son nom, ou cliquez sur un menu à importer dans la liste Importer les menus classiques (cette option est présente uniquement si vous utilisez ou avez utilisé un thème classique).

Créer un menu

Pour créer un nouveau menu, à partir de l’éditeur de blocs :

• Ajoutez ou sélectionnez un bloc Navigation.
• Dans l’onglet Vue en liste de la colonne latérale des réglages du bloc, cliquez sur l’icône avec 3 points superposés pour accéder au menu contextuel, puis cliquez sur Créer un nouveau menu. Cela crée un nouveau menu vide. Le menu est nommé automatiquement avec le schéma suivant « Navigation » suivi d’un chiffre incrémenté à chaque nouveau menu créé.
• Cliquez sur l’icône « + » pour ajouter des blocs au menu.
• Cliquez sur le bouton Mise à jour puis sur le bouton Enregistrer si vous êtes dans l’éditeur de blocs pour valider les modifications effectuées.

Vous pouvez renommer le menu que vous venez de créer, via le champ Nom du menu présent dans l’onglet Avancé de la colonne des réglages du bloc Navigation.

Supprimer un menu

Si vous souhaitez supprimer un menu de navigation à partir de l’éditeur de blocs, sélectionner le bloc Navigation qui lui est associé puis dans la colonne latérale des réglages du bloc, développez la section Avancé. Cliquez ensuite sur le bouton Supprimer le menu. Confirmez dans la boîte de dialogue qui s’affiche. Noter que la suppression d’un menu est définitive.

Écran Menus de navigation

Il existe un écran Menus de navigation, accessible via l’onglet Avancé de la colonne des réglages du bloc Navigation, en cliquant sur le lien Gérer les menus.

Cet écran est transitoire et n’offre que peu de possibilités, vous avez en effet accès à trois options : Modifier, Modification rapide, Corbeille.

Si vous utilisez un thème classique, seule l’option Modification rapide fonctionne et vous permet de renommer votre menu. Pour mettre des menus à la corbeille, ou les supprimer depuis la corbeille, il faut utiliser les actions groupées.

Si vous utilisez un thème basé sur des blocs, l’option Modification rapide vous permet de renommer le menu, et l’option Modifier ouvre l’écran de modification du menu dans l’éditeur de site. Nous vous recommandons d’utiliser plutôt l’écran Navigation de l’éditeur de site qui offre beaucoup plus de possibilités pour gérer vos menus.

Utiliser un menu dans différents thèmes

Comme les menus sont enregistrés dans la base de données, vous serez en mesure de réutiliser un menu créé dans un thème basé sur des blocs dans un autre thème basé sur des blocs, ou un menu créé dans un thème classique dans un thème basé sur des blocs. Par contre, si vous passez d’un thème basé sur des blocs à un thème classique, vous ne serez plus en mesure de réutiliser les menus créés via le bloc Navigation.

Barre d’outils du bloc

Chaque bloc dispose d’une barre d’outils vous permettant de le manipuler directement dans l’éditeur. Parmi ces outils, on distingue des outils communs, présentés dans l’article Barre d’outils des blocs, et d’éventuels outils spécifiques, décrits ci-dessous. 

Notez que la barre d’outils du bloc est différente lorsque vous êtes dans l’éditeur de modèles ou l’éditeur de compositions : vous n’avez pas l’outil d’Alignement et vous disposez d’un outil Modifier qui permet d’afficher uniquement le bloc Navigation en mode focus pour le modifier plus facilement.

Modifier la justification des blocs

Cet outil offre quatre options :

• Justifier les blocs à gauche – Aligne l’ensemble des blocs et leurs contenus à gauche.
• Justifier les blocs au centre – Aligne l’ensemble des blocs et leurs contenus au centre. 
• Justifier les blocs à droite – Aligne l’ensemble des blocs et leurs contenus à droite.
• Répartir les blocs – Répartit équitablement tous les blocs dans l’espace disponible.

Réglages du bloc

Selon les blocs, divers réglages sont disponibles dans la colonne latérale des réglages. Parmi ceux-ci, on distingue les réglages communs (à une majorité de blocs) des réglages spécifiques, décrits ci-dessous.

Mise en page

Les réglages proposés ici permettent de contrôler le positionnement global du bloc Navigation :

• Justification – Ce réglage vous permet de justifier les éléments du bloc Navigation à gauche, au centre ou à droite. Vous pouvez également répartir équitablement les éléments sur toute la largeur disponible. Il correspond à l’outil Modifier la justification des blocs.
• Orientation – Ce réglage vous permet de passer d’une orientation verticale à une orientation horizontale pour tous les éléments du bloc Navigation. 
• Autoriser le passage sur plusieurs lignes – Il s’agit d’une option que vous pouvez activer ou désactiver et qui permet au bloc Navigation de déborder sur plusieurs lignes si l’espace est insuffisant.

Afficher

Actuellement, cette section vous permet de contrôler ce qui s’affiche pour le bloc Navigation en fonction de la taille de l’écran, ce qui permet d’utiliser un menu « responsive ».

Un bouton contenant une icône de menu (hamburger) et une icône fermer (croix) est présent et symbolise la mise en forme du bouton permettant d’accéder au menu superposé. En cliquant sur ce bouton, vous accédez à plus d’options :

• Afficher l’icône du bouton – Si l’option est cochée, le bouton contiendra des icônes, sinon le bouton contiendra du texte (« Menu » et « Fermer ») à la place des icônes.
• Dans la section Icône, vous pouvez sélectionner une des deux icônes disponibles : icône hamburger avec deux traits superposés ou trois traits superposés.

Les options de Menu superposé sont les suivantes :

• Désactivé – Cette option désactive l’affichage d’une icône de menu sur les écrans de petite taille. Les options concernant le bouton d’accès au menu superposé décrites ci-dessus ne sont alors pas disponibles.
• Mobile – Cela permet d’afficher une icône de menu lors de la consultation de votre site sur des écrans plus petits, icône sur laquelle on peut cliquer pour voir le menu complet. 
• Toujours – Cette option active l’affichage d’une icône de menu quelque soit la taille de l’écran. 

Par défaut, ce réglage est défini sur Mobile, ce qui signifie qu’une icône de menu (ou un texte « Menu ») s’affiche automatiquement sur les écrans de petite taille. Lorsque vous cliquez sur l’icône de menu ou sur le texte « Menu », un calque superposé s’ouvre et affiche l’intégralité de votre menu.

Si le menu contient des sous-menus, la section Sous-menus est affichée et vous disposez de deux options :

• Ouvrir en cliquant – Cette option permet l’ouverture du sous-menu en cliquant sur l’élément de menu (et non au survol qui est le fonctionnement par défaut). Lorsque cette option est sélectionnée, l’option Afficher la flèche ne peut plus être désactivée car une flèche est affichée par défaut.
• Afficher la flèche – Cette option permet d’indiquer la présence d’un sous-menu pour cet élément de menu. Si cette option est la seule cochée, le sous-menu s’affichera au survol de l’élément de menu.

Si aucune option n’est cochée (non recommandé), il y a rupture dans l’accessibilité car rien n’indique qu’il existe un sous-menu. Un message d’avertissement concernant l’accessibilité est alors affiché dans la colonne des réglages.

Avancé

L’onglet Avancé vous permet d’accéder aux réglages avancés des blocs.

Le bloc Navigation dispose de réglages avancés supplémentaires :

• Le champ Nom du menu dans lequel vous pouvez modifier le nom du menu.
• Le bouton Supprimer le menu qui permet de supprimer définitivement un menu.
• Un lien Gérer les menus permettant d’accéder à l’écran Menus de navigation décrit précédemment.

Traduit par Jenny Dupuy
Relu par Patrick Olivaud & Jb Audras
Dernière mise à jour le 3 juillet 2024

Contribuer à la documentation en français de WordPress