A well-structured navigation menu is essential for creating a positive user experience on your WordPress site.
Although horizontal menus are prevalent, vertical navigation menus provide a distinctive and effective method to organize your site’s content, particularly for websites with numerous pages or intricate structures.
These menus enhance accessibility by fitting seamlessly into your website’s sidebar and are easier to navigate on mobile devices.
In this article, we will guide you through the process of creating a vertical navigation menu in WordPress with ease.
What Is a Navigation Menu?
A navigation menu is a collection of links that directs users to key sections of a WordPress website. Typically, this menu appears as a horizontal bar of links at the top of each page.
Navigation menus provide structure to your site and assist visitors in finding the information they seek. You can include links to your most important pages, categories, topics, WordPress blog posts, and even custom links like your social media profiles.
While horizontal menus are commonly found at the top of websites, vertical navigation menus offer numerous benefits and applications.
A vertical navigation menu occupies less space on your webpage, making it easier to scan and navigate. It can be positioned in your sidebar, footer, or even as a pop-up, offering greater flexibility.
For instance, if you run an online store, a vertical navigation menu allows you to showcase numerous product categories and items without consuming excessive space.
Now, let’s explore various methods to create a vertical navigation menu in WordPress. This article will cover the following topics:
- Experiment with Different Menu Display Locations
- Integrating a Vertical Navigation Menu into the Sidebar
- Establishing a Vertical Navigation Menu on a Post or Page
- Incorporating a Vertical Navigation Menu Using the Full Site Editor
- Building a Vertical Navigation Menu with a Theme Builder Plugin
- Designing a Responsive Vertical Navigation Menu for Mobile Devices
- Creating a Dropdown Menu in WordPress
- Developing a Mega Menu in WordPress
- Bonus: How to Create a Sticky Floating Navigation Menu in WordPress
Experiment with Different Menu Display Locations
When you add a navigation menu to your website, it can be displayed either vertically or horizontally, depending on your theme and the menu location you choose.
The number of menu locations available varies based on the theme you are using. Some themes may offer options for displaying the menu vertically.
To explore this with your theme, go to the Appearance » Menus section in the WordPress admin sidebar. Here, you can test which menu locations are available on your site and how they appear.
Important: If you see Appearance » Editor instead of Appearance » Menus, it means your theme has Full Site Editing (FSE) enabled. You will need to check the section below on Creating a Vertical Navigation Menu Using the Full Site Editor.
For instance, the Twenty Twenty-One theme does not provide any vertical menu locations, whereas the Twenty Twenty theme includes one called ‘Desktop Expanded Menu’.
You can easily select the menu you want to display vertically and check the ‘Desktop Expanded Menu’ option at the bottom of the page.
Afterward, be sure to click the ‘Save Menu’ button to save your changes. This is how it appears on our demo site.
For additional details on editing menus and menu locations, check out our beginner’s guide on how to add a navigation menu in WordPress.
How to Add a Vertical Navigation Menu to the Sidebar
Regardless of the theme you are using, adding a vertical navigation menu to your sidebar with a widget is straightforward.
To begin, create the navigation menu you wish to display if you haven’t done so already. Then, navigate to the Appearance » Widgets section in your WordPress dashboard.
From this section, click the ‘+’ button located in the top left corner of the page and drag the Navigation Menu block into the sidebar.
Next, you can assign a name to the widget and select the menu you want to display from the drop-down list. Finally, click the ‘Update’ button at the top to save your changes.
Here’s an example of how the vertical sidebar menu appears on our demo WordPress blog.
Adding a Vertical Navigation Menu to a Post or Page
You can incorporate a vertical navigation menu into posts and pages using a similar method.
Start by creating a new post or editing an existing one.
Then, click the ‘+’ button at the top of the page and drag the Navigation block onto the page.
Next, select the menu you want to display. Click the ‘Select Menu’ button on the toolbar and choose your preferred menu.
Finally, check the block settings in the panel on the right.
You will find two buttons to choose the menu orientation. Click the down arrow button to set the menu to a vertical layout.
After making your changes, click the ‘Publish’ or ‘Update’ button to save your settings.
How to Add a Vertical Navigation Menu Using the Full Site Editor
If you’re using a block-based theme, you can easily add a vertical navigation menu to your site through the full site editor.
To get started, navigate to the Appearance » Editor section in your WordPress dashboard. In the editor, click on the navigation menu located at the top of the website header.
Next, click the ‘Select Navigation’ button in the toolbar.
You will see various options to customize the navigation menu on the panel to the right.
One option allows you to choose between a horizontal or vertical menu. Click the down arrow to select vertical orientation and create a vertical menu.
For additional guidance, refer to our guide on adding a navigation menu in WordPress.
Finally, click the ‘Save’ button to confirm your settings. You have successfully added a vertical navigation menu to your site.
How to Create a Vertical Navigation Menu Using a Theme Builder Plugin
SeedProd is the leading WordPress page builder and custom theme builder plugin available. It enables you to effortlessly create vertical menus anywhere on your WordPress site.
To get started, install and activate the SeedProd plugin. For detailed instructions, refer to our beginner’s guide on installing a WordPress plugin.
Important Note:There is a free version of SeedProd that allows you to add a vertical navigation menu to individual pages. However, to access the theme builder and incorporate a menu into your theme’s templates, you will need the Pro version.
After activation, you must enter your license key. This information can be found in your account on the SeedProd website.
Once that’s done, you can utilize SeedProd to design a custom WordPress theme.
Designing a Custom WordPress Theme
You can access the SeedProd theme builder by going to the SeedProd » Theme Builder page. Here, you will select one of SeedProd’s pre-designed themes as a foundation, which will replace your current WordPress theme with a new, customized layout.
To do this, simply click the ‘Themes’ button.
You will see a selection of professionally designed themes suitable for various types of websites, including options like ‘Modern Business’, ‘Marketing Agency’, and ‘Mortgage Broker Theme’.
Browse through the available options and select the theme that best fits your requirements by clicking the checkmark icon.
After selecting a theme, SeedProd will create all the necessary theme templates for you. You can find out how to customize these templates in our guide on creating a custom WordPress theme with ease.
How to Add a Vertical Navigation Menu to Your Website Templates
With SeedProd, you can easily incorporate a vertical navigation menu into any of your theme templates. In this tutorial, we will demonstrate how to add a menu to the blog index template.
Hover your mouse over the template and click on the ‘Edit Design’ link.
This action will launch SeedProd’s drag-and-drop page builder, where you will see a preview of your website on the right side and a block panel on the left side.
From this point, scroll down the blocks until you find the Advanced section.
Once you find the Nav Menu block, drag it to your sidebar or any area where you want the navigation menu to appear. By default, the menu will contain a single item labeled ‘About’.
To modify the menu settings, click on the menu, and the available options will appear in the left column.
The current selection is the ‘Simple’ menu type, which enables you to create a custom navigation menu using SeedProd.
For this guide, we will select the ‘WordPress Menu’ type to utilize the built-in WordPress navigation menu.
Next, click on the ‘Advanced’ tab. Here, you will find an option to set the list layout to either vertical or horizontal.
By clicking the ‘Vertical’ button, the preview will instantly update to display a vertical navigation menu.
Remember to click the ‘Save’ button at the top of the screen to save your vertical menu changes.
How to Create a Responsive Vertical Navigation Menu for Mobile Devices
Navigating a standard menu on a smartphone’s small screen can be challenging. Therefore, we suggest previewing the mobile version of your WordPress site to see how it appears on mobile devices.
Vertical menus are significantly easier to navigate, especially when using a fullscreen responsive menu that automatically adjusts to various screen sizes.
Discover how to enhance your navigation menu for mobile users by following our comprehensive guide on adding a fullscreen responsive menu in WordPress.
How to Create a Dropdown Menu in WordPress
A dropdown menu appears as a standard horizontal navigation menu at the top of the screen, but when you hover over an item, a vertical submenu unfolds.
For websites with extensive content, a dropdown menu helps organize your menu structure by topics or hierarchy, effectively showcasing more content in a compact space.
To implement a dropdown navigation menu on your site, select a theme that supports dropdown menus. Then, create your navigation menu and add sub-items to specific menu entries.
You can follow our step-by-step beginner’s guide on creating a dropdown menu in WordPress to learn how to do this.
How to Create a Mega Menu in WordPress
A mega menu displays multiple menus vertically across the page. Unlike dropdown menus, all submenus are visible simultaneously, enabling users to quickly locate your top content.
Mega menus are engaging and interactive, combining the advantages of both horizontal and vertical menus to provide a comprehensive overview of your website’s content on a single screen.
We recently implemented a mega menu on CanadaCreate to enhance content discoverability. In our behind-the-scenes article, we explain how we achieved this with our new site design.
For more details, check out our guide on adding a mega menu to your WordPress site.
Bonus: How to Create a Sticky Floating Navigation Menu in WordPress
You can also implement a sticky floating navigation menu on your website to boost user engagement. A sticky menu remains visible on the screen as users scroll down, ensuring easy access.
To create a sticky navigation menu, install and activate the Sticky Menu & Sticky Header plugin. For instructions, refer to our step-by-step guide on installing a WordPress plugin.
After activation, navigate to the Settings » Sticky Menu page and enter #main-navigation in the ‘Sticky Element (required)’ field. This allows you to make your vertical navigation menu sticky.
After completing your changes, click ‘Save Changes’ to apply your settings. For additional guidance, check out our tutorial on creating a sticky floating navigation menu in WordPress.
We hope this guide has helped you understand how to create a vertical navigation menu in WordPress. You might also be interested in learning how to hide a mobile menu in WordPress or exploring our guide on adding image icons to navigation menus in WordPress.
If you enjoyed this article, please subscribe to our YouTube Channel for more WordPress video tutorials. You can also connect with us on Twitter and Facebook.
