Comment créer un menu de navigation vertical dans WordPress (5 manières faciles) 

Si votre site WordPress grandit et que votre navigation supérieure devient encombrée, un menu de navigation vertical est l'une des solutions les plus simples. Je l'ai vu fonctionner pour les boutiques de commerce électronique avec de nombreuses catégories de produits, les sites de documentation et les sites d'adhésion qui nécessitent une mise en page structurée de la barre latérale.

Dans ce guide, je vais vous montrer 5 façons d'ajouter un menu de navigation vertical à WordPress sans écrire une seule ligne de code.

Qu'est-ce qu'une barre de navigation verticale dans WordPress ?

Une barre de navigation verticale dans WordPress est un menu de site qui affiche les liens dans une colonne empilée au lieu d'une rangée horizontale standard. Elle se trouve généralement dans une barre latérale gauche, bien que vous puissiez la placer n'importe où où votre thème ou votre constructeur de page le prend en charge.

Les utilisateurs de WordPress en ajoutent une pour libérer de l'espace dans l'en-tête, améliorer la lisibilité des sites riches en contenu et correspondre aux conceptions qui bénéficient d'une disposition de navigation latérale plus structurée.

Quand utiliser une barre de navigation verticale dans WordPress ?

Un menu de navigation vertical est le plus logique lorsque votre site a beaucoup à naviguer et que l'en-tête manque d'espace. Il transforme l'espace de la barre latérale en un menu de navigation latéral clair et lisible au lieu de tout entasser dans une barre supérieure.

C'est particulièrement utile pour les sites de commerce électronique avec 10 catégories de produits ou plus, où les acheteurs doivent naviguer parmi de nombreuses options sans encombrer l'en-tête. Les sites de documentation et de base de connaissances l'utilisent pour la même raison, tout comme les sites d'adhésion qui s'appuient sur un menu de barre latérale vertical pour regrouper les liens du tableau de bord par section.

Cela dit, un menu de navigation latéral vertical n'est pas toujours le bon choix. Les sites d'une seule page, les sites avec moins de 6 éléments de navigation et les conceptions axées sur le mobile sont mieux servis par un menu horizontal standard.

Comment créer une navigation verticale avec SeedProd

Créer un menu de navigation vertical dans WordPress est un jeu d'enfant avec SeedProd, le constructeur de sites Web WordPress par glisser-déposer.

Avec le constructeur par glisser-déposer de SeedProd, vous pouvez créer des thèmes WordPress personnalisés et des pages Web flexibles sans écrire de code PHP, Jquery, Javascript, HTML & CSS. De plus, son bloc Menu de navigation inclut la navigation verticale intégrée.

Tout d'abord, vous devrez installer et activer le plugin SeedProd. Si vous avez besoin d'aide, vous pouvez consulter notre documentation sur l'installation de SeedProd Pro.

Remarque : Avec la version gratuite de SeedProd, vous pouvez ajouter une barre de navigation verticale à des pages individuelles. Cependant, nous utiliserons SeedProd Pro pour ce guide afin d'ajouter une barre de menu à nos modèles de thèmes WordPress.

Après avoir activé le plugin et saisi votre clé de licence, vous êtes prêt à créer un thème WordPress personnalisé.

Création d'un thème WordPress personnalisé

Pour créer votre thème, accédez à la page SeedProd » Constructeur de thèmes depuis votre tableau de bord WordPress. Sur cette page, vous pouvez choisir un thème pré-conçu comme point de départ.

Il remplacera votre thème existant par un design de site Web réactif personnalisé de votre choix. Pour ce faire, cliquez sur le bouton Kits de modèles de thèmes.

Vous verrez alors la bibliothèque de thèmes avec des designs pour différentes niches de sites Web. Cliquer sur le menu déroulant vous permet de les filtrer par popularité et par type.

Parcourez-les, puis cliquez sur l'icône de coche sur n'importe quel design pour l'importer.

Lorsque vous importez un design, SeedProd générera les modèles qui composent votre thème. À partir de là, vous pouvez modifier chaque modèle et personnaliser le design selon vos besoins.

Pour toutes les étapes, consultez notre guide sur comment créer un thème WordPress personnalisé.

Ajouter une barre de navigation verticale à vos modèles

Vous pouvez utiliser SeedProd pour ajouter une barre de navigation verticale à n'importe lequel de vos modèles de thèmes. Pour ce guide, nous ajouterons un menu au modèle « Page de blog ».

Pour ce faire, placez votre curseur sur le modèle et cliquez sur le lien « Modifier le design ».

Cela ouvre le constructeur de pages par glisser-déposer, avec un aperçu en direct à droite et une barre latérale de blocs à gauche.

Maintenant, faites défiler la barre latérale des blocs et recherchez le bloc Menu de navigation. Une fois que vous l'avez trouvé, faites-le glisser à l'endroit où vous souhaitez afficher votre menu de navigation, comme la barre latérale.

Par défaut, le Menu de navigation n'affichera qu'un seul élément de menu « À propos ». Vous pouvez le modifier dans les paramètres du menu en cliquant sur le bloc. Cela affichera les paramètres dans la barre latérale gauche.

Au début, le type de menu « Simple » est activé, ce qui vous permet de créer votre propre menu de navigation.

Pour ce guide, nous sélectionnerons le type « Menu WordPress », qui vous permet d'utiliser votre menu de navigation WordPress existant.

L'étape suivante consiste à rendre la barre verticale au lieu d'une barre de navigation horizontale. Vous pouvez le faire en cliquant sur l'onglet Avancé dans les paramètres du bloc et en sélectionnant la disposition de liste « Verticale ».

Dans le même panneau, vous pouvez personnaliser les couleurs du menu, la typographie, la couleur d'arrière-plan, le réglage de l'alignement du texte, la décoration du texte, et plus encore.

Lorsque vous êtes satisfait de votre menu, cliquez sur le bouton Enregistrer pour sauvegarder vos modifications. Vous pouvez répéter ces étapes pour chaque modèle nécessitant une navigation verticale.

4 autres façons de créer une navigation verticale dans WordPress

Créer une barre de navigation verticale avec SeedProd est un excellent choix si vous utilisez un plugin de création de thème. Mais que faire si vous voulez utiliser les outils déjà présents sur votre site web ?

Ci-dessous, vous trouverez quatre autres méthodes pour ajouter une navigation verticale à WordPress.

Quels thèmes WordPress incluent la prise en charge de la navigation verticale ?

Une autre façon d'ajouter une navigation verticale à votre site est de choisir un thème WordPress qui la prend en charge. De nombreux thèmes WordPress ont une prise en charge intégrée des barres de navigation verticales, ce qui vous fera gagner beaucoup de temps.

L'avantage ici est la simplicité. Choisissez un thème qui correspond à votre esthétique et laissez-le faire le gros du travail pour vous. Cela pourrait être la solution parfaite si vous n'êtes pas un expert en technologie ou si vous manquez de temps.

Cependant, sachez que tous les thèmes n'offrent pas cette fonctionnalité. Lors du choix de votre thème, consultez ses paramètres ou sa documentation pour voir s'il inclut une barre de navigation verticale.

Par exemple, le thème par défaut Twenty-Twenty-One n'inclut pas de navigation verticale. Pendant ce temps, le thème Astra prend en charge un menu hamburger hors écran et un menu de pied de page que vous pouvez afficher empilé ou en ligne.

Pour obtenir de l'aide sur la modification de votre menu, consultez notre guide sur comment modifier la barre de navigation dans WordPress.

Ajouter une barre de navigation verticale avec l'éditeur complet de site

De nombreux thèmes WordPress sont compatibles avec l'éditeur complet de site WordPress (FSE). Ils sont connus sous le nom de thèmes basés sur des blocs et vous permettent de personnaliser votre thème visuellement.

Pour ce faire, accédez à Apparence » Éditeur depuis votre administration WordPress. De là, cliquez sur le menu de navigation en haut de l'en-tête de votre site web.

Après avoir cliqué sur le menu, vous verrez plusieurs options dans le panneau de navigation latéral. Par exemple, si vous cliquez sur l'onglet Paramètres, il existe une option pour changer l'orientation des éléments de la liste du menu.

Cliquez sur la flèche vers le bas pour faire passer le menu à la navigation verticale.

Cliquez maintenant sur le bouton Enregistrer pour sauvegarder vos modifications.

Ajouter un menu de navigation vertical à la barre latérale de WordPress

Vous pouvez facilement ajouter un menu de navigation latéral à votre site à l'aide de widgets si vous ne souhaitez pas modifier votre thème WordPress. Cette méthode est idéale si vous n'avez pas de thème basé sur des blocs installé.

Tout d'abord, assurez-vous d'avoir configuré un menu de navigation. Ensuite, allez dans Apparence » Widgets depuis votre tableau de bord WordPress.

À partir de là, cliquez sur le bouton (+) plus et recherchez le widget Menu de navigation.

Après avoir cliqué pour l'ajouter à votre barre latérale, vous pouvez donner un titre au menu et choisir quel menu afficher.

Enregistrez maintenant vos modifications et prévisualisez votre site pour voir le menu de navigation latéral vertical en action.

Créer une barre de navigation verticale pour les articles et les pages

Cette approche fonctionne bien pour les longs articles de tutoriel ou les pages de documentation où vous souhaitez une navigation par section dans l'article à côté du contenu principal. Elle utilise le même bloc de navigation que la méthode de la barre latérale, mais placé directement à l'intérieur du contenu de l'article ou de la page.

Tout d'abord, modifiez ou créez un nouvel article ou une nouvelle page. Ensuite, ajoutez le bloc de navigation.

Dans la barre latérale droite, cliquez sur la flèche vers le bas pour rendre le menu vertical, puis enregistrez vos modifications.

Lorsque vous affichez l'article ou la page, vous verrez une nouvelle barre de navigation verticale.

FAQ sur les barres de navigation verticales

Qu'est-ce qu'une barre de navigation verticale ?

Une barre de navigation verticale est un menu de site qui affiche les liens dans une colonne empilée au lieu d'une rangée horizontale. Elle apparaît généralement dans une barre latérale gauche et convient bien aux sites comportant de nombreuses pages ou catégories à naviguer. La plupart des sites WordPress qui en ajoutent une le font pour libérer de l'espace dans l'en-tête et faciliter la lecture du menu.

Quand utiliser une barre de navigation verticale dans WordPress ?

Utilisez un menu de navigation vertical lorsque votre site comporte plus de 6 ou 7 éléments de navigation de premier niveau, ou lorsque votre public a besoin de parcourir de nombreuses catégories à la fois. C'est une bonne option pour les boutiques e-commerce, les bases de connaissances et les sites d'adhésion. Évitez-le sur les sites simples ou les conceptions axées sur le mobile où l'espace de la barre latérale est limité.

Quelle est la différence entre la navigation verticale et horizontale ?

La navigation horizontale affiche les liens du menu dans une seule rangée en haut de la page. La navigation verticale empile les liens dans une colonne, généralement dans une barre latérale. Les menus horizontaux conviennent aux sites simples avec peu de pages ; les menus verticaux gèrent de plus grandes listes de liens sans surcharger l'en-tête.

Comment gérer la réactivité mobile pour une barre de navigation verticale ?

La plupart des outils WordPress qui ajoutent une navigation verticale, y compris SeedProd, gèrent automatiquement la réactivité mobile. Pour les configurations personnalisées, utilisez un menu rétractable ou de type hamburger sur les petits écrans afin que la navigation verticale ne prenne pas tout l'espace de visualisation. Testez toujours sur un appareil mobile réel avant de publier.

Quelle est la largeur idéale pour une barre de navigation verticale ?

Une largeur d'environ 200 à 300 pixels convient à la plupart des sites. C'est suffisamment large pour afficher les étiquettes complètes du menu sans les tronquer et suffisamment étroit pour laisser de la place à votre contenu principal. Vérifiez toujours que le menu reste lisible à une résolution de tablette de 768 pixels, pas seulement sur ordinateur.

Créez votre prochain menu de navigation vertical

Ceci conclut notre guide sur la création d'un menu de navigation vertical dans WordPress. À vous maintenant de construire un système de navigation plus convivial pour votre site web.

Que vous choisissiez SeedProd ou l'une des autres méthodes, l'objectif est le même. Un bon système de navigation rend votre site plus facile à utiliser, et cela en vaut toujours la peine.

Bonne conception !

Prêt à construire votre site ? Obtenez SeedProd et ajoutez une navigation verticale à n'importe quel modèle en quelques minutes.

Pour plus de conseils de navigation, consultez le tutoriel suivant :

• Comment personnaliser les styles de menu WordPress
• Comment modifier les menus mobiles dans WordPress
• La navigation des pages de destination est morte : voici pourquoi
• Comment créer une page de destination sans navigation
• Comment ajouter une barre latérale différente pour différentes pages dans WordPress

Merci de votre lecture ! Nous serions ravis d'entendre vos réflexions, alors n'hésitez pas à rejoindre la conversation sur YouTube, X et Facebook pour plus de conseils et de contenu utiles pour développer votre entreprise.