[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"\u002Farticles\u002Fvertical-vs-horizontal-navigation":3},{"id":4,"title":5,"body":6,"date":157,"description":158,"extension":159,"head":160,"imageUrl":28,"meta":161,"navigation":162,"ogImage":160,"path":163,"robots":160,"schemaOrg":160,"seo":164,"sitemap":165,"stem":166,"__hash__":167},"articles\u002Farticles\u002F04.Vertical-vs-horizontal-navigation.md","Vertical vs horizontal navigation: which one is better for your app?",{"type":7,"value":8,"toc":142},"minimark",[9,13,21,24,29,32,35,40,45,58,62,73,77,80,91,94,105,109,112,115,118,121,125],[10,11,5],"h1",{"id":12},"vertical-vs-horizontal-navigation-which-one-is-better-for-your-app",[14,15,16,20],"p",{},[17,18,19],"strong",{},"TL;DR:"," In most cases horizontal navigation is preferable, but if you have a large number of categories (links) that\nmust be displayed right away, you might want to use vertical navigation.",[14,22,23],{},"Let's begin with a simple illustration of what I'm talking about. By vertical navigation I mean the one that is\ntypically found on the left side and is called \"Sidebar\". As for horizontal it's the one that is usually placed at the\ntop.",[25,26],"v-image",{"alt":27,"src":28},"Navigation types","\u002Fimg\u002Fvertical-vs-horizontal-navigation\u002Fnavigation-types.png",[14,30,31],{},"Each has its own pros and cons, and there is no simple answer about which one to choose. Each case is unique, and you\nshould carefully think about which one to choose. After all, navigation is an essential component of any application.",[14,33,34],{},"Below I've compiled pros and cons of each type of navigation that I found and given some thought to each point.",[36,37,39],"h2",{"id":38},"horizontal-navigation","Horizontal Navigation",[41,42,44],"h3",{"id":43},"pros","Pros",[46,47,48,52,55],"ul",{},[49,50,51],"li",{},"The first and most obvious benefit is that it frees up some space beneath for your content. It could be critical if\nyou have a lot of large images or large data tables on your site. In my experience, having horizontal navigation is\nreally better when you have large tables (e.g. you design an accounting application)",[49,53,54],{},"It is said that most websites use horizontal navigation and thus most people are familiar with it (again, it \"feels\nmore natural\"). Most websites indeed do use horizontal navigation, and it may be a more familiar pattern for most\nusers. See Jakob's law and Consistency and standards heuristic for the reference.",[49,56,57],{},"People claim that horizontal navigation is more natural because some people read from left to right. I don't think\nit's important enough to be concerned about. At least, for applications frequently used by the same users. Because\nusers become accustomed to it, and it should not be a problem in my opinion.",[41,59,61],{"id":60},"cons","Cons",[46,63,64,67,70],{},[49,65,66],{},"Limited space. This is the most serious issue. You cannot place many links at once in the horizontal navigation. You\ncan, of course, add sub-menus, dropdowns and so on, but the horizontal navigation will only show the first level of\ninformation architecture (the first level of the sitemap tree). That means you should carefully consider the number of\nlinks and their names.",[49,68,69],{},"Changing the menu may be difficult due to the reasons stated above. Each time you want to add or remove a link you\nshould think about if it fits the menu.",[49,71,72],{},"Large dropdown submenus cover a part of the main content area.",[36,74,76],{"id":75},"vertical-navigation","Vertical Navigation",[41,78,44],{"id":79},"pros-1",[46,81,82,85,88],{},[49,83,84],{},"More space available for top level links. That's the biggest advantage of vertical navigation. Vertical navigation is\na good choice if you have a lot of links at the top level of your information architecture.",[49,86,87],{},"Unlike horizontal navigation, a vertical one can contain links with long names. They can even be multiline.",[49,89,90],{},"It is easier to add new links (because you often have some space available)",[41,92,61],{"id":93},"cons-1",[46,95,96,99,102],{},[49,97,98],{},"Vertical navigation takes up some space and may not be appropriate for applications that display a lot of data in the\nmain content area.",[49,100,101],{},"A lot of space is simply wasted if you only have a few links.",[49,103,104],{},"According to several sources, vertical navigation is less common, which may be confusing for users. I don't think it's\na big deal, especially if you have an app that is constantly used by the same people (e.g. SaaS or similar). In this\ncase, users will get used to it.",[36,106,108],{"id":107},"which-should-you-pick","Which should you pick?",[14,110,111],{},"There is no simple answer. Each case is unique.",[14,113,114],{},"However, in most cases, horizontal navigation is preferable because it covers more cases than vertical navigation.",[14,116,117],{},"There are some special cases that may require deviation from common rules. For example, imagine you make a site focused\non visual aesthetics, that should stand out and even broke some usability principles on purpose?",[14,119,120],{},"Or you have a very large e-commerce shop, you might even have multiple navigations combined together in some way, as\nwell as breadcrumbs and something else.",[36,122,124],{"id":123},"further-reading","Further reading",[46,126,127,135],{},[49,128,129,134],{},[130,131,133],"a",{"href":132},"\u002Farticles\u002Fhow-to-control-user-attention","How to grab and guide user attention in UI design"," - A visual guide to\ndesign techniques that help direct user focus — from contrast and color to motion and layout.",[49,136,137,141],{},[130,138,140],{"href":139},"\u002Farticles\u002Fwhat-is-optimistic-ui","What is Optimistic UI?"," - A quick look at how to make your interface feel instant by\nshowing results before the server responds.",{"title":143,"searchDepth":144,"depth":144,"links":145},"",2,[146,151,155,156],{"id":38,"depth":144,"text":39,"children":147},[148,150],{"id":43,"depth":149,"text":44},3,{"id":60,"depth":149,"text":61},{"id":75,"depth":144,"text":76,"children":152},[153,154],{"id":79,"depth":149,"text":44},{"id":93,"depth":149,"text":61},{"id":107,"depth":144,"text":108},{"id":123,"depth":144,"text":124},"2023-01-28T17:19:11+04:00","Should your app use horizontal or vertical navigation? Here's a quick breakdown of pros and cons  to help you decide — including usability, flexibility, and layout trade-offs.\n","md",null,{},true,"\u002Farticles\u002Fvertical-vs-horizontal-navigation",{"title":5,"description":158},{"loc":163},"articles\u002F04.Vertical-vs-horizontal-navigation","qE7v5Xc3vl6kfwd2f-66ez0j9AJVdjBsPG9sAI-pQ1k"]