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 Modern Navigation Design Trends1
- Horizontal Navigation Menus: Trends, Patterns and Best Practices2
- Navigation Menus: Trends and Examples3
- The Case Against Vertical Navigation4
Showcase Of Beautiful Vertical Navigation Designs Link
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.
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).
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.
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.
Research at MICA14
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.
Power to the Poster16
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.
From the Couch
The vertical navigation here shows yet another benefit: being able to accommodate more menu items.
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.
The vertical navigation in this portfolio reflects the traditional table of contents in a book. Menu items are categorized in two groups.
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.
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.
This interactive menu has a slick slide-out menu that displays sub-links and content when a user hovers over a primary menu item.
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.
This menu has colorful fonts with a hand-drawn look to them, complementing the overall theme.
R.I.P. Cube Club
This vertical menu is central to the layout. It has large fonts and a 3-D effect.
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.
The Gates Notes
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.
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.
- 1 https://www.smashingmagazine.com/2010/01/04/showcase-of-modern-navigation-design-trends/
- 2 https://www.smashingmagazine.com/2009/09/07/horizontal-navigation-menus-trends-patterns-and-best-practices/
- 3 https://www.smashingmagazine.com/2008/02/26/navigation-menus-trends-and-examples/
- 4 https://www.smashingmagazine.com/2010/01/11/the-case-against-vertical-navigation/
- 5 http://riotindustries.com/
- 6 http://riotindustries.com/
- 7 http://www.vllg.com/
- 8 http://www.vllg.com/
- 9 http://bsouza.com/
- 10 http://www.cambrianhouse.com/
- 11 http://www.cambrianhouse.com/
- 12 http://www.auberge-de-l-ill.com/
- 13 http://www.auberge-de-l-ill.com/
- 14 http://www.mica.edu/
- 15 http://www.mica.edu/
- 16 http://www.powertotheposter.org/
- 17 http://www.powertotheposter.org/
- 18 http://www.narrowdesign.com/
- 19 http://www.narrowdesign.com/
- 20 http://www.noamdesign.com/
- 21 http://www.noamdesign.com/
- 22 http://www.themusichall.org/
- 23 http://www.themusichall.org/
- 24 http://www.mellasat.com/
- 25 http://www.mellasat.com/
- 26 http://www.debbiemillman.com/
- 27 http://www.debbiemillman.com/
- 28 http://leihu.com/
- 29 http://leihu.com/
- 30 http://www.gomedia.us/
- 31 http://www.gomedia.us/
- 32 http://www.circa.com.au/
- 33 http://www.circa.com.au/
- 34 http://www.glass-tiger.com/
- 35 http://www.glass-tiger.com/
- 36 http://www.coreyfishes.com/
- 37 http://www.coreyfishes.com/
- 38 http://www.uniquexports.com/
- 39 http://www.uniquexports.com/
- 40 http://www.yellowoodstore.com/
- 41 http://www.yellowoodstore.com/
- 42 http://www.vdwny.com/
- 43 http://www.vdwny.com/
- 44 http://theymakeapps.com/
- 45 http://theymakeapps.com/
- 46 http://www.wccnet.edu/
- 47 http://www.wccnet.edu/
- 48 http://www.brownblogfilms.com/
- 49 http://www.brownblogfilms.com/
- 50 http://www.ajmiles.net/
- 51 http://www.ajmiles.net/
- 52 http://www.thisisleaf.co.uk/
- 53 http://www.thisisleaf.co.uk/
- 54 http://rickmonroe.net/
- 55 http://rickmonroe.net/
- 56 http://www.richbrown.info/
- 57 http://www.richbrown.info/
- 58 http://www.stripturnhout.be/
- 59 http://www.stripturnhout.be/
- 60 http://www.natl.tv/
- 61 http://www.natl.tv/
- 62 http://www.polargold.de/
- 63 http://www.polargold.de/
- 64 http://www.notoriousdesign.co.uk/
- 65 http://www.notoriousdesign.co.uk/
- 66 http://www.lightsbydallas.com/
- 67 http://www.lightsbydallas.com/
- 68 http://www.garysreallife.com/
- 69 http://www.garysreallife.com/
- 70 http://www.denisechandler.com/
- 71 http://www.denisechandler.com/
- 72 http://enviramedia.com/
- 73 http://enviramedia.com/
- 74 http://www.mulletized.com/
- 75 http://www.mulletized.com/
- 76 http://clearideaz.com/
- 77 http://clearideaz.com/
- 78 http://www.ommwriter.com/
- 79 http://www.ommwriter.com/
- 80 http://www.giannis-steakhouse.com/
- 81 http://www.giannis-steakhouse.com/
- 82 http://www.aussiebbqlegends.com/
- 83 http://www.aussiebbqlegends.com/
- 84 http://www.sidlee.com/
- 85 http://www.sidlee.com/
- 86 http://www.harmonyrepublic.com/
- 87 http://www.harmonyrepublic.com/
Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf New York, on June 14–15, with smart design patterns and front-end techniques.