- January 4th, 2010
- 95 Comments
The navigation menu is perhaps a website’s single most important component. Navigation gives you a window onto the website designer’s creative ability to produce a functional yet visually impressive element that’s fundamental to most websites. Because of their value to websites, navigation menus are customarily placed in the most visible location of the page, and thus can make a significant impact on the visitor’s first impression.
The design of a navigation menu has to be outstanding in order to sustain the user’s interest. As the adage goes, “Content is king,” but getting to the content requires navigation. In this post, we’ll be explore some of the more recent trends in navigation design. We’ll look at the aesthetics that recur in today’s best Web designs. The focus here is on the visual direction that leading designers are taking.
You should also read the following related posts:
- Navigation Menus: Trends and Examples1
- 50 Beautiful And User-Friendly Navigation Menus2
- CSS-Based Navigation Menus: Modern Solutions3
- Breadcrumbs In Web Design: Examples And Best Practices4
Lately, we’ve seen a trend towards design elements that sit on a higher z-plane; that is, they appear closer than other elements on the page. This trend is commonly applied, no surprise, to navigation menus.
Blue Door Baby7
The Blue Door Baby navigation bar is styled like a ribbon that is laid over top of the feature area. The menu items are text-image replacements that have a subtle inset-text effect. (Learn how to create the inset-text effect8).
The Mystery Tin navigation menu is arranged vertically. The active menu item has a background that wraps around the side of the content area. Similarly, hovering over a menu item shows a smaller 3-D ribbon.
Alexarts features a background of a city waterfront. Navigation menu items are in large speech bubbles that point to different elements of the scene. Hovering over a navigation bubble propels it slightly upward, a subtle indication that it is interactive and is the current target.
This colorful illustrated website depicts a scene of an alien and kids connected to a rocket ship. The vertical secondary menu is creatively integrated into the illustration: they’re spoken by the alien protruding from the top-right of the page.
The active item in the SproutBox menu is highlighted with a darker green, and the corners of the rectangular speech bubble are rounded. Placing your mouse over an inactive menu item displays a similarly shaped speech bubble.
The Contrast website features rectangular speech balloons that have a sketched look. The speech balloon is repeated throughout the design, denoting a clickable element (such as the “Archives” link on the side and the “Read More” link for blog posts).
Design Spartan’s primary navigation bar highlights the current page with a colorful and textured round-cornered speech bubble, which pops out because it’s set against a dark background. Each menu item has a different color, making each section of the website easily discernible.
Robin James Yu37
Speech bubbles are usually rounded, but Robin James Yu opts for rectangles on his portfolio. Speech bubbles recur throughout the design, including for the box of recent tweets in the footer and a more traditional elliptical speech bubble saying “Hi” on the home page.
Bright colors against a dark background and a generous size makes GIANT Creative’s navigation stand out from the rest of the text. Hovering over a menu item reveals the speech bubble’s pointer.
Yellow Bird Project41
The navigation menu on Yellow Bird Project’s seems simple and conventional at first, until you hover over it. Hovering over an item reveals the tip of the balloon, a simple enough technique but one that makes the menu slightly more engaging than before.
Rounded corners are often used to soften sharp rectangles. The trend has carried over from call to action buttons43 to menu items, whose appearance as buttons is meant to entice users to click on them.
Vistrac’s rounded buttons can only be seen in modern versions of Web browsers such as Firefox, Safari, Google Chrome and Opera because the developers have implemented the working draft specifications of the CSS 3 border-radius property. In other Web browsers (i.e. IE 8 and lower: the browser that’s hindering the progress of Web design), the menu items appear as normal rectangles.
Icons In Navigation
Elaborate and highly visual designs are now widespread because bandwidth is no longer much of a concern. Over a year ago, we noted that visually appealing icons are increasingly being used62, and this trend has continued. Icons not only are eye candy but help create visual recognition for users. Having said that, one should keep in mind that it’s always important to keep the loading time as short as possible, thus making the page as responsive as possible. In general, it’s more important than additional visual clues; however, used properly and moderately, the latter can assist users in their scanning process and make the content of the page easier to perceive and navigate.
Adii Rockstar has a blog whose navigation is fixed to the bottom of the page. The menu items are complemented by icons above the text, making for a beautiful navigation scheme. In addition, the text is given the CSS 3 text-shadow property for depth (at least in browsers that have implemented the current draft of the W3C’s CSS 3 specifications for the Text module).
The portfolio of marcusK has a large navigation menu laid out vertically along the left, making it a big part of the design and difficult to miss. Large icons are featured above menu text, reflecting the vivid character of the design.
The company behind this website specializes in creating mobile versions of websites, so the designer made the navigation look similar to the iPhone’s UI72, making it seem familiar to first-time visitors.
The beauty of RUDEWORKS’ navigation menu is its simplicity. Noticing it at first glance may be difficult because of the menu’s low contrast with the background. When a menu item is hovered over, it fades to dark red.
Bert Timmbermans’ portfolio website is laid out like a notebook, with the primary navigation menu designed like ribbon bookmarks. The menu has only icons; when you mouse over an item, it animates to reveal the text.
Because most websites have straight edges and sharp corners, irregular shapes give you a chance to break from the norm. One current trend is to give menus an amorphous shape to make them really stick out.
The main menu for Kutztown University is unusual in many ways. First, it’s positioned in the middle of the page, towards the bottom, whereas primary menus are typically located higher up. The alignment of menu items is staggered, not the usual left aligned. Finally, the lettering of the menu item text is randomized.
Carnivale du Vin 2009109
The navigation menu on the Carnivale du Vin website is shaped like brushstrokes. Hovering over certain items reveals sub-menus, making it look like the artist has swiped a brush across the page.
Think Up’s menu items are crumpled post-it notes, and the navigation follows the tabbed navigation user interface design pattern118. Hovering over an item changes the color, and clicking on it brings it forward on the z-plane.
Paging For Primary Navigation
Some websites have dropped the standard list of primary menu links. You’ll often see magazine-style (or blogazine132) websites do this, to give users an interactive experience, similar to flipping through the pages of a magazine or book.
Jack Cheng opts for individually styled blog posts, and his navigation bar is a chronological timeline of posts. Each post appears as a dot, and hovering over one reveals more information in a speech bubble.
Gregory Wood also custom-styles his blog posts so that you can flip through them using the left and right arrows. To help users get to important pages, he has small icon links for the home, about, RSS and contact pages at the top-left.
- 1 http://www.smashingmagazine.com/2008/02/26/navigation-menus-trends-and-examples/
- 2 http://www.smashingmagazine.com/2009/02/04/50-beautiful-and-user-friendly-navigation-menus/
- 3 http://www.smashingmagazine.com/2007/03/14/css-based-navigation-menus-modern-solutions/
- 4 http://www.smashingmagazine.com/2009/03/17/breadcrumbs-in-web-design-examples-and-best-practices-2/
- 5 http://www.delibarapp.com/
- 6 http://www.delibarapp.com/
- 7 http://www.bluedoorbaby.com/
- 8 http://sixrevisions.com/tutorials/photoshop-tutorials/how-to-create-inset-typography-in-photoshop/
- 9 http://www.bluedoorbaby.com/
- 10 http://www.mysterytin.com/
- 11 http://www.mysterytin.com/
- 12 http://psdtowp.com/
- 13 http://psdtowp.com/
- 14 http://harrybissett.com/
- 15 http://harrybissett.com/
- 16 http://www.sowerofseeds.org/
- 17 http://www.sowerofseeds.org/
- 18 http://en.wikipedia.org/wiki/Speech_balloon
- 19 http://www.alexarts.ru/en/index.html
- 20 http://www.alexarts.ru/en/index.html
- 21 http://www.bushtheatre.co.uk/
- 22 http://www.bushtheatre.co.uk/
- 23 http://www.pampaneo.es/tiendastore.html
- 24 http://www.pampaneo.es/tiendastore.html
- 25 http://www.robalan.com/
- 26 http://www.robalan.com/
- 27 http://www.sproutbox.com/
- 28 http://www.sproutbox.com/
- 29 http://kingpinsocial.com/
- 30 http://kingpinsocial.com/
- 31 http://www.contrast.ie/blog/
- 32 http://www.contrast.ie/blog/
- 33 http://www.designspartan.com/
- 34 http://www.designspartan.com/
- 35 http://www.definitelydubai.com/
- 36 http://www.definitelydubai.com/
- 37 http://www.robinjamesyu.com/about/
- 38 http://www.robinjamesyu.com/about/
- 39 http://madebygiant.com/
- 40 http://madebygiant.com/
- 41 http://www.yellowbirdproject.com/
- 42 http://www.yellowbirdproject.com/
- 43 http://www.smashingmagazine.com/2009/10/13/call-to-action-buttons-examples-and-best-practices/
- 44 http://getballpark.com/
- 45 http://getballpark.com/
- 46 http://www.nosotroshq.com/
- 47 http://www.nosotroshq.com/
- 48 http://newlookmedia.com/
- 49 http://newlookmedia.com/
- 50 http://lemonstandapp.com/
- 51 http://lemonstandapp.com/
- 52 http://www.metalabdesign.com/
- 53 http://www.metalabdesign.com/
- 54 http://vistrac.com/
- 55 http://vistrac.com/
- 56 http://www.gugafit.com/
- 57 http://www.gugafit.com/
- 58 http://www.peepnote.com/
- 59 http://www.peepnote.com/
- 60 http://graphik.fi/
- 61 http://graphik.fi/
- 62 http://www.smashingmagazine.com/2008/02/26/navigation-menus-trends-and-examples/
- 63 http://adiirockstar.com/
- 64 http://adiirockstar.com/
- 65 http://www.sourcebits.com/
- 66 http://www.sourcebits.com/
- 67 http://carsonified.com/mission/
- 68 http://carsonified.com/mission/
- 69 http://www.marcusk.co.uk/html/illustration_concept.html
- 70 http://www.marcusk.co.uk/html/illustration_concept.html
- 71 http://www.mobilemysite.com/
- 72 http://www.blogcdn.com/www.engadget.com/media/2007/06/iphone-menu-desktop.jpg
- 73 http://www.mobilemysite.com/
- 74 http://mesonprojekt.com/
- 75 http://mesonprojekt.com/
- 76 http://dreamling.ca/
- 77 http://dreamling.ca/
- 78 http://www.nadamastriste.com/
- 79 http://www.nadamastriste.com/
- 80 https://www.redvelvetart.com/
- 81 https://www.redvelvetart.com/
- 82 http://www.customtoronto.ca/
- 83 http://www.customtoronto.ca/
- 84 http://www.andreashinkel.com/
- 85 http://www.andreashinkel.com/
- 86 http://jonwhitestudio.com/
- 87 http://jonwhitestudio.com/
- 88 http://www.votaw.com/
- 89 http://www.votaw.com/
- 90 http://www.utah.travel/
- 91 http://www.utah.travel/
- 92 http://rudeworks.com/
- 93 http://rudeworks.com/
- 94 http://www.multiways.com/servizi
- 95 http://www.multiways.com/servizi
- 96 http://www.berttimmermans.com/
- 97 http://www.berttimmermans.com/
- 98 http://dragoninteractive.com/about/company/
- 99 http://sixrevisions.com/tutorials/web-development-tutorials/create-an-animated-call-to-action-button/
- 100 http://dragoninteractive.com/about/company/
- 101 http://www.boomawebdesign.com/
- 102 http://www.boomawebdesign.com/
- 103 http://www.kutztown.edu/acad/commdes/
- 104 http://www.kutztown.edu/acad/commdes/
- 105 http://yorkdale.com/09-back-to-school/
- 106 http://yorkdale.com/09-back-to-school/
- 107 http://crazylovecampaign.com/
- 108 http://crazylovecampaign.com/
- 109 http://www.carnivaleduvin.com/2009/
- 110 http://www.carnivaleduvin.com/2009/
- 111 http://wranglerfaceoff.com/
- 112 http://wranglerfaceoff.com/
- 113 http://hto.ca/
- 114 http://hto.ca/
- 115 http://www.smriyaz.com/
- 116 http://www.smriyaz.com/
- 117 http://www.thinkup.org/
- 118 http://www.smashingmagazine.com/2009/06/24/module-tabs-in-web-design-best-practices-and-solutions/
- 119 http://www.thinkup.org/
- 120 http://www.vanityclaire.com/
- 121 http://www.vanityclaire.com/
- 122 http://innermetrogreen.com/
- 123 http://innermetrogreen.com/
- 124 http://www.custom-tshirts.eu/
- 125 http://www.custom-tshirts.eu/
- 126 http://www.piratalondon.com/
- 127 http://www.piratalondon.com/
- 128 http://www.koraykibar.com/
- 129 http://www.koraykibar.com/
- 130 http://www.idea.org/research.html
- 131 http://www.idea.org/research.html
- 132 http://www.smashingmagazine.com/the-death-of-the-blog-post/
- 133 http://jackcheng.com/
- 134 http://jackcheng.com/
- 135 http://gregorywood.co.uk/journal/lets-drink-to-the-death-of-regret/
- 136 http://gregorywood.co.uk/journal/lets-drink-to-the-death-of-regret/
- 137 http://dustincurtis.com/the_rich_and_powerful.html
- 138 http://dustincurtis.com/the_rich_and_powerful.html
- 139 http://72ave.com/
- 140 http://72ave.com/