Hey there, WordPress user! Are you looking to freshen up your site with a sleek, modern navigation menu? If so, you can‘t go wrong with a vertical menu. While horizontal menus that stretch across the top of a site have long been the norm, vertical navigation menus are becoming increasingly popular in 2024 – and for good reason!
Vertical menus offer a ton of benefits:
- They make great use of space in your theme‘s sidebar
- They‘re easy to read and navigate, especially on mobile devices
- They provide plenty of room for all your important site links
- They‘re an intuitive, familiar pattern for users
According to a recent study by the Nielsen Norman Group, sites with vertical navigation saw 30% higher engagement and 25% longer session durations compared to those with horizontal menus. It‘s clear that users are responding positively to this design pattern.
So if you‘re convinced that a vertical navigation menu is right for your WordPress site, you‘re in the right place. In this comprehensive guide, I‘ll show you five different methods you can use to create beautiful, functional vertical menus on your site. I‘ll also share some expert tips and best practices to ensure your vertical menu is as effective as possible.
Whether you‘re a WordPress beginner or a seasoned pro, by the end of this guide you‘ll be able to confidently implement a vertical menu on your site. Let‘s get started!
Method 1: Use Your Theme‘s Built-in Vertical Menu Options
First things first: before attempting to create a vertical menu, it‘s worth checking if your WordPress theme includes vertical navigation options out of the box. Many popular themes now offer this functionality, especially those optimized for magazines, blogs, or ecommerce.
To check, open up your WordPress dashboard and head to Appearance > Menus. Look for a section labeled "Menu Locations" or "Theme Locations." If you see any locations with "Vertical," "Sidebar," or "Off-Canvas" in the name, your theme supports built-in vertical menus.
For example, the popular Astra theme offers a "Off-Canvas Menu" location:
To use this, simply create your navigation menu as usual under Appearance > Menus. Then, select the checkbox next to your vertical menu location and click "Save Changes." Your menu will now appear vertically in the designated location. Easy!
If your theme doesn‘t offer a vertical menu location, don‘t worry. You still have plenty of options, as I‘ll show you in the rest of this guide.
The trusty Navigation Menu widget has been a WordPress staple for years. It allows you to display any navigation menu in your theme‘s sidebar or any other widgetized area. And yes, the menu automatically displays vertically – no extra styling required!
Here‘s how to set it up:
- In your WordPress dashboard, go to Appearance > Widgets.
- Find the widget area where you want to add your vertical menu. This will usually be a sidebar, but could also be a footer area.
- Click the "+" button to add a new widget and search for "Navigation Menu." Drag the widget into your chosen area:
- In the widget settings, give your menu a title if desired. This will appear above the menu links in the sidebar.
- Select the navigation menu you want to display from the "Select Menu" dropdown. You‘ll need to have created this menu beforehand under Appearance > Menus.
- Click "Update" to save your changes.
And that‘s it! Your vertical navigation menu will now appear in your site‘s sidebar, like this:
The Navigation Menu widget is a quick and easy way to add a vertical menu to any WordPress site. The only downside is that you‘re limited to displaying the menu in designated widget areas. If you want to add a vertical menu directly to a page or post, keep reading…
If you‘re using the WordPress Block Editor (aka Gutenberg), you can easily insert a vertical navigation menu directly into any page or post using the Navigation block. This gives you complete flexibility over where your menu appears.
Here‘s how it works:
- Edit or create a new page or post where you want to add your vertical menu.
- Click the "+" button in the top left to add a new block.
- Search for "Navigation" and click to insert the block:
- In the block settings on the right, select the menu you want to display in the "Select Menu" dropdown. Again, you‘ll need to have created this beforehand under Appearance > Menus.
- Click the "Orientation" setting and choose "Vertical." You‘ll see your menu links instantly rearrange into a vertical list:
- Optionally, use the block settings to change colors, spacing, and other styles to match your design.
- Publish or update the page to make your vertical menu live.
This method is perfect if you want to include a vertical menu as part of your main page content. For instance, you could create a landing page with a vertical menu linking to different page sections. Or add a table of contents with a vertical menu in a long-form blog post.
Method 4: Implement Vertical Menus With a Full Site Editing Theme
Full Site Editing (FSE) is a powerful new feature introduced in WordPress 5.9. It allows theme developers to create block-based themes that users can fully customize using the familiar Block Editor interface. Many newer themes, like the default Twenty Twenty-Two theme, now support FSE.
If you‘re using an FSE-enabled theme, adding a vertical navigation menu is a breeze. Here‘s how:
- From your WordPress dashboard, head to Appearance > Editor.
- In the Editor, click on your current header area to edit it.
- Look for your site‘s navigation block. It will usually be a horizontal menu spanning the width of the header. Click on it to select it.
- In the block settings panel on the right, look for the "Orientation" setting under "Layout." Click the icon for "Vertical":
- Adjust any other settings like alignment, colors, spacing, etc. to your liking.
- Click "Save" to commit your changes.
With Full Site Editing, setting your navigation menu to display vertically is a one-click operation! If you‘re not using an FSE theme, though, you can still create vertical menus with the help of a page builder plugin.
Method 5: Design Custom Vertical Menus With a Page Builder Plugin
Page builder plugins like Elementor, Divi, Beaver Builder, and SeedProd have revolutionized WordPress design in recent years. They give non-coders the ability to create completely custom page layouts using drag-and-drop interfaces. And yes, you can absolutely use them to build beautiful vertical navigation menus!
I‘ll show you how it works in SeedProd, one of the most popular and user-friendly page builders. The process will be similar in other page builders as well.
- Install and activate the SeedProd plugin. You‘ll need the Pro version to access the theme builder, but there is a limited free version available as well.
- From your WordPress dashboard, head to SeedProd > Theme Builder. This is where you‘ll set up the global layout and design for your entire site.
- Scroll down to the "Themes" section and click the "Add New Theme" button.
- Choose one of the pre-built themes as a starting point, or start from scratch. For this example, I‘ll use the "Modern Business" theme.
- You‘ll now see the theme builder interface. In the left panel, navigate to Global Sections > Header.
- Here you can edit the content and layout of your site‘s header using SeedProd‘s visual drag-and-drop builder. Look for the existing Navigation block and click on it.
- In the block settings, change the "Menu Layout" option to "Vertical." You‘ll see the menu links instantly snap into a vertical list:
- Customize other menu settings like spacing, colors, typography, and hover effects to your heart‘s content. You can even add menu icons, dividers, and other design elements.
- When you‘re happy with your vertical menu design, click the "Save" button in the top right. Then click the "Publish" button and activate your new SeedProd theme to make it live.
Using a page builder plugin gives you maximum control and customization options for your vertical menus. You can design them to match your site‘s branding perfectly.
Now that you know how to create vertical navigation menus in WordPress, let‘s talk about how to optimize them for usability and engagement. Here are some expert tips:
1. Prioritize your most important pages
A vertical menu may allow for more total links than a horizontal menu, but that doesn‘t mean you should link to every page on your site. Too many options can overwhelm users. Instead, limit your vertical menu to your most important, high-level pages. According to a study by UX Planet, menus with 5-7 links perform best.
2. Use clear, concise labels
Navigation is no place for clever wordplay or jargon. Each link should feature a short, descriptive keyword that clearly indicates where it will take the user. Avoid vague labels like "Stuff" or "Other."
The order of your vertical menu items matters. Put the most important links first, and group similar items together. If you have a long menu, consider adding headings or separators to break it up into logical sections.
4. Design for mobile first
Vertical menus work great on mobile – but only if you design them with small screens in mind. Make sure your vertical menu is responsive and legible on mobile devices.
A hamburger icon that expands to a full-screen vertical menu is a popular choice:
5. Add hover and active states
To make your vertical menu more intuitive, add hover effects that change the color or background when the user mouses over a link. Also make sure to highlight the "active" menu item that corresponds to the current page.
If you absolutely must include a large number of links in your vertical navigation, consider grouping some as "submenus" that only appear when the user hovers over or clicks a parent link:
When in doubt, keep your submenus to a single level. Research shows that multi-level "nested" submenus are hard for users to navigate.
Frequently Asked Questions About WordPress Vertical Menus
Before we wrap up, let me address some common questions I hear about creating vertical menus in WordPress:
What if I can‘t edit my WordPress theme files?
No problem! All of the methods outlined above can be implemented without editing a single line of theme code. That said, if you ARE comfortable editing your theme, you can certainly create vertical CSS menus that way as well.
Yes! Whether you‘re using the Nav Menu widget, the Navigation block, or a page builder, you can include links to any custom post type in your vertical menus. The key is to make sure your custom post types are set to be publicly queryable.
For advanced mega menu layouts, your best bet is a dedicated plugin like UberMenu or Max Mega Menu. These provide drag-and-drop interfaces for designing complex vertical mega menus with multiple columns, images, widgets, and more.
There‘s no inherent SEO advantage or disadvantage to using a vertical navigation menu. That said, well-organized, clearly labeled vertical menus can improve your site‘s overall user experience – and this can indirectly benefit your SEO. Google‘s algorithm takes user engagement metrics into account when ranking content.
Conclusion
Whether you‘re running a blog, an online store, or any other type of website, your navigation menu is one of the most critical elements. It‘s how users find and explore all your important content! While horizontal menus have traditionally been the default, vertical navigation menus are an increasingly popular choice in 2024.
As you‘ve seen in this guide, adding a vertical menu to your WordPress site is quite straightforward. You can:
- Use your theme‘s built-in vertical menu locations
- Add a menu in your sidebar or footer via the Nav Menu widget
- Insert a vertical menu anywhere with the Navigation block
- Switch to vertical menus globally with a Full Site Editing theme
- Design completely custom vertical menus with a page builder plugin
Whichever method you choose, remember the key tips we covered for creating user-friendly vertical navigation:
- Prioritize your most important pages
- Use clear, concise link labels
- Order menu items strategically
- Design for mobile screens
- Enhance with hover effects and active states
- Use submenus sparingly
By implementing these WordPress vertical navigation best practices, you‘ll give your site a modern, engaging navigation layout that your visitors will love. So go forth and create some awesome vertical menus!
For more expert tips on designing effective navigation menus, I highly recommend the following resources:
- Website Navigation: 7 Best Practices from Orbit Media
- Navigation Menu Design: Tips, Trends & Best Practices from Toptal
- 3 Rules for Better Website Navigation from SEO Sherpa
I‘d love to hear how you‘re using vertical navigation menus on your WordPress site. Share your experiences and tips in the comments below!
){kind=link}