Showcase Of Beautiful Vertical Navigation Designs
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 Trends
- Horizontal Navigation Menus: Trends, Patterns and Best Practices
- Navigation Menus: Trends and Examples
- The Case Against Vertical Navigation
Showcase Of Beautiful Vertical Navigation Designs
Riot Industries
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.
Village Version
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).
Bruno Souza
This portfolio has a clean and simple navigation design that leaves the visitor to focus on the vibrant content to the right.
Cambrian House
A quite distinctive, original navigation menu with five different typefaces. A bit unusual navigation for a crowdsourcing community.
Comfort Brothers
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.
Auberge de l’Ill
This vertical navigation design is elegant and functional. Hovering over a menu item triggers a horizontal animation.
The Hipstery!
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 MICA
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 Poster
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.
Nick Jones
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.
Noam Design
This dark vertical navigation for Noam Design leaves the menu option for the contact form permanently open.
The Music Hall
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.
ONETWENTYSIX
The vertical navigation in this portfolio reflects the traditional table of contents in a book. Menu items are categorized in two groups.
Tailored pixels
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.
Mellasat Vineyard
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.
SIMPLE LIFE
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.
Debbie Millman
This menu creatively weaves in the description and purpose of the website.
Utah.travel
This interactive menu has a slick slide-out menu that displays sub-links and content when a user hovers over a primary menu item.
Mathias Leihu
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.
Go Media Inc
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.
Circa, the Prince
This dark grunge-themed vertical menu is subtle yet hard to miss because of its position.
Glass Tiger Surfboards
Glass Tiger Surfboards opts for a vertical navigation menu with low opacity so that the grassy background shows through.
Corey Arnold Photography
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.
Uniquexport
This artistic menu is transparent, so that the distinctive floral pattern in the background isn’t obscured.
yellowood store
This menu has a dark-gray semi-opaque background that allows the background image to show through.
Van de Weghe Fine Art
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.
TheyMakeApps.com
This menu has illustrated icons beside menu items, which both complement the overall theme and help with visual recognition.
Huis Oranje
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.
Washtenaw Community College
This menu is interesting because its grainy style is rarely seen on websites for institutions of higher education.
Brown Blog Films
The navigation here is set against a wooden background, with links in an organic scribbled font.
A J Miles
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.
RedVelvetart.com
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.
LEAF TEA SHOP & BAR
On this website, you can see how big font sizes can get when you have more vertical space to work with.
Rick Monroe
The personal website of Rick Monroe has navigation links on top of a textured background, right below the website name.
Rich Brown
The big font size contributes to the minimalist theme of this website.
Strip Turnhout
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).
NATIONAL TELEVISION
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.
polargold
This navigation has over-sized fonts, making it the highlight of the layout. Hovering over a menu item reveals an interesting animated effect.
Notorious Design
In this navigation system, the primary links are vertically oriented. Sub-menu items come out horizontally.
Light is Light
This simple text-based menu is findable without drawing too much attention from the focal point of the page: the slideshow.
gary’s real life
The items in this menu are done as strips of paper, adding a nice touch to the illustrated theme.
Denise Chandler
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.
Envira Media Inc
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.
Mulletized
On this website, menu items are located near the middle of the viewport. The simple navigation adds a certain elegance without dominating the layout.
Clearideaz
This website’s navigation is unique, looking a little like basket-weaving. Being in the top-right gives it prominence.
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.
Ommwriter
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.
Gianni’s Steakhouse
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.
Aussie BBQ Legends
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.
Sid Lee
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.
Harmony Republic
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.
(al)
Henry
April 19th, 2010 7:32 amHaven’t seen a vertical navigation list yet… Thanks.
Mike
April 19th, 2010 7:35 amNice list!
Btw we’re called “Cambrian House”, not “Cambrin House” ;)
Vitaly Friedman (Smashing Editorial)
April 19th, 2010 7:37 amOoops, sorry. Fixed now ;-)
Jacob Gube
April 19th, 2010 9:16 amThat was my fault Mike. Thanks @Vitaly Friedman for correcting it!
Mark
April 19th, 2010 7:38 amSorry, Not inspired.
Toby
April 19th, 2010 7:47 amHej, thanks for sharing this very nice collection!
Alot of inspiration in there!
Diego
April 19th, 2010 7:49 amNice post, although I would’ve loved to see the full pictures (all the site) to see the navigation in context.
Louis
April 19th, 2010 8:43 amI agree. I like this article, and think it’s good for people to see that vertical navigation does fit with certain types of content, design, and structure. But the images should definitely be full screenshots, otherwise there’s not much possibility for visual analysis without visiting the sites.
Thomas McGee
April 19th, 2010 8:55 amI see where you’re coming from, but the post seems to work pretty well as it is. Since the navigation is the emphasis, having it very large and isolated is helpful. A possible solution could’ve been to have two screenshots per Web site, one zoomed in, and one zoomed out. Just a thought, nice post though!
Jacob Gube
April 19th, 2010 9:22 amThe problem with showing the entire site is that the navigation menus will get too small. But I think for next time, what I’ll do is have a thumbnail of the website AND the design element displayed side by side so that you both get the overall picture as well as a “zoomed in” view. Great points guys, thanks.
jkendo
April 19th, 2010 11:11 amSeriously? You guys can’t muster up the strength to click and visit the sites?
Louis
April 19th, 2010 11:40 amThere are 53 examples of nav bars in the article. I don’t think it’s feasible to expect all readers to view all 53 sites.
PSD
April 19th, 2010 8:04 amVery nice designs. Thanks.
Sixagon
April 19th, 2010 9:04 amThanks for doing this — very good overview — lots of different styles.
Chris S
April 19th, 2010 9:34 amDefinetly some good ones in there!! Although about half of them were not that impressive to me. LOVE TYPOGRAPHIC NAVIGATION!!
Mark V
April 19th, 2010 9:51 amKudos to this showcase! More! More! More!
Chris S
April 19th, 2010 11:57 amAgreed!! Sometimes navigation gets overblown and will actually take away from the websites focus.
Example: NATIONAL TELEVISION – beautiful to look at but extremely confusing
David A
April 19th, 2010 12:39 pmQuirky, offbeat, grungy, slapdash, harebrained, vertigo-inducing—yes. But beautiful?
Web4half
April 19th, 2010 12:45 pmAwesome list…
sam82ita
April 19th, 2010 12:54 pmIt’s a very wonderfull list.
Great job SM
PGabor
April 19th, 2010 12:55 pmVertical navigation menu with punch labels in a heavy grunge design: http://www.recreation.hu/
Dyea
April 19th, 2010 2:44 pmMeh. Needs work.
h1brd
April 19th, 2010 3:17 pmAhh cool Vertical Aligned Menus, inspiration for left aligned websites ftw :)
Okibi
April 19th, 2010 3:50 pmI’m concerned that some of these examples of “good” menus items lack contrast in their off state, a few tweaks and they’d be a lot more accessible.
yazing
April 20th, 2010 12:47 amYes
XquiziteLizard
April 19th, 2010 5:20 pmSome of these are really great. Thanks for this list!
TNk
April 19th, 2010 6:37 pmbeautiful & inspiring collection, ty
shujing
April 19th, 2010 6:42 pmSo happy to c this great list in the morning!
Greg Babula
April 19th, 2010 6:45 pmI love these, great collection
shubelal
April 19th, 2010 8:32 pmAwesome & inspiring collection :)
Thank you
Jacob
April 19th, 2010 8:54 pmGreat list of sites. They obiviously put in a lot of hard work to make their designs stand out, as well as making them usable. It’s quite a process to make designs like this work well, and making sure that users find them easy to work with too.
Hope they’ve done plenty of usability testing on them all. At least they have cool tools like ours at intuitionhq.com to make it easier for them.
Thanks for the list.
div
April 19th, 2010 9:00 pmVery Very Nice………… Superb collection……Thanks for sharing
sandhyaHaridas
April 19th, 2010 9:03 pmVery nice collection!!
Clearideaz
April 19th, 2010 9:38 pmYeah, smashing! Thank you for your link to Clearideaz.com. The examples of navigations are very inspirating.
Offtopic : I just finished your book and I hope you will publish a next issue! I can’t wait :)
Zmeee
April 19th, 2010 10:02 pmVan de Weghe Fine Art, light textcolor on light-colored background is no fine art ;-)
Daniel
April 19th, 2010 10:46 pmMy favourite is ‘Light is Light’.
You don’t have to have a fancy navigation for it to be great. I think this is a classic example of “tasteful” design.
shirley
April 19th, 2010 11:25 pmVery nice collection…!
Keep it up.
David
April 20th, 2010 12:02 amNot a fan of vertical navigation. Only really use it if there are too many pages to list horizontally or if I need to clearly separate the main menu from the sub menu.
Raphael Pudlowski
April 20th, 2010 12:14 amvertical navigation have it uses, i used it myself on my portfolio http://www.pudlowski.net ,
but it’s only good if you have a few links, and their text is somewhat mismatched for a good horizontal nav.
Tim
April 20th, 2010 3:08 amNice list! Although a number pay absolutely no attention to accessibility and usability good practice.
Designers – navigation is a critically important part of a website. If the correct level of importance is not placed of nav i.e. is obvious, readable, given appropriate balance, you may have failed in your design.
Adrian
April 20th, 2010 3:56 amJust what I was needing. I’m doing a site for a client that uses 2 navigational panel, one of witch is vertical.. Thanks
Jamie
April 20th, 2010 4:21 amNice creative list – BUT – what about sites with more restrictions on what they can play with visually? Its too easy gather a list of creative on portfolio sites: Who is pushing the creative, brilliant ideas while working with mainstream companies, concerned about SEO endeavors, fighting archaic branding strategies, dealing with large business industries and corporate mumbo-jumbo? Who is overcoming challenges by introducing creativity and fresh air into site navigation?
Niubi
April 20th, 2010 5:44 amGreat list, but you missed DubLi out – their menus blow me away!
Design Earth
April 20th, 2010 9:23 amAbove listed website although a good example of vertical navigation but a good example of design elements too.
Thanks for sharing SM!
Paloran
April 20th, 2010 10:18 amwow, a very great collection of wonderful Navigations!
Greetings from Germany
mikeo
April 20th, 2010 11:46 amgood to see that navigation works vertically as well.
.mike
ps – nice post.
Beben
April 20th, 2010 10:35 pmweks!!! so much nih…hmmm thanks thanks
Patrick Matsumura
April 20th, 2010 10:52 pmGreat list. Thx for sharing!
holy
April 21st, 2010 1:04 amGreat list . Thank you.
–
tanya L
April 21st, 2010 3:32 amI like the TheymakeApps and divensis.
Bim
April 21st, 2010 3:45 amThanks for sharing this list. Some very good designs. TheyMakeApps.com – stands out for me.
Demetrius
April 21st, 2010 4:05 amUnique List, but not all that inspiring!
Chi
April 21st, 2010 7:03 pmI agree there’s still a place for Vertical nav, but there seem to be a lot of flash sites there.
Mina
April 22nd, 2010 4:33 amAlso, some great horizontal navigation sites like http://www.rockmetommyboy.com.ar should make a different entry, between design and concept.
Gem
April 22nd, 2010 5:19 amThere are some really cool Nav’s in this collection. Its a shame some of them are better than the actual website.
Would be cool to show the Nav and the website together in the article with out having to click on them and leave the Smashing Magazine website.
G
srikar
April 22nd, 2010 5:52 amAwesome ,really ,SM FTW
RRomeo
April 22nd, 2010 6:39 amcheck out the vertical menu here too:
http://www.rukverc.hu/
Gjermund R Gustavsen
April 22nd, 2010 6:47 amThanks for the feature and mini-review! The title isn’t right though, as it’s Divensis Design – not Tailored pixels…
Gjermund,
Divensis
Harry Mulisch
April 22nd, 2010 11:06 amHarry Mulisch is een waardeloze prul
Justin Carroll
April 22nd, 2010 6:35 pmThat was a long post … get it? Vertical navigation, makes the post long. Anyway, good stuff.
Nintendough
April 23rd, 2010 12:25 pmDefinitely 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.
Jonas
April 25th, 2010 9:54 pmHi
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 :-)
scruffyrobot
April 26th, 2010 12:25 amThank 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.
Christine
April 26th, 2010 4:54 pmThanks! I’ve been stuck in a horizontal navigation rut for awhile now and this might just be the inspiration I needed!
Mark
April 27th, 2010 10:51 pmDreadful 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.
Lynna
April 28th, 2010 10:12 amI’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!
Kim
April 29th, 2010 5:13 amI 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 ;)
Jusu Designs
April 30th, 2010 1:29 amThanks 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?
DesignElement
April 30th, 2010 2:24 amI 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
Dries Van haver
May 12th, 2010 9:19 amNice collection, Check our Puffin navigation at: http://www.lavagraphics.be/playground It comes in handy when you scroll!
Jolt
May 20th, 2010 11:54 amSuperb selection demonstrating there are so many techniques open to the designer, to inject style whilst enhancing functionality in web navs. Cheers! ;)
aSeed
September 7th, 2010 10:07 amAwesome showcase ! So inspired…
Take a look to our website with its vertical navigation : http://www.aseed.fr
Eric Gardiner
September 5th, 2011 3:15 pmNice br0
Tahir Ali
November 17th, 2011 12:14 amexcellent collection of navigations
David
February 4th, 2012 4:33 pmVery nice collection of vertical navigation ! Could someone point me to some help in building a nice Css3 one
Edoardo
January 18th, 2013 3:54 pmGood post! very usefull.
edoardo
Skweekah
March 5th, 2013 5:14 amNice. 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.
Usman
April 29th, 2013 12:54 pmAmazing collection. AWESOME!!!