Showcase Of Beautiful Vertical Navigation Designs

Advertisement

Go to any website and you’re guaranteed to find one thing: a navigation menu. Navigation menus enable visitors to move from page to page; without them, we would have no way to conveniently explore websites. Perhaps this is why designers, information architects, usability researchers and user experience specialists invest so much time and resources into devising aesthetically pleasing and user-friendly navigation systems.

Website navigation menus generally come in one of two orientations: vertical and horizontal. Horizontal navigation menus display items side by side. Vertical navigation menus stack items on top of each other. In this post, we highlight some remarkable vertical navigation menus, for your inspiration.

You might also like these related posts:

Showcase Of Beautiful Vertical Navigation Designs

Riot Industries5
The vertical navigation in this portfolio website is simple and clean in looks yet robust in functionality and interaction. Clicking on “Web,” “Print,” or “Identity” filters the thumbnails on the right, and clicking the “About” menu item shifts the navigation to the right, making way for content on the left.

Riot Industries6

Village Version7
Here, you can see one of the benefits of vertical navigation: it allow for highly compact and modular menus that appear distinct from the rest of the layout. Sitting in the top-left corner, just below the website’s name, the menu is one of the first things visitors see (at least with left-to-right languages).

Village Version8

Bruno Souza9
This portfolio has a clean and simple navigation design that leaves the visitor to focus on the vibrant content to the right.

brunosouza_projects10

Cambrian House11
A quite distinctive, original navigation menu with five different typefaces. A bit unusual navigation for a crowdsourcing community.

Screenshot12

Comfort Brothers13
Navigation menu on the right side of the layout for a change: although the design is basic, almost rudimentary, it works well and is easy to navigate. Navigation menus do not have to look outstanding.

Screenshot14

Auberge de l’Ill15
This vertical navigation design is elegant and functional. Hovering over a menu item triggers a horizontal animation.

Auberge de l'ιll16

The Hipstery!17
This website’s vertical navigation sits right in the middle of where the visitor is focusing when the page first loads. Active menu items are denoted by a pointing hand.

The Hipstery!18

Research at MICA19
The navigation design for the Maryland Institute College of Arts demonstrates another advantage of vertical navigation: it shows hierarchy and allows you to group menu items without resorting to drop-down menus, whose sub-menus are displayed only when the user mouses over an item.

Research at MICA20

Power to the Poster21
The vertical navigation design on this website is positioned right below the website’s name, making it prominent without drawing attention from the large rotating banner in the top-right.

POWER TO THE POSTER22

From the Couch23
The vertical navigation here shows yet another benefit: being able to accommodate more menu items.

From The Couch24

Nick Jones25
The portfolio of art director Nick Jones has vertical navigation towards the middle of the page. The menu summarizes his work and has an interactive component that scrolls the menu up and down based on the user’s mouse movements. When an item is clicked, the menu shifts to the left, making room for the corresponding content.

Nick Jones26

Noam Design27
This dark vertical navigation for Noam Design leaves the menu option for the contact form permanently open.

NoamDesign28

The Music Hall29
The vertical navigation on this website is grouped into two categories, giving users the ability to quickly find the link to the page they’re interested in.

The Music Hall30

ONETWENTYSIX31
The vertical navigation in this portfolio reflects the traditional table of contents in a book. Menu items are categorized in two groups.

ONETWENTYSIX32

Tailored pixels33
This simple vertical navigation is presented right below the website’s name, giving it a prominent position in the layout without taking away attention from the main content area. A dark gray background denotes active menu items, with an arrowhead pointing at the content, encouraging natural and effective eye flow.

Tailored pixels34

Mellasat Vineyard35
Mellasat Vineyard’s vertical navigation menu is a modular, one-piece design element that also contains the website name and logo. The menu is a focal element here.

Mellasat Vineyard36

SIMPLE LIFE37
The navigation in this elegant, minimalist, typography-based portfolio is a central element and contributes to the overall layout. The menu items are repeated on the right in a larger font.

SIMPLE LIFE38

Debbie Millman39
This menu creatively weaves in the description and purpose of the website.

Debbie Millman40

Utah.travel41
This interactive menu has a slick slide-out menu that displays sub-links and content when a user hovers over a primary menu item.

Utah.travel42

Mathias Leihu43
The coloring of this navigation is subtle, but the menu manages to attract the user’s eye through its prominent location in the layout and the author’s high-contrast headshot.

Mathias Leihu44

Go Media Inc45
Go Media Inc’s navigation is an accordion that reveals sub-menus. Clicking on a primary menu item triggers an animated downward effect that opens up sub-menu items.

Mathias Leihu46

Circa, the Prince47
This dark grunge-themed vertical menu is subtle yet hard to miss because of its position.

Circa, the Prince48

Glass Tiger Surfboards49
Glass Tiger Surfboards opts for a vertical navigation menu with low opacity so that the grassy background shows through.

Glass Tiger Surfboards50

Corey Arnold Photography51
The menu on this minimalist portfolio website has a red see-through background so that the featured photo is visible even when the menu is expanded.

Corey Arnold Photography52

Uniquexport53
This artistic menu is transparent, so that the distinctive floral pattern in the background isn’t obscured.

Uniquexport54

yellowood store55
This menu has a dark-gray semi-opaque background that allows the background image to show through.

yellowood store56

Van de Weghe Fine Art57
This navigation system is revealed when the user hovers over “Menu.” The simplicity of the design is creative; the background images are the distinguishing element.

Van de Weghe Fine Art58

TheyMakeApps.com59
This menu has illustrated icons beside menu items, which both complement the overall theme and help with visual recognition.

TheyMakeApps.com60

Huis Oranje61
This vertical menu is a distinctive element in this layout. The icons to the right serve as eye candy and as visual representations of the menu items.

Huis Oranje62

Washtenaw Community College63
This menu is interesting because its grainy style is rarely seen on websites for institutions of higher education.

Washtenaw Community College64

Brown Blog Films65
The navigation here is set against a wooden background, with links in an organic scribbled font.

Brown Blog Films66

A J Miles67
The portfolio of A J Miles has vertical navigation as its primary visual element. The menu is fashioned as a piece of paper held in position by tape.

A J Miles68

RedVelvetart.com69
This menu has colorful fonts with a hand-drawn look to them, complementing the overall theme.

RedVelvetart.com70

R.I.P. Cube Club71
This vertical menu is central to the layout. It has large fonts and a 3-D effect.

R.I.P. Cube Club72

LEAF TEA SHOP and BAR73
On this website, you can see how big font sizes can get when you have more vertical space to work with.

LEAF TEA SHOP and BAR74

Rick Monroe75
The personal website of Rick Monroe has navigation links on top of a textured background, right below the website name.

Rick Monroe76

Rich Brown77
The big font size contributes to the minimalist theme of this website.

Rich Brown78

Strip Turnhout79
This website has an organic hand-written font for its menu, which sets the tone for the layout (which is arranged as a gridded notebook).

Strip Turnhout80

NATIONAL TELEVISION81
This menu offers an interesting interaction. When an item is clicked, the menu shifts left or right to make room for the content, thus creating an engaging user experience.

NATIONAL TELEVISION82

polargold83
This navigation has over-sized fonts, making it the highlight of the layout. Hovering over a menu item reveals an interesting animated effect.

polargold84

Notorious Design85
In this navigation system, the primary links are vertically oriented. Sub-menu items come out horizontally.

Notorious Design86

Light is Light87
This simple text-based menu is findable without drawing too much attention from the focal point of the page: the slideshow.

Light is Light88

gary’s real life89
The items in this menu are done as strips of paper, adding a nice touch to the illustrated theme.

gary's real life90

Denise Chandler91
The vertical menu here takes up a large part of the layout. Hovering on an item reveals a simple CSS animation that moves the right-pointing arrows further right, giving the user a feeling of moving forward.

Denise Chandler92

Envira Media Inc93
This irregularly arranged menu truly embodies the website’s organic look and feel. Icons on the left of each item help with visual recognition and complement the design.

Envira Media Inc94

Mulletized95
On this website, menu items are located near the middle of the viewport. The simple navigation adds a certain elegance without dominating the layout.

Mulletized96

Clearideaz97
This website’s navigation is unique, looking a little like basket-weaving. Being in the top-right gives it prominence.

Clearideaz98

The Gates Notes99
Bill Gates’ official website has a unique menu that conveys innovation and forward-thinking: themes that the technology baron surely wants to convey to visitors.

The Official Site of Bill Gates100

Ommwriter101
This menu’s items are displayed as translucent circles. On hover, a symbol is revealed that relates to that particular menu item, making the menu memorable.

Ommwriter102

Gianni’s Steakhouse103
This menu is slightly tilted, and its skewed orientation is sure to grab the visitor’s attention. The design is appropriate for the website, which is for a restaurant.

Gianni's Steakhouse104

Aussie BBQ Legends105
Bold, striking, eye-catching. These adjectives aptly describe Aussie BBQ Legends’ vertical navigation. The menu plays a big part in setting the tone for the website.

Aussie BBQ Legends106

Sid Lee107
Sid Lee agency uses an interactive navigation menu on the left side of the page. Some sections of the navigation have sub-sections which are displayed next to the primary navigation.

Screenshot108

Harmony Republic109
Harmony Republic places the navigation menu on the left side of its logo. Unusual placement, but it works nicely. The current navigation section is highlighted by a white background.

Screenshot110

(al)

Footnotes

  1. 1 http://www.smashingmagazine.com/2010/01/04/showcase-of-modern-navigation-design-trends/
  2. 2 http://www.smashingmagazine.com/2009/09/07/horizontal-navigation-menus-trends-patterns-and-best-practices/
  3. 3 http://www.smashingmagazine.com/2008/02/26/navigation-menus-trends-and-examples/
  4. 4 http://www.smashingmagazine.com/2010/01/11/the-case-against-vertical-navigation/
  5. 5 http://riotindustries.com/
  6. 6 http://riotindustries.com/
  7. 7 http://www.vllg.com/
  8. 8 http://www.vllg.com/
  9. 9 http://bsouza.com/projects/index.html
  10. 10 http://bsouza.com/projects/index.html
  11. 11 http://www.cambrianhouse.com/
  12. 12 http://www.cambrianhouse.com/
  13. 13 http://www.comfortbrothers.com/
  14. 14 http://www.comfortbrothers.com/
  15. 15 http://www.auberge-de-l-ill.com/V2/index.html
  16. 16 http://www.auberge-de-l-ill.com/V2/index.html
  17. 17 http://hipstery.com/
  18. 18 http://hipstery.com/
  19. 19 http://www.mica.edu/Research_at_MICA.html
  20. 20 http://www.mica.edu/Research_at_MICA.html
  21. 21 http://www.powertotheposter.org/
  22. 22 http://www.powertotheposter.org/
  23. 23 http://www.from-the-couch.com/
  24. 24 http://www.from-the-couch.com/
  25. 25 http://www.narrowdesign.com/
  26. 26 http://www.narrowdesign.com/
  27. 27 http://www.noamdesign.com/
  28. 28 http://www.noamdesign.com/
  29. 29 http://www.themusichall.org/
  30. 30 http://www.themusichall.org/
  31. 31 http://onetwentysix.com/
  32. 32 http://onetwentysix.com/
  33. 33 http://divensis.no/
  34. 34 http://divensis.no/
  35. 35 http://www.mellasat.com/
  36. 36 http://www.mellasat.com/
  37. 37 http://simple-life.moo.jp/
  38. 38 http://simple-life.moo.jp/
  39. 39 http://www.debbiemillman.com/
  40. 40 http://www.debbiemillman.com/
  41. 41 http://www.utah.travel/
  42. 42 http://www.utah.travel/
  43. 43 http://leihu.com/
  44. 44 http://leihu.com/
  45. 45 http://www.gomedia.us/
  46. 46 http://www.gomedia.us/
  47. 47 http://www.circa.com.au/
  48. 48 http://www.circa.com.au/
  49. 49 http://www.glass-tiger.com/
  50. 50 http://www.glass-tiger.com/
  51. 51 http://www.coreyfishes.com/
  52. 52 http://www.coreyfishes.com/
  53. 53 http://www.uniquexports.com/
  54. 54 http://www.uniquexports.com/
  55. 55 http://www.yellowoodstore.com/
  56. 56 http://www.yellowoodstore.com/
  57. 57 http://www.vdwny.com/
  58. 58 http://www.vdwny.com/
  59. 59 http://theymakeapps.com/
  60. 60 http://theymakeapps.com/
  61. 61 http://www.huisoranje.co.za/
  62. 62 http://www.huisoranje.co.za/
  63. 63 http://www.wccnet.edu/
  64. 64 http://www.wccnet.edu/
  65. 65 http://www.brownblogfilms.com/
  66. 66 http://www.brownblogfilms.com/
  67. 67 http://www.ajmiles.net/
  68. 68 http://www.ajmiles.net/
  69. 69 https://www.redvelvetart.com/
  70. 70 https://www.redvelvetart.com/
  71. 71 http://www.cubeclub-chemnitz.de/
  72. 72 http://www.cubeclub-chemnitz.de/
  73. 73 http://www.thisisleaf.co.uk/
  74. 74 http://www.thisisleaf.co.uk/
  75. 75 http://rickmonroe.net/
  76. 76 http://rickmonroe.net/
  77. 77 http://www.richbrown.info/
  78. 78 http://www.richbrown.info/
  79. 79 http://www.stripturnhout.be/
  80. 80 http://www.stripturnhout.be/
  81. 81 http://www.natl.tv/
  82. 82 http://www.natl.tv/
  83. 83 http://www.polargold.de/
  84. 84 http://www.polargold.de/
  85. 85 http://www.notoriousdesign.co.uk/
  86. 86 http://www.notoriousdesign.co.uk/
  87. 87 http://www.lightsbydallas.com/
  88. 88 http://www.lightsbydallas.com/
  89. 89 http://www.garysreallife.com/
  90. 90 http://www.garysreallife.com/
  91. 91 http://www.denisechandler.com/
  92. 92 http://www.denisechandler.com/
  93. 93 http://enviramedia.com/
  94. 94 http://enviramedia.com/
  95. 95 http://www.mulletized.com/
  96. 96 http://www.mulletized.com/
  97. 97 http://clearideaz.com/
  98. 98 http://clearideaz.com/
  99. 99 http://www.thegatesnotes.com/
  100. 100 http://www.thegatesnotes.com/
  101. 101 http://www.ommwriter.com/
  102. 102 http://www.ommwriter.com/
  103. 103 http://www.giannis-steakhouse.com/
  104. 104 http://www.giannis-steakhouse.com/
  105. 105 http://www.aussiebbqlegends.com/
  106. 106 http://www.aussiebbqlegends.com/
  107. 107 http://www.sidlee.com/
  108. 108 http://www.sidlee.com/
  109. 109 http://www.harmonyrepublic.com/
  110. 110 http://www.harmonyrepublic.com/

↑ Back to top Tweet itShare on Facebook

Jacob Gube is the Founder and Chief Editor of Six Revisions, a web publication for web developers and designers, and the Deputy Editor of Design Instruct, a web magazine for designers and digital artists. He has over seven years of experience as professional web developer and web designer and has written a book on JavaScript.

Advertising
  1. 1

    That was a long post … get it? Vertical navigation, makes the post long. Anyway, good stuff.

    0
  2. 52

    Definitely some very nice vertical navigation menu’s, I might look into a few of them and try to recreate them to get a better understanding of how they work. Thank you.

    0
  3. 103

    Hi

    Please remember some things with such navigations:
    1.) Customers sometimes have long navigation titles that can not be shortened.
    2.) If there is a translated version in french you need even more space.
    3.) Now there is maybe no need for a second or third navigation level but tomorrow when the content arrives there is no way without it.
    4.) The main navigation is the “control center” for the user on a web page. If your car looks like star trek inside it’s cool but if you don’t find the place to put the key in you wont be able to drive…

    Often designers use nice short dummy words in their PSD :-) but as soon as the customer adds pages and content the navigation doesn’t work anymore (and yes a customer has to have the possibility to add pages after the design is finished!)

    Nearly all of the navigations above would not work for customers managing their content on their own…

    Best regards
    Jonas

    PS: Of course they look nice :-)

    1
  4. 154

    Thank you for the article. Some of these are great. I think a lot of the designs could have worked just as effectively horizontally. Just a thought.

    0
  5. 205

    Thanks! I’ve been stuck in a horizontal navigation rut for awhile now and this might just be the inspiration I needed!

    0
  6. 256

    Dreadful letter spacing on the Simple Life site – surely that’s not the intention?!

    If you’re going for type-based, make sure you set it well… first lesson of typeschool.

    0
  7. 307

    I’ve been fond of vertical design setups lately and these are great. I will definitely be browsing through some of these designers, thanks for sharing!

    0
  8. 358

    I am usually blown away by the stuff you guys find, but IMHO this article leaves a lot to be desired. There are a FEW really great v-navs but most of them are run-of-the-mill boring. Come on guys, you can do better ;)

    0
  9. 409

    Thanks for a very inspiring list.

    I have been reading all the comments posted, good and bad, and I just wanted to add that I really enjoy looking at these showcases. I am always inspired by other peoples work and I find it fascinating how people have such a variety of ideas and designs and approach their work so differently.

    But at the end of the day, the most important thing about excellent web design is accessibility. It might look beautiful, but if it’s not accessible to everyone, is it good web design?

    0
  10. 460

    I struggled to see anything beautiful in that list, there were a few exceptions to the rule and looked ok, but nothing beautiful. Disappointing considering the rest of your sites content. Guess everything needs to be taken with a pinch of salt even if it is from a trusted site like yours

    0
  11. 511

    Dries Van haver

    May 12, 2010 9:19 am

    Nice collection, Check our Puffin navigation at: http://www.lavagraphics.be/playground It comes in handy when you scroll!

    0
  12. 562

    Superb selection demonstrating there are so many techniques open to the designer, to inject style whilst enhancing functionality in web navs. Cheers! ;)

    0
  13. 613

    Awesome showcase ! So inspired…
    Take a look to our website with its vertical navigation : http://www.aseed.fr

    0
  14. 664

    Nice br0

    -1
  15. 715

    excellent collection of navigations

    -1
  16. 766

    Very nice collection of vertical navigation ! Could someone point me to some help in building a nice Css3 one

    -1
  17. 817

    Good post! very usefull.

    edoardo

    -1
  18. 868

    Nice. Vert menus are out of vogue at the moment but some of these examples illustrate that they can cut it in some situations, esp. grungy, punchy designs.

    -1
  19. 919

    Amazing collection. AWESOME!!!

    -1
  20. 970

    Nice collection, but obviously out of date now. I’m curious about vertical navigation within responsive design. You don’t really see that at all, and I understand why, but it would be nice to see more examples of where it was executed successfully.

    0

↑ Back to top