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

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

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

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

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

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

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

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.

Drop-Down and Fly-Out Indicators

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

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

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

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

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

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


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

By the way…

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.


  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

    This is one reason why I stopped using iGoogle — the other reason is the removed the hide/show toggle. Still looking for a new startpage for the moment I am using bing which is actually much better than I though it would be and the images are great.

  2. 52

    I wrote a short response to this article as I disagree with its content: In Defense of Vertical Navigation.

  3. 154

    To be perfectly honest, this is the dumbest article it has ever been my disappointment to read on Smashing Mag and almost anywhere!
    The author starts of by making a number of ridiculous and unsubstantiated (and unsupported) claims re: Vertical navigation, instantly contradicts himself (herself?) by providing excellent examples of VN and constantly confuses the usability/acceptability problems of VN with issues that are obviously due to poor typography, grammar and content.

    The inane, facile arguments seem reminicisent of people debating “the factual reasons why black people cant be good at Economics” or why “women just cant do ‘x'”, simply, start with some misconceived, predefined notion, then babble away with some pseudo facts and ‘evidence’ to support it!

    -Next up: Why Evolution is fake, and why Sarah Palin should be President of The United States!*

    *I can see this stupid post from my house!

  4. 205

    This is the first article on SM that I have disagreed with.

    The “Exceptions to the Rule” gallery at the end is laughable. If everything stated is so true and so right, then these sites wouldn’t ever dare use vertical nav. Especially Porsche! For shame!

    Anyway, I don’t think the article holds water, pointing to the only research freely available on the internet to support its theory. Every article talking about reading patterns point to that one study, because of this.

    It’s a toolbox. You use the right tool for the job. Every situation is different.

    • 256
    • 307

      I agree with Jason. Generally I do go for a top nav but there is no solid rule for web design, you do whatever is appropriate for the site and approach each situation uniquely, making this kind of generalisation is just silly.

      Not sure why they included the examples at the end – they clearly contradict the rest of the article!

      The problem with a post like this is many people will take it as law as it’s posted on smashing magazine, even if it is just an opinion of one person.

      Not sure why smashing have dedicated an entire article just to defend a flippant remark in a previous post.

      There are no rules to web design and don’t follow trends!!!

  5. 358

    Unless in a store situation, with tons of information choice’s and sub-choices. Vertical Navigation should be obsolete.

    Chris has crabs.

  6. 409

    Vertical nav and horizontal nav are equal oppurtunity offenders. The limitations to the effectiveness of a sites navigation depends on how well the designer can create a functional, harmonious, and congruous navigation that effectively compliments the design.

  7. 460

    I was diggin’ the vertical nav on the porche site… but I have to say I’m definitely a fan of the horizontal navigation in most cases.

  8. 511

    Another fantastic read by smashing! I really haven’t found vertical navis to be that appealing, guess i need to refresh on that!!!

  9. 562

    There are two things that I noticed reading this article. First, you state that users shouldn’t be drawn to “pretty navigation bars” on every page and be distracted from the content. Then, later, you say that studies have shown horizontal navigation to be more successful because users look at them more often! That does not make sense at all.
    I’ve always learned that navigation is doing its job if a user can find what they’re looking for within a fraction of a second. If anything, those studies show that, BECAUSE the user isn’t focused on the navigation long, it IS effective. But, to be honest, those screen shots don’t tell me anything about that either; did the user in question even navigate in that instance or did they not leave the homepage?
    You can’t build “a solid case against using vertical navigation in modern webdesign” when you completely disregard important aspects of usability, the material that is “shown by studies” is incomplete and you discredit your own previous statement by following up with stating the complete opposite!

    • 613


      You’re right, it does sound like a contradiction regarding drawing the eyes. A few commenters have pointed that out, so maybe the argument needed more refining. My point was that we want users to focus on content in the content area, and not waste prime screen space. I think a vertical navigation bar infringes on valuable content areas that could be used for more important things.

  10. 664

    I can’t even finish this article. The author says, “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.”

    When he says that, he shows his complete ignorance of the value of a good navigation system. Navigation IS the internet. There IS nothing more important in a website than the navigation. (Notice that I did not say webPAGE, in which case an argument could be made.)

    Placing the “value of the navigation” argument within the “vertical vs. horizontal” argument is a huge straw man argument that has no place within this discussion.

  11. 715

    One of the first times I’ve been compelled to comment on a Smashing article.

    There are several contradictions that have already been pointed out, but are worth restating: if content precedes design, then sometimes content will dictate vertical navigation, so you can’t really extrapolate that vertical navigation is, as a rule, verboten; if there are plenty of great examples that show effective vertical navigation, again, how can we rule it out?

    I understand that the author is trying to distill design into a set of easily remembered heuristics, but in this case, the advice is simply poor.

    This article should have been one about content & context, and how, as a rule, we shouldn’t marry ourselves to a single paradigm when designing navigation – that our content, site metrics, usability considerations, site architecture, and targeted user behavior should be the warrant for our designs – not pure aesthetics or convention.

    Questions we should be asking: how does navigation design differ when designing an information-rich portal versus a Flash-heavy marketing campaign? What about a task-focused web application? That same site, but for an iPhone? Would we consider WordPress a failure because the navigation almost all of use is a left-aligned list? What if the domain for which we are designing naturally falls into two-dozen discreet chunks of equal priority? What does scannability say about lists? What does Fitt’s law say about our ability to hit targets that are 1000 pixels apart? Does our information architecture warrant split navigation, progressive reveals, a browse hierarchy, a wizard, or a rich site map footer?

    We owe it ourselves to think through and design for each and every problem individually. If we don’t, we’re just monkeys, not designers.

    • 766

      Kris, thanks for your thoughts. You bring up some good points, but I think you and a lot of others have missed some of the subtleties in my argument. Maybe I wasn’t clear enough.

      Although I referred to my overall argument as a “rule”, since I had “exceptions” to the rule, then obviously it’s not really a rule. My article agrees with you: Content will sometimes dictate vertical navigation. So, I’m not sure why you view that as a counter-argument, when the article obviously agrees with that point.

      Your other points are great, and many of them would be great topics for future articles, thanks.

      • 817

        Fair enough.

        Except that that many people will read this and say “well, that’s that, I’m not using vertical nav, Smashing Mag says not to.” The takeaway should not be “don’t do this, don’t do that.” The takeway should be, do what’s right – and to do what’s right, you need to consider the ups and downs of EVERY navigation paradigm.

        You should do a follow up that demonstrates the perils of horizontal navigation – namely, width limitations, human-computer interaction issues, scannibility, etc.

      • 868

        Hey, why don’t you write it? You brought up some excellent points, and I’m sure SM would be happy to consider publishing it.

  12. 919

    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.

  13. 970

    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.

  14. 1021

    Great article. I enjoyed reading it, but the first few arguments seemed a little vague. I still don’t see how having a vertical menu discourages information architecture.

    • 1072

      Because with a vertical nav, it’s easy to say “here are all the pages, lined up nicely on the left side” with no depth or thought given to any sort of hierarchy.

  15. 1123

    take this entire article with a grain of salt and expressly for your own information – period. what you all seem to neglect is this: its not what we want for the client, its just what the client wants. before you all start nerd raging me, remember, we cant write our own checks unless we have our own company. people can talk about studies all they want, and as valid as they may be, is the study paying your bills? are the people making the study paying your bills? unless you can answer both of those questions as “yes”, then this whole article means little to none to any designer. as good designers, we are called to be just that. it has been my experience that content comes first, and the client comes first when it comes to making containers that fully support the content i.e. a web page/design/site whatever. one could have an award winning design with a horizontal menu all shiny and good to go, but if the client doesn’t like it, what does it matter? this article is awesome in that, it makes us more aware of criteria that we may or may not be aware of and therefore should take solely for knowledge. i dont know about you guys, but i’m in it because i like it and i like the money it brings me.

  16. 1174

    Good post, interesting idea. The only problem i see here, you write a lot about the negative side, but nothing but images about the positive side. Some text would be nice about the fact, that you choose some websites as an example with Effective Use of Vertical Navigation. Does light gray color in vertical navigation of is a really good example?

    • 1225


      Part of the reason I chose those sites for the good examples of vertical navigation is that they do a good job of placing visual focus on the content area. So, they weren’t necessarily sites with good-looking navigation, but the made effective use without taking away from the user experience too much.

      But in many of those examples, I personally would still prefer a horizontal nav.

  17. 1276

    All your hnav are belong to me. Based on the title of the article, I was hoping for some stronger points here. Seems a little contrived to me. I say bring on the 3D navigation. I’ll wear the funny glasses.

  18. 1327

    Great article! Well written, focused. I’m in the sketch-up of my first ‘real’ web design, and the allure of being ‘unique’ had me considering some left hand options. We’ll go ahead and cross those off the list… thanks…

  19. 1378

    Hi, have to agree with @jacob gure, the eye tracking study relates to content (ie, F-words, F-headings etc.) and not usability. Just to add that the website, one of the most frequented sites on the web that has won many awards for usability uses …. left hand horizontal nav. Cheers AL.

  20. 1429

    Clearly you feel strongly, and make some good points. But I do not agree that a particular approach should be set aside because *some* designers aren’t thinking through their design. Seems to me that setting aside one approach in favor of another across the board is just trading one set of blinkers for another.

    I agree that content comes first – but audience needs come a very close second. Most of the companies I’ve supported still have a dominant 1024×768 audience. For many sites, writing goes left-to-right, and so horizontal space gets used quickly. Scrolling to the right is less intuitive than scrolling down for most of my audience, so when necessary, or when I need to allow room to grow, my menus go down rather than across for space reasons.

    While some may have gone to horizontal nav, some fairly major sites have gone the opposite route. Amazon, former lord of the tabs, went the opposite route: to a vertical global nav.

    I love both forms in different contexts, along with less traditional nav formats. I don’t think we can possibly write off one or the other – each case requires separate analysis.

  21. 1480

    Wouldn’t you loose user focus when going from primary horizontal navigation to secondary vertical – which was not there on the entrance page?

    • 1531

      You start with some faulty assumptions — that your home page should look the same as your deeper-level pages, and that complex sites should show their full navigation up front. It often makes sense to hide deeper, less-utilized structures up front, then reveal them later when needed. This is referred to as the “80-20 rule,” where 80% of the use will happen with 20% of your links. Those should be the links emphasized.

      Check out or for good examples of no-sidenav home pages that have really useful left-hand menus after the home page.

  22. 1582

    I want to genuinely thank you for taking the time to write this article, but I gotta say, with usability stuff like this, I really miss the rigor of fields like psychology and sociology. While we should try to draw rules from evidence, the amount of evidence you’ve cited is not enough for the broad claims your making, and in fact sometimes you present no evidence at all. I really think some citations are in order for the following claims:
    1. “Fly-Outs Aren’t as Usable as Drop-Downs”
    2. “Readers Aren’t Used to a Left-Side Menu”
    3. “the right-pointing arrow indicating fly-out menus is not be as easily understood.”
    4. “It’s Not as Successful, According to Studies.” What you have shown is “that is, it was seen by the highest percentage of test subjects and looked at for the longest duration.” Definitions of success are extremely important, and I’m not sure being looked at for the longest duration, as other have noted, should be considered a “success.”

    Not only does the author make several claims without providing any evidence, but also disturbingly assumes that *one* study of eye tracking (which others have pointed out was somewhat misrepresented) should be enough evidence and information from which to draw a fairly general principle. Any serious social scientist will tell you that it takes multiple well-designed tests, replicated and performed by multiple groups/individuals, before a line of evidence should be considered high-quality.

    As a sociologist / web designer, I really feel we need to bring much more careful examination to our discussions of usability practices, which is essentially a discussion of social science — a field which most designers have very little experience. The social sciences are essentially fields packed with logical-fallacy landmines, in that it’s easy to draw the wrong conclusions from what seem to be straight-forward results. I don’t necessarily disagree with many of the postulations the author puts forward, but I disagree with the way in which he has drawn his conclusions — which is to draw broad principles from a small pool of evidence.

    • 1633

      I agree with you Brian…

      Consider these points that the author discusses:
      1. It Discourages Information Architecture:
      When the author discusses the “Thora” website, all he proves is that, in his opinion, he did not plan the site architecture properly. This certainly does not prove a case against vertical navigation

      Louis says “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.”

      So you could as well have those 3 links on the left hand side (vertical menu)

      2. Design Should be Based on Careful Content Analysis

      Everybody agrees with this statement…but how does this build up a case against vertical navigation?

      3. It Wastes Prime Screen Real Estate
      That a website should be designed with careful planning is a “given”. Taking this as a rule, if the website content is such that it covers the whole screen space, then certainly, do not use vertical navigation. But then, I think this would be obvious to most designers, and consequently, a vertical navigation would be avoided. In most blogs today, links extend vertically all the way down the page. I do not think they have any
      problem managing content “laying out”, and this certainly will not be construed as “a Waste of Prime Screen Real Estate”

      4. Readers Aren’t Used to a Left-Side Menu
      Who says so?

      5. Fly-Outs Aren’t as Usable as Drop-Downs
      This is just a “without any basis” remark

      Louis has given 6-7 reasons why, in his opinion, vertical navigation shouldn’t be used.

      He also has given 6 reasons as to why a designer could go for a vertical navigation

      How can he classify what is the rule and what is the exception?

      All in all, I think the title of this article should have been ” When to use Horizontal Navigation & When to Use Vertical Navigation”

  23. 1684

    Louis – well written article. i don’t have much feedback, other than the obvious: based on the vigor of the responses you’ve received, and the sheer amount of highly opinionated feedback, it’s pretty clear that this debate will continue to rage on for years to come!

    thanks for the read! again, nicely written!

    Bruce @transcendwebs

  24. 1735

    mmmm… i dunno. you make a few fair points, but undercut them by saying, basically, that it’s ok to use vertnav in certain situations. how is that different from how we think about the design process now? you tailor your solution to fit the informational need, surely, and while i agree with you that we shouldn’t just slap in a vertical menu just because, every case has different needs and should be addressed individually.

    The horizontal and vertical menu bars are tools in the designer’s toolbox – it doesn’t make sense to say that we should throw away the hammer coz most of the time we need to use a screwdriver…

    Thanks for the post tho – thought provoking.

  25. 1786

    What do you guys tink from this vertical menu i made for a client?

    I have used animated gifs as the rollover states. Doesnt work as i would in Chrome though.

  26. 1837

    Disagree with this article. Both strategies can work. Points missed:

    1. Vertical navigation links can be perceived as a block, without moving your head too much. Hence they are easier to get oriented with. this is both good for 1st time visits, where you don’t want the visitor to miss out on anything that might draw them in, and for the long-term, where you want your regulars to feel at home and be able to get places fast and easy.

    2. While they do take up valuable real estate, vertical nav bars CAN be incorporated wisely into the design, as in the examples given above. This makes deep pages more accessible, so the website is perceived as a whole – and moves you towards the ideal of making the interface transparent. Esp. important for multiple-category websites. I challenge you to find a gaming industry website, for example, that makes the links in the right third of its horizontal navigation bar seem welcoming.

    3. Long category names for links give more perceived value for being long, period. That they are adapted in modern-day blog post names means long-copy headers withstand the test of time. In any case, the traditional header length in classic advertising is up to 17 words long.

    4. Vertical design creates a better sense of hierarchy, and therefore makes traffic flow in a more controlled manner. This is important for example for presenting an idea (your classical start-up website), or for creating a structured sales process of high-cost products. You can also number the links and create a de-facto tunnel. It makes less sense to number horizontal links.

  27. 1888

    I actually prefer vertical navigation, since I’m used to it. You make a good case for other styles, but they’re far more related to style and graphic design, which is not so important if you’re after content. If you go to sites such as, you’ll see that as an e-commerce site, it’s far more useful to have a vertical menu, since – as you note – it allows greater freedom for adding new content (categories, information and so on).

    Other than that, an enjoyable read. Keep it up!

  28. 1939

    What’s the point of this article? At one hand, you try to make a strong case for horizontal navigation. Then you mention some benefits of using vertical navigation. And the conclusion is that “content precedes design”.

    If your conclusion is that content really precedes design, then why think of design patterns without considering content at all? Aside from the quote from Zeldman you don’t mention anything yourself about designing for content.

    Also, your arguments are inadequate and have been pointed out well by Kyle Meyer. I really don’t understand how using horizontal menus will magically create better information architecture. I enjoy simple websites with simple navigation, but that doesn’t mean it’s the best solution for every case.

    If you like horizontal menus because they look good and it’s trendy, just point out a couple good looking horizontal menus. But don’t provide pseudo-research arguments because your audience is smarter than that.

  29. 1990

    I think this article could have been written a little bit better, there’s no concrete conclusion why vertical navigation shouldn’t be utilised. It depends on your design whether a vertical or horizontal navigation should be used for a site. I totally disagree with this article.

  30. 2041

    I personally prefer horizontal navigation, but I’m often creating designs with vertical navigation at work. A lot of the work we do uses content management systems where the client can add new pages themselves, and you never know how many pages they will adding in the future. Vertical navigation works best for these projects to accommodate the addition of more links.

    I believe which navigation style you use really depends on the project. It is important to know the benefits and limitations for both, so you can choose which navigation is more suited for that specific website.

  31. 2092

    Left side vertical is bad and annoyingly in your way, but right hand side vertical navigation is great : ) Especially if you do not need to fill the page with clutter. Some people find they have two much space, remember thinner columns a much easier to read, having readable information all the way accross a page is not good, that is why books and newspapers divide into columns it is easier to read, the eye can jump to the next line.

    Remember there are people who do not want to fill their website with huge loudly colored ads not all businesses work in this manner, smashingmagazine yes, but standard business does not need to advertise others, only their own product

  32. 2143

    JohnQ said”
    I think this article could have been written a little bit better, there’s no concrete conclusion why vertical navigation shouldn’t be utilised. It depends on your design whether a vertical or horizontal navigation should be used for a site. I totally disagree with this article.”

    Welcome to the club.. what we are seeing here, to me, is more than an idiotic and sophomoric “article” about navigation, we are basically seeing the death of writing. In this twitterish/Textspeak world, the ability to produce a cogent, verifiable and quantifiable article (vs another goddamn list of ‘icons’ or ‘wallpapers’ or some shit) is rapidly atrophying like the vestigial appendix.

    This particular article, I’m convinced, is “POST BAIT”.. In other words, a totally bullshit article (and known to be such by the editors) but allowed because it will ‘generate a lot of posts and activity’ .. this whoring of the editorial process will only lead to deterioration in the long run. People can sense when they are being ‘gamed’ with inflammatory ‘articles’ known to have no value, but presented solely for the controversial (stupid) content and the useless heat (without warmth) that they generate.

    • 2194

      I disagree.

      • 2245

        @Stephan Wehner : Have you read the article properly? There’s a clear argument about vertical and horizontal navigation but there isn’t a solid conclusion why front-end developers shouldn’t use the vertical navigation method.

        There are issues with horizontal navigation, as describe by this article, which is not scalable. This scalability applies on vertical navigation as well. Thus, the way front-end developers build their navigation depends on the design and how the content of the site should be presented to the user.

        Take a look at this generic example, if your client tells you that there are 30 navigation links that need to be present on the site, how are you going to design and build this? Also the client wants these navigation links in 150×25 dimensions and must be an animated image. What are you going to do, a horizontal navigation? But wait, this article’s argument is not to use the vertical navigation.

      • 2296

        John, find me a client who will ask for what you’re saying and I’ll write an article denouncing my entire argument. Your example is completely unrealistic, and has no validity in this argument.

        Of course, even if it was a realistic scenario, if any client asked me to do what you said, I would kindly tell him to take his business elsewhere.

  33. 2347

    Louis, thanks for pulling this information together in one place. Most of this is stuff I’ve logged through experience but it’s nice to see it organized so well…like a nice website with a horizontal navigation.

  34. 2398

    What a lot of noise about not very much.

    Sometimes horizontal navigation works well; other times vertical navigation works well; sometimes some combination works well.

    As a designer, you need to look at what the site’s users and owners want to achieve, and design navigation appropriately.

    Why make such a song and dance about it?

    I could very easily write an equivalent article about the shortcomings of horizontal navigation.

    These things are what any half-way competent web designer should know already.

  35. 2449

    Dear Louis

    I thought this was an article that needed to be written and needs to be read


    The 2 most rigorously user tested, and eyetracked homepages on the planet don’t use horizontal nav.

    I would say they know something that is not accounted for in your article, and that worries me.

    • 2500


      Thanks for your comment. You need to look at those sites again. What is the primary means of navigating both Yahoo and Amazon? The answer is “the search box”. That is their primary navigation bar, which is why on both those sites, the search box is huge and is at the top/middle of the page, horizontally.

      So, yes you’re right, they know something: That horizontal navigation works, and that’s why they use it.

  36. 2551

    This whole topic is pointless. This very website uses vertical navigation in addition to its horizontal 6 links up top.

  37. 2602

    I think I only ever use vertical navigation in minimal site designs, but I think the case against readability is not so strong.

    Navigations are essentially a list of elements, and we are accustomed to read lists vertically. Be it the grocery list, table of contents, etc…

    I think the eye tests are interesting. One thing vertical navigation really has going against it, is that if it is long, it gets farther and farther down the page which is more of a hindrance to eye scanning than farther and farther right. But I wonder in those examples if you wanted your visitors looking over your navigation that much, or focusing on your content… maybe the extra eye scans on the horizontal navigation meant the user was more distracted from the content? Just a thought.

    • 2653

      I don’t want users to spend time on the navigation… I want them to read the content (and know where the nav is for when they need it). I don’t want them spending time gazing at the map. That’s how I’ve always interpretted the first heat map image.

  38. 2704

    Horizontal nav is fine…
    I like to offer users the chance to see what their options are within a current section… to always move ‘forward’… when they click. This frequently means starting with a horizontal nav, but then, after one choice is made, displaying that section’s other pages in a vertical nav.

    How do you show that to a user with a horizontal nav? The options are so often hidden behind a dropdown, especially if that’s the first page a user sees.

    What are good examples of how to do that within a given section? even if you assume the section starts from a horizontal nav?

  39. 2755

    great article!

    thanks for posting, very interesting and thought provoking read.

  40. 2806

    You seem to have conflicting references in your article.

    First, you link to an article and say that, “… you also don’t want navigation to unnecessarily crowd the left side of the page, which studies have shown will draw a user’s eyes more often.”

    Then, you quote another article that says, “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.”

    Aside from the fact that the studies seem to contradict each other, the fact that horizontal menus were “looked at for the longest duration” should logically encourage all of us design vertical menus since as you pointed out, “…we don’t want our users to be fixated on pretty navigation bars – unless they’re navigating.”

    My personal belief is that the prevalence of horizontal menus is due more to popular design trends rather than outdated technology. The web is a constantly changing, ever-evolving entity where people are always looking for the next way to stand out. Once everyone is hooked on horizontal, vertical menus will most likely take off again as it will set people apart from their competition.

    Great opinions though.

    • 2857

      We want our users to see the navigation, but it shouldn’t take the most valuable part of the screen, which is the left side. That’s essentially what I was trying to express. I should have expressed it more clearly and not allowed that seeming contradiction.

      The point of the second study was to show that even when there is vertical navigation, it’s not focused on, so there’s no point in having it there. Whereas, earlier in the article, I was talking about the value of the left side of the page.

  41. 2908

    This is the Web. There is nothing we “should not use”… We need all the tools we have to do things right regarding content and audience…

  42. 2959

    Another wonderful exception to the rule is the new Vera Bradley web site:

    It seems that photo-heavy sites can still succeed with vertical menus.

  43. 3010

    You only seem to cover _left-hand_ vertical navigation. What about vertical navigation on the right?

  44. 3061

    I really appreciate your article. I get the subtle arguments. You’re not relating fast and hard rules, your giving food for thought for those who “set” themselves to certain ways of design and cannot see the benefit of adaptive design based on well structured content.

    Or for those who do see design as “decorative” and not integral to user navigation.

    “Those” being, in my experience, IT professionals and uneducated clients whose personalities are strongly in the “red” spectrum of decision making.

    People that I, unfortunately, have to deal with often.

    Perhaps an article entitled “Which are you? Strong Foundation or Brick Wall?”


  45. 3112

    Whether a website which has a vertical on left/right or a horizontal on top is depending on the content. That is why information architects and web designers have to work hard.
    We could see left side vertical navigations often a while ago (also vertically flipped “L” letter navigations); my first website design has left vertical navigations as main (in 1999). The vertical navigation system was flexible and expandable for future when the information has to be added as a high priority one. However, numbers of information didn’t bring users goals. Bad usability and experience.
    Most of computers are made and we have become familiar with scrolling down instead of to the right so save the space of width. Again, the way of representing information on a website is depending on the content. “Trendy” style doesn’t achieve users’ goals.

  46. 3163

    Régine Lambrecht

    January 16, 2010 1:39 pm

    Horizontal navigation is dangerous with multilingual sites : you never know if you will have enough space in German, for instance. It is also dangerous in case of font-only resizal. It is dangerous for further content growth (what if you site evolves and adds sections ?).

  47. 3214

    Had a good read of this article, after the title caught me eye, and scared me silly.

    Having read a dozen or so responses, I’m inclined to state, this argument is bolx. The examples of vertical prove this.

    It’s really all about what the site does. Take SmashingMagazine – it doesn”t need vertical nav, because its more of a blog than a website. I come here, because I click an interesting tweet, or bookmark – I come to the page I intended to read, I do what I came here to do, and I leave.

    Take a look at BBC – many brands within BBC websites. The main one… magazine layout (because, where do you start). News – verticle… cause of all that information, and it’s listed in order of importance. Radio One – horizontal nav… because it can – every visitor has their own vision of whats important to them – so vertical works.

    I’m a printer – I use both horizontal, and vertical – the horz is for client area, while the ever growing and changing product list is vert. I’ve recently introduced a massive footer, to stick anything that was starting to clutter up the left nav.

    I really don’t want to read that vert nav isn’t cool. It’s just not needed on top level web 2.0 sites – Twitter home page… hmm – not needed.

    And then, there’s the SEO value.

    It’s late, I’m clocking off. Thanks for the article, I feel better now – vert is here to stay.

  48. 3265

    This whole article smells like comment bait. If you want to keep usability a science, not a free-for-all opinion fest, you should really back up those personal peeves. If you want to make a recognisable information-based website, go with a structure that is known and don’t change a winning (Higher Click Trough Rates + more Pageviews) team.

    Header, VN left column. Main content center column. Aside content right column. Footer. Making money since 1999.

    Dropdowns always need a fallback for users with shoddy browsers or javascript off. You would be the first placing those fallback dropdowns in a Horizontal Nav on the main Category.

    There has been research showing that the Golden Ratio does not fair well in communicating information vs. the older standards. There has also been research showing that people view the Golden Ratio as automatically aesthetically pleasing. Webdesign is always a marriage of factors, but you talk like VN does not deserve some love at all.

    A person forcing these views like rules and talking about “facts” where there are none, sounds like a stubborn boring person.

  49. 3316

    Hi Louis,

    thanks for you thoughtful post. You make some interesting trend observations.

    We did a study a while back comparing a left navigation with a *right navigation in an A/B test: Not reported in that study are the results of a sub-test we did on focus of attention: where do people look?. It turned out that the left navigation actually proved to have a lower focus on the content of the page than the right navigation. (I mention these findings briefly in my book, but they are otherwise unpublished (

    Perhaps, though, you’re making an argument that doesn’t really need to be made. It’s not really left versus top (or versus right). All are potentially viable arrangements. Indeed it depends on the content and the situation.

    Actually sites with very large information architectures may *benefit* from a left navigation. (So I disagree with your first point). Take Amazon, which, BTW, moved from horizontal tabs to a vertical nav on the left. (The fly-out isn’t very good, though, is it?). In this case, it’s actually the large IA of the site, in part, that calls for a left navigation.

    A left navigation also allows for longer labels, in general. And this in turn gives better information scent. (It also makes localization into other languages potentially less problematic).

    Or, check out what the NY Times does: the navigation starts out on the left and then moves horizontally deeper in the site. (Probably to give more focus on the content).

    So you don’t really need to pit the layouts against each other, IMHO, even if there is a “trend” in one direction or another.

    Again, thanks for your insightful post. I enjoyed reading it and looking at the examples.

    James Kalbach

    • 3367


      Thanks very much for your thoughts on this topic.

      Regarding some of the benefits you mentioned related to vertical navigation (lanugage, long labels), yes, those are benefits, and a few commenters have pointed those out.

      Regarding what you said about NY Times and Amazon, however: I don’t think their left hand navigation bars are relevant in this discussion, because, as I pointed out in a previous comment, Amazon uses the left bar as a secondary means of navigating the site. The primary navigation for Amazon is the horizontal bar at the top that has the search box right in the middle. That’s how users navigate Amazon, through search.

      And, although it’s not as prominent or as important on NY Times, I would make the same argument in their case as well.

      So in both those examples, they would fall under the “exceptions” that I mentioned, one of which was “a site that uses both vertical and horizontal navigation”. I also pointed out in the introduction that I was specifically referring to primary navigation in my argument.

      Anyhow, I will definitely look at those links you provided, and thanks again for contributing and enjoying the article.

  50. 3418


    No offense meant, but this is just another article offering no real solution to a real problem. Instead it presents an opinion, based upon a temporal observance, as a rule.

    The only “rule” I have found true is that the relationship between design and technology is in a constant state of flux and will remain that way for as long as we live. As such, we adapt and use our design skills and function solutions as they fall within the ebe and flow limits of technology.

    For example, when real estate was tight, we crowded everything together as best we could. Now that real estate is more spacious, we are have more room to present our ideas about design and function. Who knows what technology will present tomorrow?

    Using studies like the F-Shaped Pattern to confirm a subjective argument can be very wrong. For example, one could conclude that all menus should appear within the red areas of the text. Would that solve the menu placement problem? Of course it would not, for that solution would create it’s own set of problems. Therefore, such claims demonstrate that such studies should not be taken out of context and extrapolated beyond their scope.

    As for me, I am open to all menu designs and see no “rule” as to their application. The only “rule” is to provide service for my clients.

    I have clients who insist that everything they can think of must be presented on the front page of their web site with no regard for usability or design. Additionally, the numbers of menu items and lengths of text within their menus do not fall neatly within a simple top menu solution. The clients simply have services they want to show and they want to show everything they have. In their thinking, they are the client, they want it, they are paying for it, so what’s wrong with that? Actually there’s nothing with that if you look at it from their perspective. Besides, who are any of us to tell our clients what will work for their business?

    I also have other clients who simply want customers and will listen to my reasoning. As such, their web sites follow function –however, it’s function as *I* believe proper. But my understanding is as limited as any other and my answers often fall short in the long term.

    Seldom in life do you have “rules” that stand the test of time. So, your followers may move everything from left to center, but in a short while there will be another lead lemming shouting another direction for people to take. That’s life, however, in realizing that sometimes makes taking the road less traveled a better choice.

    Food for thought.



↑ Back to top