Skip to main content


Websites Blog

Horizontal vs. vertical navigations - which one is right for you?

21st August 2015


Web design standards are constantly changing, so it's difficult to keep up with what you should and shouldn't be doing.

One of the biggest parts of a website design is the navigation - this is where the user will gain access to all of your website's content. It should be easy to use with clear directions to take the reader where they need to be. Because of this, it's not just the structure of the menu items that's important - it's the actual positioning, too.

Five years ago, most websites would have had a navigation that travelled down either the left or the right of the page, with the content flowing next to it. This is now considered an outdated practice, and modern websites adopt a horizontal navigation which is displayed at the head of the site, normally above or below the logo area.

What are the benefits of a horizontal navigation?

Having a horizontal navigation means you have more space to use for content beneath the header area. In previous times when a vertical menu was used, it would take up around a fifth (or more) of the page width, meaning that there was less room for important content. Because of this, there would often be gaps either beneath the menu or beneath the text because one was longer than the other, which looks odd. Due to the page being full width, this will not happen. The page will be neat and tidy and have no gaps at either side which is great for the reader.

You may be thinking that a horizontal navigation restricts the amount of items you can have on your menu - this is partially true. This is largely dependant on your website width and text size, but on average, the menu could house about eight links to pages. This may not seem like a lot, but the beauty of having a horizontal navigation is that you can have child pages which 'fly out' from the navigation, meaning you can actually have much more on the navigation that it would first seem. This is great for structure as you can situate pages in places that make the most sense, rather than a long list of pages that the user would have to trawl through.

Don't discard vertical navigations completely

Certain layouts and structures work for certain types of website, so to say that you should avoid a vertical navigation at all costs woudn't be sound advice. Vertical navigations still have their place in web design, albeit significantly reduced in recent years. Due to the high level of categorisation, e-commerce websites often incorporate a vertical navigation for product sorting in addition a main, horizontal navigation. If you were after some reassurance, e-commerce giants Amazon and eBay both have this on their websites. It's common practice for a website like that to have a main, horizontal menu featuring the umbrella categories for their items - this may be something like "Shirts | Trousers | Shoes | Underwear | Accessories" or "Mens | Womens | Childrens | Babies" or something of the like, and then using the larger, vertical navigation for higher levels of refinement, maybe showing different brands, different styles of shirt and so on.

What's right for me?

To figure this out, you'll want to think about the type of structure you will want for your website. If you have a large scale e-commerce project, then you may want to consider using both a horizontal and vertical navigation like eBay and Amazon. If you have a standard website with your service overview and contact details, you may be best off with just a modern, horizontal navigation to best make use of your horizontal space.

If you have any questions or want to speak with any of our expert team, give Cosmic a call on 0845 094 6108, e-mail us on [email protected] or even drop us a tweet to @Cosmic_UK.