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 and pages. As you know, the menu can be displayed 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 what conditions should be met for the vertical menu to be the best choice in web design?

Let’s dive into some details…

First things first: what is a vertical menu?


The vertical menu 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 a vertical menu, however, in certain cases, it might be the best selection. It lists items one under another, in a succession that is easy to follow, and which serves its purpose well: guiding visitors throughout the content of a website.




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


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


  • One reason of choosing a vertical menu 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 menu. 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 vertical menus 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 menu. 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 vertical menu a simple way of categorising and filtering products).


  • Last, but not least, vertical menus encourage action in a better way than horizontal menus. How is this possible? A vertical 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.




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 well inscribed in 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 accustomed to navigating 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:



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 by clicking 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.

It’s recommended that you 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, in accordance with your design guidelines and in the most efficient way for your website.

Leave a Reply

Your email address will not be published. Required fields are marked *