Vertical Menu for a Plus of Originality and Practicality


An important piece in web design, the menu has a fundamental role in orienting visitors within a website content. As you know, you can display the menu horizontally or vertically. In this latter case, the vertical menu has to be a wise choice. In fact, a wiser choice than the already classical horizontal menu.

But under what circumstances is this component the best choice in web design?

Let’s dive into some details…

First things first: what is a vertical menu?


It is responsible for the navigation within a website, and instead of following a horizontal line, it is displayed vertically. It’s more uncommon to use this item, however, in certain cases, it might be the best selection. It lists items one under another, in a succession that is easy to follow, serving its purpose well. Its role is to guide visitors throughout the content of a website.



Example vertical menu


Why choose a vertical menu, instead of a horizontal one?


For multiple reasons, some web designers prefer to use a menu that best illustrates the content presentation within the website:


  • One reason of choosing it resides in the intention of originality: it’s common practice to use a horizontal menu, but it’s out of the usual path to choose a vertical one. This has the effect of drawing people’s attention towards the navigation, and making them more aware of the directions they can follow in visualizing the website’s content.


  • Another reason of implementing such components consists of practicality (UX reasons): the general opinion is that it’s better to have a horizontal menu, as it doesn’t get cut off in the lower part of the page. And yes, this is valid when we think exclusively of desktop users. However, in a mobile-first world, a vertical menu is more than welcome (nearly 80% of internet usage is expected to have been mobile in 2018). On mobile, visitors are used to scroll down infinitely, and as long as they still have content to discover.


  • If the website specificities allow it, you can go for a vertical alignment of items. This means you have a website with a rather low content volume (creative agency, portfolio website, restaurant, etc.) This component is not recommended for ecommerce websites, with lots of products and descriptions (one exception though: Amazon makes of its menu a simple way of categorising and filtering products).


  • Last, but not least, vertical menus encourage action in a better way than horizontal ones. How is this possible? Such a menu focuses attention on the items that users choose themselves to click on and explore further. Therefore, it invites to content discovery in a more efficient way, engaging users better than a classical menu.


Best practices for vertical menus


If your website design meets the above criteria and it has been decided to use a vertical menu instead of a horizontal one, don’t forget to stay up to date with best practices for vertical menus:

Place the vertical menu on the left side of the screen. It’s pretty unusual and weird to have that menu on the right side of the screen. It’s against user experience rules, and counter intuitive. So, remember to reserve some space on the left side of the website pages, for the vertical menu, if vertical menu is what you choose for navigation.



Another example of vertical menu


It should be tailored for information that is short. In no case, should items be lengthy and overly descriptive. Rather, they should be concise and relevant for the sections they point to.

The vertical menu is appropriate if you keep the general layout simple and compact. For a more complex structure, it’s not that recommended, as it implies too many decisions related to navigation, for website users.

Limit the number of levels within your navigation. This way, navigation within the website pages/sections will be less confusing, clearer, better organized. If vertical menus are specially designed for simple websites, the items in those menus should reflect simplicity, as well.

Group the sections by action rather than by topic. Remember that vertical menus tend to encourage action better, so users be more inclined to go further in exploring the website content.


Now, to include a vertical menu in a new website, you need to weigh the pros and the cons and decide if this component is appropriate for the respective website. In the following lines, we give you a list of advantages and disadvantages of vertical menus, so you know why it’s correct or not to consider a vertical menu for a website.


Advantages of vertical menus


The general reading pattern is an F-pattern. Users scan content on a web page following the directions imprinted in the letter F. And the vertical menu is part of this F-pattern.

As a vertical menu follows users’ natural way of scanning pages, it’s intuitive and comes in handy when people need orientation within a website content. So, it doesn’t require any cognitive processes by the user, or extra effort in understanding how the navigation within a website functions.

A vertical menu “goes hand in hand” with scrolling. Well, scrolling is widespread in web design, so the vertical menu component follows the natural flow of users’ scanning and integrates well within their content exploration process.

Also, a vertical menu leaves users decide for themselves which items in the navigation are most important. As we already said, the vertical menu component encourages action (better than a horizontal menu) and engages users with the content of the pages in a more efficient manner.


Disadvantages of vertical menus


One of the most prominent disadvantage of vertical menus is the habit of preference. Users are used to navigate through a horizontal menu, that’s why they might find it strange to change their habit and use a vertical list of menu items.

Also, it’s inevitable to make a compromise between legibility and font size. You have to adjust font size, so the menu be visible enough for users and serve them well in navigating throughout the website pages.

Some people might find horizontal navigation handier, as it makes finding items faster and easier. The user’s topic of interest is more limited in this context.


How to create a vertical menu


Here, we’ll give you some guidelines on how to easily create a vertical menu for your new website.

If you’re using ColibriWP and have already created a new project (corresponding to your new website), then you have to follow these steps:


Step 1: where you position the menu

Choose the place where you want to add a vertical menu. Check if you have space for this component, that is a row with a dedicated column where you’ll insert the vertical menu.

You can perform these checks directly in the live editor.


Step 2: how you insert the vertical menu in your page

From the list of components available from the left-hand menu of the Customizer, search for/select vertical menu. Then, use drag-and-drop to place a vertical menu component on the row, in the exact column you have created for it:


How to insert a vertical menu in site


Step 3: define the menu

In this step, you’ll give the menu a name, and decide which items it will contain. You also decide the structure of the menu (if it has solely a main level, or if it has secondary navigation levels, as well).

You can make changes as to the content of the vertical menu. Click on Menus, under General Settings, in the left-hand menu of the Customizer.



Step 4: customize the menu

Click on the menu in the Customizer and you’ll open the panel with customization options for this component. They’ll give you the possibility to adjust background color, text color, typography, divider aspect (if the menu has secondary levels), etc.

You should follow best practices in adjusting settings for the vertical menu. In terms of visual design, different customizations for menu and submenu items emphasize the content hierarchy within the site.



That’s it. You’re now prepared to create vertical menus for your website, if you deem it appropriate.

We hope you’ll find this information useful and create vertical menus as you like. This will be in accordance with your design guidelines and in the most efficient way for your website.

+ posts


How to Kickstart Your Wordpress Website with No Coding Skills

[Marketing plan included]