When we talk about corporate website navigation design, there are two basic possible options — vertical and horizontal navigation. In case of horizontal navigation, menu items are located on top of the website while in vertical navigation menu examples you have the menu on the left and can scroll it up and down.
While UI and UX designers and experts are arguing which website navigation bar is better, we are going to look closer at the vertical navigation examples to get inspiration for your own web page. To start with, we can say that vertical navigation bar design has several important advantages:
- With vertical website navigation design you are not limited by the page width and can fit as many menu items as you want, within reasonable bounds;
- If you are going to create a mobile-friendly website, vertical navigation will look much better on smaller screens;
- They are perfect for the custom single-page website when there is no need in a horizontal menu but navigation is still needed.
Now let’s look at the great website navigation examples implemented by large and small companies.
Arbor restaurant
Vertical navigation is quite often used on restaurant website pages and this cozy UK restaurant is not an exception. The black and white minimalist menu let the website creators fit quite a lot of menu items which would not be possible in the horizontal navigation. The not-so-important yet cute pages as “Afternoon tea” and Sunday lunch” attract clients and make this website look unique when compared with the competitors.
via – http://www.arbor-restaurant.co.uk
Design studio
Design studios like agentestudio or this one also like to use a vertical navigation on their websites. Here you can see quite an unusual example or vertical menu which is located not on the familiar left side but on the right side when it seems hard to find on the first glance (studies show that our attention flows from left to the right). It perfectly shows the creativity of the website owner which positively affects the number of website visitors and potential clients.
via – http://jasonjam.es
Design shop
Vertical navigation doesn’t necessarily mean a lot of menu items and long vertical scroll. On this Kansas design store website, you can see the short vertical menu that could easily be placed on top of the page which will make it look not as unique though. The minimalist menu perfectly suits the whole website design and makes the navigation fast and easy.
via – http://mammothmedia.tv
One page website
As we said before, vertical navigation is a perfect option for those who are going to make a one-page website for the company. It fits all the important points such as “about”, “portfolio”, “blog”, and “contacts” yet doesn’t overload the page and just look good. Even though horizontal navigation can also be used for one-page websites, vertical one looks more seamless.
via – http://themeforest.net/item/flurity-responsive-one-page-template/full_screen_preview/2544371
Bake agency
Vertical navigation can be implemented even without the usual menu list on the left. This design studio has mixed vertical scroll with the square menu tiles that create the advanced and completely unique website look. It can hardly be used on the websites that need a lot of menu items yet digital studio or other small company can take this idea into account.
via – https://bakeagency.it/en/
Template with combined navigation
Having problems choosing between vertical and horizontal navigation? As this website template shows, you can use both of these options together to get the most of the website usability. The most important information as contacts or portfolio items can be located in the horizontal menu while less important ones like careers can be put in the left vertical menu.
via – https://dribbble.com/shots/1064239-Flat-admin-cms-subpage
Fixed side menu on the restaurant website page
You can combine the fixed side menu with the scrollable website page just like the creators of this beautiful restaurant website. It doesn’t mean how far the user scroll, the fixed menu on the left can bring him or her to the necessary part of the page in just one click.
It’s still hard to say whether the vertical navigation is better than horizontal but these examples clearly show that you can create beautiful company pages using vertical navigation alone or combined with the horizontal menu.
