[email protected]

Vertical Navigation Bar Design: Best Examples

When we speak about web design rules we usually mean some traditions that seem to be unbreakable. Most design professionals and users as well are used to see sidebar on the right, logo in the top left corner or menu bar on top of the page. But eally catchy and unique designs include elements that break the rules and draw users’ attention.

Vertical Navigation Bar Design - main

Navigation menu is an essential design element that stays a must-have even for one page designs. One of the most attention-drawing styles of navigation is a vertical navigation bar design. This navigation design pattern is mostly common to websites with vertical scroll. It fits well into the structure of this kind of websites. However, some researchers claim vertical navigation is not the best pattern for modern websites. Let’s check out pros and cons of vertical navigation design.

Pros of Vertical Navigation Bar Design

Besides some obvious benefits of vertical navigation bars, like creativity and visual aesthetics, there is one more to be mentioned here. The width of the website is usually fixed while vertically you can elongate it as much as you need. Thus, it’s much easier to fit a new category into a vertical navigation menu then trying to find a place for it in a large horizontal navigation bar.

Wedding Website Template in Pastel Colors

Vertical Navigation Bar Design - Wedding Website Template in Pastel Colors

El Bar de Antonio

Vertical Navigation Bar Design - El Bar de Antonio

Cons of Vertical Navigation Bar Design with Solutions

1. It takes too much space. Horizontal navigation bars are usually more narrow and flawless. Vertical menu bars should be wide enough to fit longer words.

Solution: Try to use shorter words or replace them with clear-to-understand icons. It works best for simple menus with a standard set of categories (like Home, About, Contacts etc.).

Well Storied

Vertical Navigation Bar Design - Well Storied

Beauty Parlor Website Template

Vertical Navigation Bar Design - Beauty Parlor Website Template

Photo Portfolio Website Template

Vertical Navigation Bar Design - Photo Portfolio Website Template

Web Template for Architect Studio

Vertical Navigation Bar Design - Web Template for Architect Studio

2. It crowds the layout. If your website has a complex information architecture structure, it will be hard to use vertical menu to display multiple sub-categories. In such cases designers usually use fly-out menus that are not so convenient for users.

Solution: Use vertical menu that transforms into a horizontal after an item is clicked. It saves space on the website and pays greatly to UX. Since most people are used to drop-down menus, they will better perceive complex menus as horizontal structures.

Minimalist Web Template for Design Studio

Vertical Navigation Bar Design - Minimalist Web Template for Design Studio

Petersham Nurseries

Vertical Navigation Bar Design - Petersham Nurseries

Olivier G

Vertical Navigation Bar Design - Olivier G

They Make Apps

Vertical Navigation Bar Design - They Make Apps

3. It takes space that converts. According to studies, left side of the screen is the best place to put conversion-focused elements like CTAs. NN/group’s study reveals that left side of the screen takes about 69% of viewing time. Due to traditional reading patterns, left side of the screen is better suited for vital elements that bring conversions.

Solution: Place menu in the center or on the right side of the screen. Due to its unusual placement it will draw attention.

Shukalova

Vertical Navigation Bar Design - Shukalova

Arent & Pyke

Vertical Navigation Bar Design - Arent & Pyke

Portfolio Template for Photographers

Vertical Navigation Bar Design - Portfolio Template for Photographers

Interior Design Studio Web Template

Vertical Navigation Bar Design - Interior Design Studio Web Template

Mils and Tom

Vertical Navigation Bar Design - Mils and Tom

You can use now-popular Hamburger icon not to crowd your website. It’s easy to hide menu under this well-recognizable icon and call it out when it’s needed. In the mobile and responsive design era such space-saving solution is one of the best.

Sassi Holford

Vertical Navigation Bar Design - Sassi Holford

The Glitch

Vertical Navigation Bar Design - The Glitch

In any case, whether you use a horizontal or vertical navigation pattern, make sure it doesn’t conflicts with the overall design style and stays comfortable to use.

Helen Stark
Helen is a passionate writer who finds inspiration in everyday things and is happy to share them with readers. She has been creating content for fashion, beauty, food and tech blogs during last years. You can follow Helen on Twitter and Google+
More articles by Helen Stark
  • Lucas Taylor

    The portfolio navigation will look great for my navigation panel. Definitely using the ‘hamburger’ icon. It makes the website look very clean, and the responsive pop-out of the menu items gives a good look and feet. I also like the Mils and toms layout for it’s quirkiness.
    Helen, you could have added a little more content, or more of a diy option for beginners.

Related Posts