Menu Search
Jump to the content X

The Case Against Vertical Navigation


In a recent article about unusable and superficial beer and alcohol websites1, I made the claim that using left-hand vertical navigation is an out-of-date method in modern web design. In the comments, a few people wondered why I said this. I was surprised that it got any attention at all, because it was a brief comment in the article, and didn’t constitute a substantial part of the argument I had put forth. Nonetheless, I decided to write an article describing what I feel is a solid case against using vertical navigation in modern web design.

Naturally there are exceptions to every rule, and I’ll discuss those briefly at the end. But first I’m going to present five reasons why vertical navigation should not be used and why designers and architects should almost always construct their sites with horizontal navigation in mind.

It should be noted here that when I refer to “vertical navigation”, I’m talking about the top-level, primary means of navigating a website. This would not include left or right sidebars that have secondary links and call-to-action areas that are perfectly acceptable in many circumstances.

It Discourages Information Architecture Link

Approximately eight to ten years ago when vertical navigation bars were much more prevalent, websites were created using a fairly simple process: The client gave the designer x number of pages, with page titles and content for each. The designer created a one-level-deep website with all pages linked to from the home page. In many cases, the only way to accommodate such a structure would be by means of a left-hand vertical navigation bar. Below is an example of a site created in that manner.

Thora Industrial Plastics2

Thora Industrial Plastics3

Believe it or not, I designed the Thora website in the spring of 2001. It was one of the first sites I ever designed, and it hasn’t changed since — aside from a few small text updates. It was created using the exact method I described above, without any thought given to the purpose of the site, potential goals, or other architecture-related factors. Looking at the site now, it’s not really clear what this company does. Are they manufacturers? Are they a repair facility?

Only after reading some of the content on the site do we see that they manufacture, install, repair and otherwise service various types of industrial equipment. But those facts could have been communicated more clearly by including a simpler navigation bar with links like “Manufacturing”, “Repair”, and “Installation” — instead of the overly-specific “Wet Process Systems”, “Tanks”, and “Air Management”. This would then allow for a more aesthetically-pleasing horizontal bar that would serve to facilitate a more organized structure that’s not just one level deep.

Design Should be Based on Careful Content Analysis Link

Today’s web professionals have recognized the need for proper information architecture. Thus, before design work begins, a site’s content should be carefully analyzed so that the resulting design will produce a logical hierarchical structure that is readable, usable, and helps maximize conversions and click-through rates.

Jeffrey Zeldman on content analysis before design4.

Zeldman on Content and Design5

A site that uses a left-hand vertical navigation bar doesn’t require site architecture or related usability analysis because, as mentioned, sites built in that manner will often lack depth and fail to make their purpose clear.

The specifics and ramifications of advanced information architecture are certainly beyond the scope of this article, but advanced knowledge in such areas is not necessary in order to recognize the drawbacks and limitations posed by vertical navigation. A basic understanding of what makes a website successful in today’s market is all that’s needed in order to see the advantages of a simple, clear, and usable horizontal navigation bar.

It Wastes Prime Screen Real Estate Link

As discussed in the previous section, design in today’s market needs to be based on strong information architecture. The navigation paths taken by users should have clearly defined goals and outcomes. A vertical navigation bar that sits to the left of a page’s content on every screen wastes valuable space that could be used for more important things. Yes, it’s true that you want navigation to be easy to find, but you also don’t want navigation to unnecessarily crowd the left side of the page, which studies have shown6 will draw a user’s eyes more often.

In an online world where content is king, we don’t want our users to be fixated on pretty navigation bars — unless they’re navigating. But once they have started to navigate, we want their attention drawn to call-to-action areas and to primary content that will help them accomplish their goal on the website and help us make conversions.

Recognizing its Limitations Link

Examine the design and style of many of the sites showcased in CSS galleries, and you’ll notice a strong trend towards simplified horizontal navigation while allowing content areas to have strong visual focus. Below are a few screenshots from sites that would be drastically different if they had not designed their site based on horizontal navigation.

Dan Conaway7

Dan Conaway8

Although the Dan Conaway website (above) has a few usability issues, the use of a horizontal navigation bar allows focus to be placed on the page’s content area and on the call-to-action sections (“Recent Projects”, “Consulting”, and “Ranting”). On this site, the user is drawn to these larger elements, while still being able to find the primary navigation bar at the top of the page.



The WebDesignGuys website (above) puts strong visual focus on the most important aspects of their business — their products and services. Immediately the user is visually and textually informed that this company provides affordable design, CMS and E-Commerce development.

Meanwhile, functions like browsing their portfolio or contacting them are available through the simple and non-obtrusive horizontal navigation bar at the top of the page. How would this site’s architecture and design be affected if they had opted for vertical navigation?

It Doesn’t Conform to Real-Life Reading Link

This is a problem related to the previous section on visual focus, and is probably debatable. There aren’t many areas in life where a person is asked to read something that has a “left hand menu” that resembles what we find on websites that feature vertical navigation. In general, people are accustomed to reading content that spans the entire width of the reading area, or else is broken up into boxes or columns within the reading area. In either case, the content is vertically sandwiched between a header and footer. Books and magazines are a good example of this.

Magazine Spread on Flickr by mikeweader11

Magazine Spread on Flickr by mikeweader12

The magazine spread shown above displays its main content and photos between a simple header (“book review”) and footer (page numbering, etc). Although print design and layout are significantly different from that of web, modern web design and layout techniques are increasingly utilizing principles found in print design. The concept of a “header” and “footer” is simply a natural part of that current tendency.

Readers Aren’t Used to a Left-Side Menu Link

This header-footer tendency is a way of conforming to the user’s desire to read a web page in a familiar magazine format, rather than in a bizarre format that places a common distracting element on the left side of the page (i.e. vertical navigation).

Don’t misunderstand what I’m saying here. I’m not saying that a site will be more usable if it follows print magazine layout methods, nor am I necessarily advocating the recent blogazine trend13; I’m saying that the vertical navigation bar is an unusual and unique element in web design that doesn’t conform to anything in the real world outside of the web, and thus can be a hindrance to a site’s usability.

Of course, as I pointed out, this issue is debatable. But I strongly feel that the current tendency towards horizontal navigation is partly due to the realization of many web designers and site architects that stronger focus on content will help create more readable and usable web pages.

Fly-Outs Aren’t as Usable as Drop-Downs Link

In whatever direction your navigation points, any sub-menus that you include in your navigation will point in the other direction. That is, if you opt for horizontal navigation, sub-menus will drop vertically, and vice-versa. Sub-menus are generally more usable as drop-downs than they are as fly-outs, the latter of which would occur in a vertical navigation bar.

Vertical Navigation Example with Fly-Out Menus14

Vertical Navigation Example with Fly-Out Menus15

Horizontal Navigation Example with Drop-Down Menus16

Horizontal Navigation Example with Drop-Down Menus17

A site visitor’s natural tendency is to find common navigation elements near the top, and if there are sub-menus, they would drop down. Drop-down menus are more natural to use, are more common (therefore are easier to figure out), and do not clutter the middle-left side of the page where the user’s eyes are more likely to be focused.

Also, a properly designed sub-menu system will include a visual indicator of the sub-menus. For horizontal navigation, a downward-pointing arrow, or triangle, is the most common method, and a right-pointing triangle would be used for vertical. While the downward-pointing arrow for drop-downs is universally understood and generally does not provide many usability issues, the right-pointing arrow indicating fly-out menus is not be as easily understood.

A right-pointing arrow on a website does not usually identify fly-outs. In fact, a right-pointing arrow is often used for call-to-action buttons, sliding content areas, and external links. Look at the screen shot below from CNN’s website:

CNN’s External Site Indicators18

CNN's Microsite Indicators19

The “money” and “sports” links in CNN’s horizontal navigation bar (above) have small triangles pointing to the right, which I’ve indicated with blue arrows and circles. These triangles are evidently placed to tell us that those links point to differently-branded sections of, indicating that these links are not directly related to CNN.

If these links were in a left-hand vertical navigation bar, the user would most likely think they pointed to fly-out menus — which would cause confusion when the fly-outs didn’t work. I think a Wikipedia-style external link indicator20 would be better in either case, but the method chosen by CNN works better in a horizontal bar because no one is expecting a fly-out menu in a horizontal bar.

What does this all mean? If a site is ever going to incorporate sub-menus into its navigation, a vertical menu might cause momentary confusion, whereas horizontal navigation would provide a smoother user experience.

It’s Not as Successful, According to Studies Link

In a study called Eyetrack III: What We Saw When We Looked Through Their Eyes21, results showed that top navigation performed better than left-side navigation. Interestingly, according to the results, even right-side navigation had better success than left navigation.

Below is a quote from the published report on the study:

“While testing several homepage designs, we varied the placement of a navigation element: top (under the flag or logo), left column, and right column.

“Navigation placed at the top of a homepage performed best — that is, it was seen by the highest percentage of test subjects and looked at for the longest duration.”

Left-Side Navigation Virtually Ignored Link

Related to this are the studies that have demonstrated the “F-Shaped” pattern for reading web content, shown below.

F-Shaped Pattern for Reading Web Content22

F-Shaped Pattern for Reading Web Content23

Even though two of the screenshots above show sites that have left-hand navigation, those elements on the pages did not draw the users’ eyes as often. In fact, the top sections of the pages were more successful in drawing the eyes than were the left sidebars. Therefore, expanding the content area to fill the left side of the screen is usually a better approach, since the user’s eyes aren’t going to bother with the navigation bar anyways.

The Few Benefits Are Negligible Link

Those who would argue in favour of vertical navigation (or at least put it on equal ground with horizontal), usually argue for reasons that are not very strong. One reason to vouch for vertical navigation is that it allows the use of longer link names, even allowing the text for a single link to span multiple lines. So, you could have short link names like “Home”, “About”, and “Contact” as well as long ones like Wet Process Systems24 and Elderly Woman Behind the Counter in a Small Town25. Those last two would be difficult, if not impossible, to attempt to incorporate into horizontal navigation, but are quite feasible in vertical.

Another reason vertical navigation might be chosen is that it simplifies the ability to update primary navigation links. In other words, if you have a horizontal navigation bar with five primary links spanning the width of the site, you would have to restructure the entire navigation bar in order to add a new link. On the other hand, with vertical navigation, adding a new link is quite simple.

The mock images shown below illustrate this apparent benefit to vertical navigation:

The truth is, those two benefits (namely, the flexibility to use longer link names, and the ability to easily increase the number of primary links) may be indicators that a site lacks purpose, is poorly organized, and was designed without much thought given to content or site goals. Boasting about the maintainability of a vertical navigation bar is not a valid benefit if it is accompanied by a vague purpose and poor structure.

In most cases, the long-term benefits of using horizontal navigation will largely outweigh the potential benefits of vertical, making such benefits easy to disregard.

Exceptions to the Rule Link

If this article constitutes a “rule” that you should never use vertical navigation, then some exceptions to that rule would potentially be:

  • An information-heavy site that will often require changes to the primary links
  • A site whose primary links must have long names
  • A site that uses both horizontal and vertical navigation
  • An e-commerce site with a vertical display of product categories and sub-categories
  • A minimalist design
  • A client who insists on it

There may be other compelling reasons to use vertical navigation, possibly related to design choices or space limitations in the top section of the site, but they would be rare instances.

Of course, the fact that I’ve listed 6 reasons why vertical navigation could be justified doesn’t mean it necessarily should be used in all of those circumstances. In most of those cases, horizontal navigation could still provide a viable solution if the navigation section is designed and coded with flexibility in mind, and if drop-down menus (or even mega drop-down menus26) are incorporated.

Effective Use of Vertical Navigation Link

As discussed, there will be situations where vertical navigation will be chosen — and it has been used nicely on a lot of current websites. Below is a showcase of some sites that utilize a form of vertical navigation in a respectable way. Most, if not all, of these sites fall under one of the “exceptions” mentioned in the previous section, while they ensure that content has primary focus in the user experience.



Auxiliary Design Co.29

Auxiliary Design Co.30



Poli Maraton33

Poli Maraton34

Resource Design [rede]35

Resource Design [rede]36

Chapters Indigo Books37

Indigo Books & Music38

House of Spy39

House of Spy40

Jodi Arnold41

Jodi Arnold42



From The Couch45

From The Couch46

Envira Media Inc.47

Envira Media Inc.48

Conclusion Link

Zeldman said it best: “Content Precedes Design”. If site architects and designers keep that formula in mind, they will have a greater chance of producing a successful user experience.

Often when a website is redesigned, the switch will be made from vertical to horizontal navigation, but rarely does it occur the other way around.

In fact, designers and architects are increasingly creating user experiences focused so strongly on content that navigation starts to become indistinguishable from content. This type of seamless experience is more effectively created when a horizontal navigation bar is used because horizontal navigation does not intrude on the content area and it’s still easily accessible visually and otherwise.

More often than not, a horizontal navigation bar will be a clean, effective, and user-friendly choice that can help a site reach its goals without hindrance to the user experience.

Further Reading Link

By the way… Link

Smashing Magazine is offering a student trainee position52 in Smashing Magazine’s Office in Freiburg, Germany. We are looking for a motivated trainee student who wants to learn about online publishing and editorial work. You can gather a first hand experience from one of the most successful blogs by working side by side with the Smashing Magazine’s editorial team. Details53.

And for our German readers: Smashing Magazine sucht Unterstützung für die Redaktion54 — Stelle: (Online)-Redakteur m/w. Details55.

Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
  41. 41
  42. 42
  43. 43
  44. 44
  45. 45
  46. 46
  47. 47
  48. 48
  49. 49
  50. 50
  51. 51
  52. 52
  53. 53
  54. 54
  55. 55

↑ Back to top Tweet itShare on Facebook

Louis Lazaris is a freelance web developer and author based in Toronto, Canada. He blogs about front-end code on Impressive Webs and curates Web Tools Weekly, a weekly newsletter for front-end developers.

  1. 1

    Very glad you had the exception to the rules at the end there ;)

    Just to reiterate, left hand nav’s shouldn’t be avoided – when used correctly they can make for a great top nav!

    People shouldn’t automatically assume top-level horizontal nav just because of trends or because it’s what they’re used to. Obviously needs to work with content on a per-site basis.

  2. 2

    I don’t do horizontal scrolling because my mouse wheel isn’t horizontal.

    Tbh it’s a gimmick.

  3. 3

    I think the effective use examples really highlight that the main problem is the number of links and the separation – often vertical menus feature more options than a horizontal one and these can become a monotonous set of links. There are too many vertical menus that stick a site map on every screen, where the space limitations of horizontal menus force you to consider where the user will want to go above all else and order that logically.

  4. 4

    I think these vertical menus are great for sites that don’t have too many links. The reason why I don’t like them too much is because often, clients would want to fill those out with more pages, while on a horizontal navigation, you are limited on the amount of menu items you can put so you tend to think about it more carefully.

  5. 5

    @ James

    Have you read the article???? It has nothing to do with scrolling


    Why do people post comments like that when they clearly have no idea what they are talking about….

    Interesting article, I might forward it to some of the hopeless print designers I have to work for who can’t escape from the A4 sheet of paper thinking patten and just cant grasp navigation and site structure relationship.

  6. 6

    I agree with this article however one point isn’t imho correct.

    ‘It doesn’t conform to real life reading’

    True and urm…nah.

    True in that we normally read left to right but that is for content only

    False in that since books have been printed (some little time), indexes and tables of contents have been vertical.

  7. 7

    What I have found is that a horizontal over time can become just as bloated as vertical. I think we as professionals needs to start looking at navigation in a different way then the norm. I’m actually working on a similar article which looks at new navigational patterns outside our traditional “accepted” forms of navigation.

    I’ve even seen entire sites where navigation and wayfinding were thrown to the curb in favor of a google search appliance…

    Regardless this debate has been on going for years.

  8. 8

    An insightful post. I’ve avoided using left-hand vertical navigation for a long time now, simply because I never thought it to be user-friendly at all. Glad to see I’m not alone in this viewpoint.

    I’d also like to comment on something that it seems most people who think that, when it comes to navigation on a web site, that one should use print magazines, etc. as good examples for ‘why left hand navigation is OK’.

    One point – yes, we read left to right … but! Most of us are right-handed and reading a web page is not the same as picking up a paper magazine or book.

    When we read web pages we also use one of our hands, not just our eyes. For most of us, that is our right hand to navigate the page.

    Placing navigation on the left-hand side of web pages forces the majority of users to travel their mouse over to the far-left of the page to navigate the site. Hey, this was OK when we did not have large screen resolutions (way back in the ‘olden days’).

    Nowadays users are on resolutions larger than 800×600 and 1024×768 and left-hand vertical navigation, imho, is simply user-UNfriendly in such cases, i.e. making the user do an uncomfortable swing to the left to navigate through a site, with every link *sigh*.

    Think about it, try it for yourself and see if you’re comfortable doing that, especially on a large site.

    On another note, regarding the exceptions to the rules part of the post:

    Recently I’ve had occasion to use a vertical navigation system for a client’s site, and the reason was for one of the exceptions you listed at the end of your article: The primary links have, by necessity, long titles, and try as I might, I could not shorten these suitably to fit on a horizontal navigation bar.

    I fixed the problem by creating a right-hand navigation system that adequately accommodated the link titles. It does a good job of being user-friendly + the navigation doesn’t look like a big foot stuffed into a too-small shoe just for the sake of using horizontal navigation.

    To solve problems one has to think outside the box, and be flexible, this is true for any situation, not just web design. The current ‘trends’ are not always the best solutions in every scenario, so I’m glad to see you mentioning the ‘exceptions to the rule’ – there are always exceptions.

  9. 9

    I love how smashing always finds a way to post an article about something I argued with my boss a week before. I think we’re being stalked!

    Great article. I would love to see more on websites from a usability standpoint, as it’s a very expensive thing to test yourself. I especially love the eye charts.

  10. 10

    Yawn, fundamentals are key, good use of screen real-estate, matters, and personally, the stock “happy” faces / uber intelligent, serious images as banners taking up vertical and horizontal static space is boring, useless and stale.

    Though from a “branding” standpoint, a necessary element I suppose.

    Many times I visually mask the right 2 inches of screen space as it is usually “noise”

    Poorly coded-executed, quirky fly-outs suck.

    Drop down hierarchical and / or nested make sense.

    Opinions are free.

    Truly creativity is a virtue, yet should maintain focus. a “cool” design, still gets stale over time. As in web, to regular standards, code / display to your audience, so I guess that will still lead to “goth” like sites, navigation and usability issues.

  11. 11

    As average computer screen resolutions get bigger, horizontal Nav becomes easier.

    Back on the good old days, it was a right royal pain getting it to fit on 640×480 and 800×600 resolutions if you didn’t want to write in miniscule font, pin your hopes on fuzzy text-based menu images, or get “a bit keen” and want to use long labels like “Contact Us” :)

    I guess that’s why there has been more vertical nav – it was the only quick and flexible solution to the “shop” problem above….and people have stuck with it as an accepted, established design pattern.

  12. 12

    Very useful post! Thanks!

  13. 13

    Awesome points made, exceptions to the rule always welcome for a objective post, well done! Nice to see From The Couch in the effective usage list, nice work guys!

  14. 14

    As an engineer, the Thora website seems perfectly clear to me. It says right there in the text that they are a supplier, and one column displaying their product categories is about as useful to me as it could be. If there was a large number of categories, it would get confusing, but with a restricted product line it’s fine.

    You’re doing yourself a disfavour by using it as an example of poor design, especially as it was one of your first jobs.

    • 15

      I agree with Louis here.

      Someone coming to the site without knowing what they are looking for would be lost without having to read that paragraph. If your links can describe some of the services offered it does make it easier and less time consuming – you could effectively determine quickly whether you have arrived at the right ‘Thora’ website for example.

      On more than one occasion I have found myself thinking i was at the right place until three pages later I realize it’s a completely different line of business.

      • 16

        I’m going to agree with Paul. It is not necessarily good design practice to cater for the widest possible audience.

        In this case, if you don’t understand what a ‘wet process system’ is, then burying the link under a products and services page is not going to help your understanding. The business is not targeting mass-market consumers and catering for them instead of the target market could equally be described as bad design.

        For mine, the main design features of the primary navigation area are – it needs to be immediately visible and it should not have too many items (admittedly the Thora page borders on too many). Vertical or Horizontal for me is a matter of visual aesthetics.

        • 17

          I’m going to partially disagree with both Paul and Allen here. The goal of a design is to communicate to its intended audience, of course, but doing so with disregard for a possible wider audience is somewhat short-sighted. Ostensibly, businesses are looking to acquire more customers, and focusing on only your current market could hurt you down the road.

          If you don’t understand what a ‘wet process system’ is, then burying the link under a products and services page will indeed help your understanding, because you now know that it is a service offered by Thora (rather than just some process the company purports).

          The human mind is naturally attracted to grouping and organization. “Filtration equipment” and “tanks” may be products that Thora offers, but is “Contact Us” a product as well? It’s in the same hierarchy of the navigation, isn’t it?

          The main navigation should be as streamlined and simplified as possible; the idea is to get you in the direction you want to go, not give the user every option possible just in case they might know exactly what they want. Navigation should be considered more of a set of highway signs than an atlas.

  15. 18

    Excellent article. For several years I have argued to clients, colleagues and supervisors that left-hand navigation is outdated and unnecessary. With well organized content and architecture, you’ll find you simply don’t need it (and generally mucks up the layout). That its, unless it just works for specific content and design. Form=function I always say.

  16. 19

    Thank you Louis for a very good article.

  17. 20

    The comments in the ‘It Doesn’t Conform to Real-Life Reading’ section were interesting however neglected to acknowledge Content pages in books and magazines. There is a clear parallel between vertical navigation and content pages as both are structured similarly and used as reference to find the piece of information required further on the book/website.

    • 21

      That’s a really good point. It makes me wonder how many other arguments can be made for vertical menus.

    • 22

      Absolutely. I came to this page looking for arguments as to just WHY my company is forcing my department to change to using a frankly sh*tty and unreadable template with horizontal navigation.
      No real world example of a structured, printed (natural reading) thing with a vertical menu? How about an address book? A lever arch file? A financial ledger?
      The pro for a horizontal navigation is that it’s at the top of the screen where the menu bar is (or used to be according to M$). The con is that it does not conform to English reading thought patterns. When we are searching for category information, we read down the left hand edge, exactly like a contents list. We scan a few words, then saccade back to the left whilst what we just read is processing and being discarded if it didn’t match. If the category matched what we were looking for, we continue to read along, left to right for specific information within that category.
      Look at a library shelf. Left to right gives small variations in title, up to down gives large variations in subject. The index on the end of the row is also arranged vertically.

  18. 23

    It’s a shame, judging by a large number of responses, that the one vital take-home piece of information in this article – “content precedes design” – has been lost; a victim of a provocative title, perhaps.

    Then again, “Vertical Navigation: here’s why it can be a bad choice, but why a combination of content, research and experience should dictate whether or not it should be employed” is less snappy and alluring. Headlines have to be designed too, after all. I guess someone wanted this one to pop more, and be more edgy…

    I was surprised to discover that the article makes no mention of the efficacy [or otherwise] of vertical navigation in a mobile browsing environment, where a lower resolution means even greater care must be given to decisions of navigation placement.

    In fact, the only thing more surprising was to find that no previous comment has mentioned it [edit: Kris is clearly a faster typer than I!]. It’s becoming less about the desktop with each passing year, folks.

    Still, an interesting and thought-provoking read, Louis. Thanks. I’d be interested to read a follow-up piece regarding the implications for mobile browsing.

    @Kyle Meyer: that’s a good counter-article, too.

  19. 24

    Everything nice but…

    unfortunatly I allmost allways use a vertical menu. I work in company where is no any process like “Careful Content Analysis” :/ in most cases there is no any content… it appears after designing process and all I get from client is a list of links (just like it was 10 years ago).

    so I am forced to use vertical menu :/

    oh. and sorry about complaining :)

  20. 25

    almost perfect:
    what happens if you have got an horizontal navigation that need to be translated in 17 languages and you can’t predict the length of each menu item?
    The temptation of going vertical is strong.

    Nice article though, especially the eye track resource and the example of left nav that works!.
    Well done.

  21. 27

    how odd. you argue valid points against the use of vertical navigation and then show the ‘from the couch’ site which exemplifies and illustrate these exact points – but then included it in the ‘effective use’ category.

  22. 28

    nice post

  23. 29

    I agree that the horizontal menu system in your top example looks dated, for sure – it might have looked dated if it sat at the top of the page also! But there is no reason why this particular menu layout can not be intergrated in to any site design. For sure, put the menu neatly at the top of the screen out of the way to save of space for visual content, but this doens’t always have to be the case. Site design should be more dynamic and free, especailly with today technology. Great debate, topic and nicely supported. Carl.

  24. 30

    interesting arguments! building vertical navigation is easier, but i prefer the rigidity of horizontal navigation because it’s an easy way to keep designers and editors in check! sometimes vertical navigation gets too long, but when planned right it can look good.

  25. 31

    My biggest worry for creating websites with top navigation only is the filling of content using a CMS. Most of our users want to edit their websites theirselves. In an ideal world, we could create either 1, 2 or 3 columns. But most CMS vendors only support one. This makes it hard to layout the dynamic text without it being 900+ px wide.

  26. 33

    Other than the eye-tracking studies mentioned in the article, there’s limited evidence to back up your argument – it seems based more or less entirely on opinion. Why can’t left hand navigation be used based on sound IA? I think the answer to why horizontal nav is more prevalent these days is the bias towards fixed-width designs, ergo it’s a trend.

    • 34

      Yep, just like Rob said.

      The argument that vertical nav = poor IA is totally bogus. It is perfectly possible to create good IA and use vertical navigation just as it is possible to create terrible IA and use horizontal navigation. The two are unrelated.

      In fact, isn’t that what the Zeldman quote you used is saying? Content should come first and the design it around it. Doesn’t that go against your primary argument (albeit with a huge caveat at the end) that navigation should be horizontal?

      I think you kind of proved it yourself with the gallery of sites that use vertical nav and work very well.

      While I’m at it…
      The CNN example is, as given, quite correct. But one would have to consider that if the navigation was vertical and on the left side of the page would the designer have used that arrow?

    • 35

      I have the feeling the eye-tracking-study doesn’t really backup the claim that horizontal navigation is better. It shows that people to not look at the vertical menu as long. But why must that be bad? The article here claims that the navigation should not distract from the content. So that would make it _good_ if people don’t look at it too long. Perhaps it was easier for them to understand so they _needed_ less time to check it out as opposed to the horizontal navigation?

  27. 36

    I think a vertical left hand navigation does conform to real-world reading. You can think of the navigation as a “table of contents” of the site; and in the real-world, ToC’s are typically arranged in a vertical fashion because it’s easier to show the parent-child hierarchy of pages/sub-pages.

    Also: to base a rule using a 4-year-old eye-tracking study that doesn’t cover navigation usability but rather, content reading, as supporting evidence is dangerous – even if it was done by the Jakob Neilsen. Why is that?

    First, the study tasks the readers to read the page content; the study was not about site navigation – so the use of it in this article’s context is misrepresented. If the study asked readers to “Find the About page of this website”, the results for the first screen shot would be different because, as web users, you’re going to look for the area that most resembles the primary navigation (which typically looks like a list of links).

    Second, usability studies are very subjective and dependent on the study design. They’re behavioral studies so it’s hard to set up a control versus test case scenario, like you’d do in a science lab or computer simulation. The results depend on the five people that just happened to volunteer for the study. Are those five people representative of the global 1.7 billion’ish internet users?

    Third, it’s hard to come with conclusive evidence from usability studies; the best we can do is guess using our experiences; not unlike, in my opinion, what this article has done. The Myth of Usability Testing on ALA discusses this where several usability teams were tasked to work on the same issue and the results and suggestions were very different from each other:

    It’s a well-written and well-articulated article – but I feel it should’ve given more emphasis on the fact that this is an opinion-based article. I can make 20 arguments FOR vertical site navigation, and call that a “rule”. They’ll mostly be my opinion based on my experience. For example, I personally like the list of links on Smashing Magazine’s right sidebar to find content versus the top horizontal nav. That’s my preference, that’s my opinion. In the end, it depends on project requirements and what the most effective way of presenting content is (and I think that’s what Jeffrey Zeldman meant about that tweet).

    • 37

      Jacob, great points here, thanks for your feedback. Couple of responses to what you said:

      You’re right that tables of contents in print are vertical, but they’re customarily on their own page. Websites are not like that, so I don’t agree with your point on that. I think my argument in that regard is sound.

      And regarding the “studies”, there were two studies that I mentioned. The first one specifically says that horizontal navigation performed better. And the reason I mentioned the Neilsen study was to emphasize the “F-pattern”, not necessarily to say that the study was about navigation. I think it’s fairly common knowledge now that such a pattern in users’ habits exists, and it’s definitely better to keep “common” site components out of the most important areas.

      You also mention that we should “guess using our experiences” instead of relying on studies, but I think that is just wrong. I can’t agree with that. A 4-year old study is much more authoritative than what I can personally “guess” at.

      And of course, as you mentioned, all of this is my opinion. I hope people start to understand that there’s nothing wrong with formulating an opinion on design that is not necessarily held by the blog that publishes the opinion. I’d love to hear yours or anyone else’s opinions in this regard. I suppose SM could post a notification on these types of articles, to show that it’s an opinion piece, but I don’t think that’s necessary. The comments to the article will certainly make that clear, as you’ve done here. :)

      Thanks, Jacob!

      • 38


        Your print design analogy is problematic. Obviously print design and web design are two different things – I think that’s lesson #1 in web design class.

        In order to claim that your argument is sound regarding tables of contents, you would have to agree that a design that only allows you to page forward and backward through content with a link to a table of contents is an appropriate and effective navigation method based on reasonable web information architecture for all sites.

        I generally assume that navigation (regardless of position and layout) is an inherent part of a website, which itself is a break from print design.

        Additionally, your example of the LTR nature of print design happens to be a good vertical reading example – Cookbooks list ingredients vertically, and it would be weird if their lists were horizontal. In fact, lists tend to be vertical by nature. And what’s (as semantically illustrated by the markup) more of a list than site navigation?

        You can’t have your cake and eat it too by mentioning the F-pattern of the eyetracking studies, then presenting images that show that the f pattern starts to the right of the left-hand vertical nav bar. Which is it? Is left-hand vertical navigation less viewed, or is it taking up screen real estate where users’ eyes naturally go? Maybe it’s just me, but that appears contradictory. Are you throwing the proverbial spaghetti at the wall?

      • 39

        Jacob is right, this is entirely your opinion- and that’s ok. But several statements you made were positioned as fact, when instead, they’re your opinion. Smashing Mag needs to vet this sort of misrepresentation in the editorial process before publishing. If you have data to back up your claims (which you do a couple of times, so kudos for that), cite your sources. Otherwise, these need to be clearly presented as opinion.

        ‘In general, people are accustomed to reading content that spans the entire width of the reading area’

        ‘the vertical navigation bar is an unusual and unique element in web design that doesn’t conform to anything in the real world’.

      • 40


        The first study was demonstrating that there is at least one study showing higher success with horizontal navigation.

        The second study (about the F-pattern) was showing the value of the left side of the screen. Thus, the point is: If horizontal is more successful and the left-side is more valuable, then the answer is clear: Use horizontal.

        I know that point seemed contradictory. I spent a lot of time thinking about that to make sure I communicated my point clearly, but maybe it could have been clearer, I don’t know.

        Anyways, thanks for your feedback.

      • 41

        re: Print analogy versus web design – You cited my main issue with that section right here – print != website. If I were to make an argument for or against vertical navs, I’d leave out the print analogy all together because it’s apples versus oranges in this context. BUT, if you insist on making the analogy, then I think the better analogy would be more similar to a Table of Contents. Remember – you brought up the analogy in the post, not me.

        re: two studies – I know, and to clarify, what I meant was “as one of the supporting evidence” which would’ve disambiguated what I said. I did read the first study, and again, personally I believe the “The Myth of Usability Testing” on ALA applies there (especially when the site the study was on uses vertical navigation, at least, as a secondary nav).

        re: F-shaped pattern – but the F-shaped pattern, if the study was designed specifically for evaluating site nav instead of site content (e.g. Task: “read the list of navigation links and find the About page link”), would also appear on the vertical nav if the list of links had headings (similar in structure to From the Couch).

        As users scan the vertical list of links, you’d see an F-shaped pattern that’s more dominant on the left-hand navigation of that screen shot. So in that respect, the F-shaped pattern doesn’t exclude the vertical nav if the context was “evaluate the site navigation” instead of “read the content”. But the argument above seems to imply that because of the F-shaped pattern, a vertical navigation is ineffective, when in fact, it is also applicable to it and would actually support a hierarchical vertical navigation under the correct context.

        re: 4-year study more authoritative: yes, if it was applied in the correct context, definitely. Otherwise, my guess based on experience and other studies on the subject would be as good, if not better. And I have not stated nor implied that guessing is better than usability study results; only that, in the end, you’ve got to evaluate your choice on a case-by-case project basis.

        And I must say that despite what I’ve said, this is one of my favorite articles here and hope that Smashing Magazine continues to go towards more of these opinion-based articles that foster discussions like the one we’re having now.

        This is one of the few times I’ve been compelled to comment here. This is one of the few times that I’ve come back to an article on the same day to see how the discussion in the comments is progressing (other than the articles I write on Smashing Magazine, of course, which I tend to check neurotically).

        Whether I agree or not with the content is moot because it’s an opinion. You have an opinion. And I have an opinion. It’s better to have these types of posts because it gives you a reason to critically think, explore, and react to the topic more fully than articles that simply tell you what you already know or can find on Wikipedia.

        On Six Revisions, I’ve been trying to get more of these types of opinion/experiential “blog” posts that facilitate constructive discussions among the readers instead of being only informational. This transition has been happening more recently, but I’m not satisfied with the ratio of informational versus opinion/experience posts on the site yet. This post, more than anything, has inspired me to progress further in this new direction.

        I commend your resolution to your argument; it’s much easier to play it safe than to provoke thinking, discussions, and counter-arguments like this post has. Well done.

  28. 42

    If you have a long menu and make it horizontal, you have two options:
    -make the page wider and force horizontal scrolling (what James refers to)
    -let the menu wrap.

    Not every site can have some simplistic 5-item menu.

    Not every site is only written in a single language. James totally has a point about horizontal scrolling because whenever you make a horizontal menu you must consider it, unless your menu is very very short.

    • 43

      I think it’s all about organisation. (I know this is hard to accomplish, sometimes almost impossible).

      Everything has a parent hierarchy but the parent itself right? If you can work out a way to drill down through this information then why not have only 3 links?

      Of course, the difficult part is presenting this extra information whilst keeping your page accessible. Now thats the hard part!

    • 44

      Thats not what he means at all

      He never mentions long menus, hes misread the title and not read the article

      You seem to have not read his comment

  29. 45

    Get real. This is ignorant, opinionated nonsense. You should know better.

    • 46

      Wow, another constructive comment!

      Great Article Louis, I think different opinions are great.

  30. 47

    seems to me that if you have a decent design it really does not matter if navigation is horizontal or vertical. we read plenty of things vertically, we get it. it is not like you are asking the user to read backwards. i think that if a site is designed well either way can work.

  31. 48

    The problem is wide screen monitors are stupid. I flip mine sideways.

    • 49

      Widescreen monitors are smart for designers so they have more art board space, but i do agree with you when it comes to web browsing…Manufacturers will hopefully build taller monitors soon…skyscrapers were created due to tech advances :) maybe we should take the initiative ourselves! we could develop monitors that are 30 inches wide but 5 feet high…no scrolling necessary then ^.^

  32. 50

    i’m looking forward seeing an article with principles of good undersites in navigation. beside that, great article!

  33. 51

    Zeldman said it best: “Content Precedes Design”?
    No he didn’t.
    Louis Sullivan put it better: “Form follows function”.
    But I’m just being contrarian. Nice article.

  34. 52

    Hey Louis – You really picked a good topic for this post.

    In a scenario where the site design should have horizontal structure but the links are more then it can be accommodated, UX experts jump into the picture as a relief for designers. It’s important to analyze which are the important links that need to be placed on top while others can be pushed down at the footer. Now days we are seeing a lot of site with links like – ‘About’ and ‘Contact’ moving down at the footer while purposeful links are kept as primary nav at top. This avoids:
    1) the trap of wrapping primary navigation into two lines
    2) in case a link in primary navigation has a drop down, when it falls the second row of primary navigation would hide.

    Hope it helps:-)

  35. 53

    Great insight. Made me wonder why I never used a main vertical navigation anymore.

  36. 54

    Bit of an odd article. As Jacob states, to use the Nielsen study to back up a point about vertical nav is misrepresentative in the extreme. If you look at the pictures you’ll see that the top bar of the ‘F’ is formed by users scanning the first line of content and reaching for the search box.

    The only navigational conclusion you might draw is that users ignore nav bars altogether…

    I think horizontal nav can be useful in that it does deter designers from making their top level menu too long, and it makes you think of shorter, more scannable labels. It has also become the convention.

  37. 55

    Oh, I think I’ve found the secret recipe for those exceptional vertical navigation bar.

    If you see among the examples, you’ll notice that most of them are placed on top menu area. Main content are placed under the vertical navigation menu.

    It’s now become logical. As the vertical navigation menu no longer consume too much of our attention, it becomes acceptable!

  38. 56

    I was pondering a while about this before finally finding I wanted to share in my comment. And I’ve to say Zeldman’s phrase said it all.

    Based on the examples here, it’s not really about which is better; vertical or horizontal. It should be really about which best fits the presentation of the content to fulfill the user experience.

    Monitors may be wider, but user’s attention span and focus would tire easily when eyes have to track too far a width. Therefore, we’ll soon reach a maximum width which we’d feel most comfortable and not make websites any wider.

    And because we can’t go wider, content can only go downwards. Thus, it’s not about whether it’s horizontal or vertical but how should the content be best presented to the user. :)

  39. 57

    Very interesting article.

    I believe that vertical navigation does have it’s place within web design however it is up to the judgment of the designer as to if it fits in. Blogs and e-commerce stores almost always have vertical navigation. A question I have is, why do blogs most commonly have a vertical navigation on the right hand side of the screen and e-commerce stores most commonly have a vertical navigation on the left hand side of the screen? Maybe its a standard users have come to expect by now, but why?

    Thanks for the good read Louis!

  40. 58

    Nice to see a Slovenian site on the front page of Smashing Magazine! :)

  41. 59

    So, you show an ugly webstie saying the reason why its bad is because of the type of navigation. Then you show more peer-friendly sites that use left navigation and say that its an exception.

    Your exception list seemed to indicate that your thesis shouldn’t be to NOT use left navigation, rather HOW to use it and expand more on those rules based on the more successful sites.

    I give this article an A, for almost ;)

  42. 60

    Nice article, and an interesting topic of debate. It would be even better, though, if you gave reasons as to how each of those examples at the end use vertical navigation in “a respectable way”. I’d also challenge the statement that “Readers Aren’t Used to a Left-Side Menu”. Not in the real-world, sure, but they certainly are on the web, since it’s an element used on a huge number (if not the majority) of websites.

  43. 61

    Those eye-tracking studies are worthless in this context, as you’re not testing two versions of the same site against each other. As someone pointed out, the aim of that study was for the user to read the content, not find information on the site.

    Get back to me when you do a real world A/B test.

  44. 62

    so cool ! nice work !!

  45. 63

    With so many widescreen monitors and netbooks available on the market, an extra wide letter box shaped browser window seems very common nowadays (according to stats for sites I have access to).

    In this scenario, a vertical navigation works well as it regains more visible vertical space for browser content, using some of that extra width that is otherwise difficult to fill with content.

    I don’t think there is a definitive way to go with horizontal or vertical navigation. Think about the content and audience first. Then you can make an informed decision about wether a horizontal or vertical navigation is more suitable for a specific web site.

  46. 64

    Whether to use vertical or horizontal navigation depends on the purpose of the site. Most “designer” sites like big bold graphics to grab the reader’s attention (“focus on content”) and it makes sense for the navigation to stay out of the way at the top of the screen. But, Louis, most applications (as in computer applications that are increasingly migrating to the Web) do better with a consistent vertical navigation. Just my 2 cents. Great article!

  47. 65

    One small example, feedback as a user and not some expert: when i am tired, using the mouse and keyboard continuously for the whole day, i really wish every horizontal navigation bar i come across could be stacked vertically – i don’t care it its on the left or the right hand side of the page. It’s way too easier to navigate down on a wide column that to navigate sideways on a narrow strip!

    FWIW, it only matters when i am dead tired. As far as accessibility is concerned, i think the same markup can be stacked up vertically or arranged horizontally using pure css – so that’s not even an issue!

    “sites built in that manner will often lack depth and fail to make their purpose clear”

    This, with reference to vertical navigation, is going overboard with your claims – totally baseless.

    The fuss made about “the fold” is a classic example of all the hype in the name of usability from stables that consider the user to be a complete mindless drone. Users adapt. Just give them what they want, available *where they expect it to be* – some sensible information.

  48. 66

    The little list of exceptions at the bottom is very important. On an information heavy site, top navigation can be painful, and just requires most clicks from users which UX experts agree is a bad thing.

    For a real world example, my company’s site (a publisher) gets literally 5 times the revenue from links to sales on our sidebar than we do our horizontal navigation bar.

  49. 67

    So well illustrated discussion, thank you.

  50. 68

    I’m an advocate that if you’re requiring a vertical menu it should be on the right. For one, as a right hand user it means less work to navigate because you’re concentrating on the right hand side of the page and also because generally the mouse will be in your right hand therefore the mouse will require less movement if on the right hand side.

    The biggest benefit however of the navigation being on the right hand is that people read the content before they navigate as we tend to read left to right having the content on the left just makes sense.


↑ Back to top