WordPress Vertical Menus: from A to Z

We’ve already talked in previous articles about building a WordPress menu in general, and about building WordPress dropdown menus. We haven’t quite covered vertical menus yet. So, it’s time to roll up our sleeves and show you how to nail them. Ready? 

Now, let’s be straight here: when talking about vertical menus, I’m not including any left or right sidebar navigation.

Let’s start by remembering how menus are actually built, deal? I’m gonna make this fast.

 

How to create a WordPress menu in general

 

Step 1: Go to the WordPress Dashboard and select “Menus” underneath “Appearance”.

Step 2: Name your menu, and select the display location of your menu. The options here vary from theme to theme. Next, hit “Create Menu”.

Step 3: Add your menu elements (pages, posts, custom links, categories). Just tick next to the item you need, then hit “Add to Menu”.

Step 4: Save your menu.

And you’re done!

If you’ve changed your mind and want to change the location of your menu, you can do this quickly using the “Manage Locations” option.

Types of Vertical Menus

When considering a menu type the main thing to take into account is how many levels you need. Are you using menus and submenus, categories and subcategories?

Let’s look at your options:

• The vertical accordion menu

This type of menu allows users to click on a menu link and have the sub-menu options expand or slide out underneath. Accordion Menus are vertical menus where clicking the main item expands the section below it. Clicking the top link a second time closes the section.

This makes menus really compact and easy to navigate if they use the needed visual cues to signal that slide-outs are available (most of the time arrow shapes are being used). There’s one big downside to this option. The user might end up a bit confused about the parent item if there are too many options laid out for him.

 

• The vertical mega menu

The vertical mega menu creates a single “flyout” container for each main link. Each main link leads to a submenu. This is an option very popular among online stores.

• The dropdown menu

Dropdown menus are the most popular type of multi-level menu. The menu links drop down vertically.

Source: Dribbble

 

Now, most of the themes out there won’t allow you to create a vertical menu. This is why we’ll be needing some extra help from WordPress plugins. 

 

2 Plugins You Can Use for Vertical WordPress Menus

 

Now, there are more Vertical Menu WordPress plugins that you could choose from, but here are my two favorite ones. If you want to see other options, check this link from wordpress.org.

 

Responsive Vertical Icon Menu

Here are some of its most useful features:

• Easy install and use
• Works without problem with all WordPress versions
• Fully responsive WordPress vertical menu
• Ability to add Menu Icon
• Ability to change main menu and submenu styles (premium feature)
• Ability to make changes to active menu styles, font family, border styles, background color (premium feature)
• User friendly back-end
• Tested on popular WordPress themes

 

Slick Menu – Responsive WordPress Vertical Menu

Here are some of its most useful features:

• Each level is independently customizable
• 14 3D menu appearance animations
• Covering or overlapping menu animation
• 45 menu item animations
• Hamburger animations
• Icons library
• Google Fonts available
• Fully responsive
• Smooth scroll

Now, here’s how you can install a WordPress plugin.

Pro and Against Vertical Menus

Now, my question is: do you really need a vertical menu?

Why am I asking you this? .Well, it seems there’s an ongoing debate around the topic. Most of the designers are against this, and I’ll give you some of their reasons below.

Now, every rule has exceptions, and we’ll look at those as well.

In the end, there’s no correct absolute answer. When it comes to designing for users, context the main driver. 

 

Now, let’s look at the counter-arguments.

• If you place your vertical navigation bar to the left of a page’s content, you might be wasting valuable space that could be used for more important things.
• Users are already used to this pattern: common navigation elements are near the top.
• Vertical menus were more common in the past, now they seem out-of-date.

 

Now, let’s look at the arguments for vertical menus:

• Left navigation might be faster for users to scan.
• In vertical navigation, you can include more elements, in horizontal navigation you need to narrow things down, because of limited space. 
• If primary links are long, they would fit better inside a vertical menu.
• E-commerce stores and mobile apps have already helped users get used to vertical menus. E-commerce sites use a vertical display of product categories and sub-categories. Mobile apps can’t show horizontal navigation, due to lack of space, and this is why when you collapse a hamburger menu, you’ll be seeing vertical navigation.
• Users are used to finding important stuff in a left-vertical alignment for SaaS products as well. Let’s say you use Canva, Mailchimp, Adobe Lightroom, or even the Colibri page builder. Those are not menus per-se, but it proves the fact that not everything needs to happen inside a top bar.

 

Vertical Menu Inspiration from 7 Websites

 

1. The website for the Australian Formula 1 Grand Prix uses a vertical menu with more menu items backed by icons. It looks really nice and it’s really visible. You can’t miss it. 2. Seeing a vertical menu inside the footer is quite common. Some of these menus are pretty dull, but here’s one that caught my eye:
   Source: thedvigroup.com

It has a purpose, this is why it stands out. Design needs to be a way to a goal. Here, the goal seems to be making it easy for people to find the contact information and the job offer. Here’s an example of vertical menus from the British Museum as well. Links that go in the footer are secondary and tertiary links, they do not weigh as much as primary links that go inside the main navigation.

3. This site does not use sticky horizontal navigation, so it places a vertical menu below the content. Who says you can’t have both a horizontal and a vertical menu? Source:  www.oxfordhouse.nl 

4. In this example, the links wouldn’t have fit in a horizontal menu. It’s hard to fit 7 links in top bar navigation. So, a vertical menu was a natural choice. It also expands so that it does not occupy too much space.Source: live.harley-davidson.com

5. Because users are now very familiar with the hamburger menu option, this model can also be replicated on desktop, like the folks at KiteCreative did.

6. The folks at Marme are listing their home design products in their vertical menu. These links would have fit in a horizontal menu with three elements, and 2 dropdown menus. The experience would have ruined the view you have now in front. Going for the vertical menu was a cleaner and friendlier choice.

7. The folks at The Rocks are using a vertical menu on the left, but they also have similar content on the right, so it’s in almost perfect symmetry.

 

Wrap Up

Going back a bit to the ongoing debate around vertical menus, here’s my humble opinion. People know that there should be a menu on a website. They’re going to look for it on the top, or on the left. They will find it, it’s only a matter of seconds. Let’s not underestimate them. We live in an era where kids swipe on phones from an early age. And menus are visible anyway because they occupy visible space (unless you have some poor contrast).

Just look at this site: http://www.artifactproperty.co.nz/. Did you find the menu, or not? 

Now, about WordPress vertical menus. They can be built easily with the help of WordPress plugins. All you need to figure out is if it will bring some added value to the site or not.

If you liked this article, and you want to learn more about how to design a WordPress website, make sure to subscribe to Colibri’s Youtube channel and follow us on Twitter and Facebook!

 

[sibwp_form id=1]