Menu Search
Jump to the content X X
Smashing Conf Barcelona

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Showcase Of Modern Navigation Design Trends

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:

3-D Navigation Link

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.

The content area on the Delibar website looks like a pile of two pieces of paper, with the navigation items holding them together. It also features a subtle JavaScript effect that smoothly moves them up when you hover over them.


Blue Door Baby
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 effect7).

Blue Door Baby

Mystery Tin8
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.

Mystery Tin9

The navigation menu bar on this website is designed to look like it’s on a higher plane. Additionally, mousing over a menu item shows a speech bubble with a description of the item.


Harry Bissett
Harry Bissett’s navigation is made to look like it’s popping off the page.

Harry Bissett

Sower of Seeds12
The navigation bar on Sower of Seeds looks like it wraps around the content area, making it stand out for the user.

Sower of Seeds13

Speech Balloons Link

Designing menu items in the shape of speech balloons, or speech bubbles14, appears to be another popular trend. It’s a great way to break out of the conventional rectangular menu.

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.


Bush Theatre15
Bush Theatre uses thought bubbles instead of speech balloons, which in comic books denote the subject’s thoughts.

Bush Theatre16

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.


Rob Alan19
Irregularly shaped speech balloons make for a distinguished look on Rob Alan’s website. The speech bubble opens a groove in the main content area, which visually connects them.

Rob Alan20

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.


Kingpin Social21
Kingpin Social’s primary navigation menu is hard to miss, with its big size, rounded corners and copious padding. The active menu item is highlighted with a speech balloon.

Kingpin Social22

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 Spartan23
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.

Design Spartan24

Definitely Dubai25
The Definitely Dubai design features rounded rectangles; drop-shadows give them depth. The active page is highlighted with a white rounded speech bubble.

Definitely Dubai26

Robin James Yu27
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.

Robin James Yu28

GIANT Creative
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.

GIANT Creative

Yellow Bird Project29
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.

Yellow Bird Project30

Rounded Corners Link

Rounded corners are often used to soften sharp rectangles. The trend has carried over from call to action buttons31 to menu items, whose appearance as buttons is meant to entice users to click on them.

Ballpark’s navigation menu in the top-right uses CSS background text replacement to add round-cornered buttons to the text.


The round-cornered navigation buttons of NOSTROS have pressed and unpressed states, which borrows the functionality of actual buttons. Additionally, JavaScript is used to smoothly animate the transition from unpressed to pressed state.


New Look Media36
New Look Media’s blue navigation buttons are striking because of the dark background.

New Look Media37

LemonStand’s primary navigation features rounded dark-gray buttons with a slight gradient.


Rounded corners with graphic icons to the left are featured in this popular website’s menu bar.


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.


gugafit’s navigation buttons change to green on hover. The active item is given a dark-blue pressed look.


PeepNote has beige rounded buttons, with the active menu item in blue. It also uses the CSS 3 text-shadow property to add drop-shadows in most modern Web browsers.


Viljami Salminen
Web designer Viljami Salimen gives the active items in his navigation menu a rounded button look.

Viljami Salminen

Icons In Navigation Link

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 used48, 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
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).

Adii Rockstar

Sourcebits uses small icons for its menu and sub-menu items. They add intricacy to the navigation.


Carsonified uses icons to indicate the active menu item; and upon hovering over an inactive menu item, its icon is revealed.


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 UI53, making it seem familiar to first-time visitors.

Karl Francisco Fernandes’ portfolio has a hand-drawn-themed navigation menu. Icons make the menu items more visual, giving the website a distinguished look.


The website displays icons and text that look hand-sketched with a black ink pen. It gives the design a personable quality.


nadamastrite’s website is eye-catching because of the cartoonish heads that represent menu items by emotions (e.g. sadness, surprise, puzzlement, anger).

This website features hand-drawn elements, and the navigation menu continues that theme with hand-drawn and -sketched icons above the text.

Custom Toronto58
Custom Toronto has a vertically oriented secondary navigation menu, containing sub-menu items. Icons help users quickly locate product categories.

Custom Toronto59

JavaScript Animation Link

With JavaScript frameworks making it easier for Web designers to create animated page elements using just a few lines of code, designers have been using JavaScript lately for more aesthetic than functional purposes.

Andreas Hinkel60
The primary navigation of Andreas Hinkel is large and presented as polaroids. When hovered over, the menu item rises.

Andreas Hinkel61

Jon White Studio62
Jon White Studio’s navigation menu is visual and the focus of the page. Hovering over a menu item pops up a card with the word “Click,” calling the user to action.

Jon White Studio63

Votaw’s navigation is a simple design (text-image replacement) with a JavaScript effect: upon hover, the text fades slightly. The effect is subtle but makes an impression.


The items in’s vertical navigation menu pop out to the right when hovered over. Sub-menu items reveal a brochure map in the background.


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.


The primary menu of MULTIWAYS has a simple effect: a blue bar follows your mouse as you hover over items.


Bert Timmermans70
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.

Bert Timmermans71

Dragon Interactive
Dragon Interactive’s primary menu items smoothly transition to a colorful state when hovered over. (Learn how to create a similar effect using jQuery on a tutorial I wrote72.)

Dragon Interactive

Unusual Shapes Link

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.

Booma has roughly sketched items in a random alignment for its main navigation, making it different from what you see on most other websites.


Kutztown University
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.

Kutztown University

Irregular shapes and variable alignment of menu items give this website design a memorable look. The design fits the theme, too.


The Crazy Love Campaign75
The menu bar of this website is slightly tilted and not perfectly horizontal.

The Crazy Love Campaign76

Carnivale du Vin 2009
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.

Carnivale du Vin 2009

Wrangler Face Off
This website’s vertical primary menu items are designed as tickets that stick out of the side, shuffled up.

Wrangler Face Off

HTO’s navigation bar is a strip of aged paper angled down and clipped to the background photograph.


smriyaz.com79 shuffles its primary menu items, and the text is written vertically.


Think Up
Think Up’s menu items are crumpled post-it notes, and the navigation follows the tabbed navigation user interface design pattern81. Hovering over an item changes the color, and clicking on it brings it forward on the z-plane.

Think Up

f claire baxter82
The menu items on this website stick out like bookmarks. The vertically written text and the varied color and size all help the website stand out.

f claire baxter83

Inner Metro Green84
This menu bar has an irregular shape, contributing to the disorganized grunge theme of the website.

Inner Metro Green85

Custom Tshirts UK
The navigation items on this website are flare buttons pinned to the corner of a t-shirt background.

Custom Tshirts UK

Pirata London
Pirata London has a unique and beautiful navigation menu: overlapping and semi-transparent ellipses. The text is given the CSS 3 text-shadow property for a bit of drop-shadow.

Pirata London

The navigation bar of this website is oriented vertically as stacked ellipses, an unconventional structure that uses a single image with <map> elements for the links.


Idea.org88’s primary menu has an odd shape: sub-menus seem to drip from their parents.


Paging For Primary Navigation Link

Some websites have dropped the standard list of primary menu links. You’ll often see magazine-style (or blogazine90) websites do this, to give users an interactive experience, similar to flipping through the pages of a magazine or book.

Jack Cheng91
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.

Jack Cheng92
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.

The Rich And Powerful
Dustin Curtis’s custom-styled blogazine posts can be navigated using the “Next” and “Previous” controls that are centered in the masthead.

The Rich And Powerful

72nd Ave.93
This website features custom-styled posts that you can navigate using the “Next” and “Previous” links in the bottom-right.

72nd Ave.94


Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
  41. 41
  42. 42
  43. 43
  44. 44
  45. 45
  46. 46
  47. 47
  48. 48
  49. 49
  50. 50
  51. 51
  52. 52
  53. 53
  54. 54
  55. 55
  56. 56
  57. 57
  58. 58
  59. 59
  60. 60
  61. 61
  62. 62
  63. 63
  64. 64
  65. 65
  66. 66
  67. 67
  68. 68
  69. 69
  70. 70
  71. 71
  72. 72
  73. 73
  74. 74
  75. 75
  76. 76
  77. 77
  78. 78
  79. 79
  80. 80
  81. 81
  82. 82
  83. 83
  84. 84
  85. 85
  86. 86
  87. 87
  88. 88
  89. 89
  90. 90
  91. 91
  92. 92
  93. 93
  94. 94

↑ 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.

  1. 1

    Excellent article – thank you.
    Is there a danger that the less regular designs could lead to visitors being confused or are we getting used to less regular nav methods – are we maturing and being more flexible in our expectations?

    • 2

      Thanks Drew. Definitely a big danger – there’s a difference for being too crazy with the interface and confusing your users versus a unique and memorable experience.

      Here’s the question designers battle with on a constant basis: how can you be innovative, yet still produce a functional and user-friendly/intuitive design? Web design is both an art and a science. And unlike art, you can’t go all Picasso on a web design, the number one priority will always be function over form.

      • 3

        More than accesibility I´d say the greatest deterrants for using innovative navigation are 1) Scalability and 2) Search Engine Optimization although the latter problem can be solved with very careful coding and styling.

      • 4

        Im just so surprised we are still even speaking in this language at all. Theres no
        “danger”. Anyone who is sliced off or left behind because of the quick upward curvature are clients we don’t want anyway. Things have changed so much, so fast, I think even the most rudimentary user’s vocabulary has shot up, and likewise, their expectations have too. In response, we should take our conversations top the next level, and get past all this “information vehicle”, “art vs science”, ect etc stuff and start taking command of the new landscape. Because we authored it. I don’t really even see anything that outstanding in these examples. i feel that things were far more experimental and fun 5-even 10 years ago!

  2. 5

    Nice article. Some pretty nice ideas on how to style the navigation.

  3. 6

    Wow! great list there :)

  4. 7

    Web Design Mauritius

    January 4, 2010 5:16 am

    A great overview of navigation styles. Great inspiration.

  5. 8

    Smashing Share

    January 4, 2010 5:18 am

    Thanks Jacob for this great list. Definitely bookmarked for future references

  6. 9

    Wooow! Very Nice

  7. 10

    Deepak Shetty

    January 4, 2010 5:28 am

    Check out the awesome navigation here. It shows up on hovering the ‘+’ sign:

    • 11

      I like that it follows the page, but it is not very user-friendly. It’s probably not a good idea to hide the main navigation at all. Especially under a “+” that doesn’t really associate to navigation.

    • 12

      I also checked out this particular menu design and agree with the other poster, I think its not intuitive to use (in fact it took me about 2 minutes to even locate it on the page ), which I think is counterproductive. If I wasn’t specifically looking for it, I would have probably left the site without ever knowing it existed.

      I like the idea for the fact that its an attempt to do something unique, but I think that putting the menu so far on the right and then hiding it is probably not the best way to keep someone on a website. That’s the whole idea behind creating a website, right?

  8. 13

    Yet again, an amazing and inspiring post. Thank you!

  9. 14


  10. 15

    Shane Jeffers

    January 4, 2010 5:43 am

    Very nice list Jacob. Some new ones on here I hadn’t seen before.

  11. 16

    Super collection and great resources,
    Thanks for sharing!

  12. 17

    awesome designs! Love those cartoonish textured menus… :D

  13. 18

    This is a great selection, thanks for sharing! A great ingredient for the creative juice!

  14. 19

    Great list, but I’d appreciate a bit more of development / critics on each type of navigation, and more especially on usability.

  15. 20

    I love !!!
    But I think there is a lack of “a:active” in lot of those sites.

    For me the navigation trinity is:


    • 21

      Great point Kumo, and I’m glad you brought it up. :hover, :active, :focus are essential to web accessibility (for low vision users, colorblindness, and mobility impairments that prevent a user from using a traditional point-and-click device).

      For this showcase, I decided to focus on aesthetics rather than function – although to me, the latter is more important. I just wanted to explore what the current design trends there are in terms of aesthetics (and not necessarily function) in primary site navigation.

  16. 22

    Timothy West | PHOTONOMY

    January 4, 2010 6:40 am

    These are really GREAT thanks you guys really find some great stuff.

  17. 23

    This is a really good showcase of current nav trends. I commend thee, sir.


  18. 24

    Fantastic showcase of navigation trends!


  19. 25

    Great article! That’s why we love SM!

  20. 26

    Morne Oosthuizen

    January 4, 2010 7:00 am

    I sit with the same questions every time I design a site : “How can I be unique, without confusing the visitor?”

    Menu navigation is possibly the hardest part of the whole design. I always have a brilliant idea of how the general site is going to look, but once I come to the navigation part, I hit a blank. Its always as if I’m doing something that has already been seen, or something thats not going to work at all.

    Thanks for the article though. Was a nice read.

    • 27

      I said almost the exact same thing in a comment reply above to Drew Clarke (first comment). It’s a struggle for sure, and you’re not alone.

      The best way, though not the most time-efficient or cheapest way, is to run through usability testing before launching your site design. You can create a basic HTML/CSS design, and have a handful of people navigate through the site.

      You can get elaborate with this (and there’s a lot of sites that are great reads for this type of stuff, such as Boxes and Arrows), or you can keep it simple and just ask people you know that haven’t seen your design to see if they can easily figure out the interface design or if they have to think about how to use your navigation before figuring it out. An effective interface is one that requires little to no thinking in order to figure out how it works.

  21. 28

    Nice examples

  22. 29

    Nice List! It’s nice to be able to browse through a post like this for creative inspiration and to see where current design trends are heading. Thanks for putting this together.

  23. 30

    Deepak Shakya

    January 4, 2010 7:26 am

    What an article to kick start the new year….very good one… thanks…

  24. 31

    Ismail Mechbal

    January 4, 2010 7:28 am

    Jacob, thank you for this excellent showcase.

  25. 32

    Natalie Hanson

    January 4, 2010 7:44 am

    Really nice post – thanks!

  26. 33

    This was great! I want to do cool things to my navigation now! But… I won’t, because you featured me here, so I will let it continue to be as cool as you think it is for a while! :D

    Thanks for listing me! :D

  27. 34

    Vladimir Remenar

    January 4, 2010 8:14 am

    This is so obvious that most of us (?) must have missed it. After reading this great post I have realized that these really are trends!

    Hmmm, than the perfect navigation must be a 3-D rounded corers unusual shaped speech balloon with icons in it and animated with JavaScript :)

  28. 35

    A good resource for navigation trends @idesignedit thanks @sixrevisions

  29. 36

    Just gotta say the site – Andreas Hinkel (aka. the rugby site) from up above has amazing navigation. I just love that hover effect. Most impressive.

    I believe as time goes on the mainstream web users will adapt to a more unique style of navigation. Not everything will remain as cut and paste as they are used too. Let design prevail!


  30. 37

    Tom Something

    January 4, 2010 9:29 am

    I’ve just been visited by the idea fairy, and this article is what called her over. Thanks!

  31. 38

    Yes! This is what SM does best and why I started reading in 2007 – lots of ideas compiled for quick scanning that I don’t have time to research myself. More of this type of post please, ignore the evil list haters!

    • 39

      That was the reason I started reading SM too, and the reason I like writing for them. :)

  32. 40

    a great list! some really unique navigation techniques that still do a good job of being clear and easy to use

  33. 41

    Great list, but Smashing Magazine should really consider broadening their test base — these lists are fine, but when the majority of the sites audited are portfolio sites, design agencies, or the like, can these really be called “trends?”

    Look at blue chip or enterprise, e-commerce sites and you rarely find any of these characteristics, at least not with the frequency to call them “trends.”

    I’m just saying: these are fine sources of inspiration, but perhaps a better title would be “design predictions,” since it will be a while, certainly, before the average Web user sees any of these.

    (I post this fully aware that in two seconds will relaunch with a big 3-D ribbon for their nav and javascript animations all over the page…). Meh.

    • 42

      Good point! This occurs on a lot of the SM lists. I would love to see more real world examples.

    • 43

      Hi agree, Joe. As much as I enjoy these examples, they’re not going to necessarily translate to a corporate, content-rich site. I’d love to see some information heavy sites used as examples, or a post on trends for these sorts of sites.

    • 44

      @Joe – I absolutely agree with you. Portfolios and promo mini sites are what designers want to sell, but in most cases it’s not the same what clients want to buy.
      I would love to see multilevel information heavy sites with complex functionality (maybe with elements of a social network and/or CMS) featured more on SM.

  34. 45

    Paula aka Le Web Designer

    January 4, 2010 10:58 am

    Nice collection of sites. Thanks for sharing

    Honestly, you have a great list. I just can’t stop drooling.
    They Really Opened by eyes to the new Era of web designs..
    i go to try these for my works.

  35. 46

    Nice collection!
    Really thanks!

  36. 47

    Great list. Some really innovative designs but the execution makes all the difference. I like the sticky note idea of Think Up but the execution has lots of page refreshes which destroy the illusion. Compare that to the smooth transitions in the first example (Delibar) – the illusion is maintained as you navigate or hover.


  37. 48

    Great stuff!

  38. 49

    Great work!
    As You mentioned in 17 :focus is important too. Many of great menus doesn’t have implemented this selector and are “decorated” with ugly border.

  39. 50

    Great post, thanks!

    Anyone have a link to a tutorial that explains how to do something like the site?
    I love that fly out effect!


  40. 51

    While the “carousel” design does look nice, and offers quite a bit of Eye candy, it is fairly tedious to work with.

    Also, a good portion of users will not focus on its content, rather continue down the page. Use it if you feel its truly necessary, but in most cases, its merely superfluous.

  41. 52

    These navigation bars are absolutely amazing. Will use some of the ideas for creating our websites as well here.

  42. 53

    Another great compilation.. But i felt that these are derivatives of existing menu structures. from apple or exiting flash sites. None of them is a trend setter.

    Are we still looking for a new style to change the web?

  43. 54

    A fantastic collection of great examples, and a valuable source of inspiration. Thanks!

  44. 55

    What they said. Plus I also agree with Joe – nice one Joe. Also quite a few of these designs (in terms of style) are in some of SM’s older posts so I wonder if some of these are a “trend” or “flavour of the month”. Look at “rounded corners” for instance. Yes they may be a trend but I would refer more to them as a staple diet rather than modern.

    Neverless, they are all still nice.

  45. 56

    Linus Boström

    January 5, 2010 4:51 am

    Great roundup, Jacob. My only criticism would be that rounded corners, icons and javascript menus hardly can be considered as new trends.

  46. 57

    Less usable, but most of them are impressive.

  47. 58

    Thx 4 the inspiring collection.

  48. 59

    nice list but I always think trat such list mainly focus on websites with a farily simple 1 level navigation. What about making a list of navigation trends/best practices for sites with 2nd. and 3rd levels?

    • 60

      I agree with you.
      Multilevel navigation sites driven by CMS and/or users contribution is a very important part of web with have not been presented yet.

  49. 61

    Synergetic Web

    January 5, 2010 11:07 am

    Thanks for the post. It’s fun to quickly scroll through the navigation of so many sites. I was a little disappointed that there wasn’t much variety though. What about large or corporate sites?

  50. 62

    Glendelm Design

    January 5, 2010 12:15 pm

    Very nice. I especially like the speach balloons one… it’s very original :).

  51. 63

    Great work – thnx for the List – i have made also such an Menu structure on

  52. 64

    Brandon Arnold

    January 5, 2010 1:25 pm

    Thanks for all the great nav ideas and some beautiful sites in general!

  53. 65

    Very good stuff. But I must say that I have noticed same websites are reported several times by smashingmagazine in various articles.

  54. 66

    Nice list. Here’s one more worth considering: Great menu. Fun site.

  55. 67

    Nirmal Kumar. S

    January 5, 2010 9:41 pm

    Its really grt for us designer. Infact, all posts are really great. W W T I W Y P- What We Think Is What You Post.

  56. 68

    Nirmal Kumar. S

    January 5, 2010 9:41 pm

    Its really great post for us Designers. Infact, all posts are really great. W W T I W Y P- What We Think Is What You Post.

  57. 69

    Thanks for gathering all these into one exhaustive review of nav styling. While I enjoy the creativity and refinement of treatment I find many of the examples are in the category of “trying too hard.” Most disappointing is a great looking nav treatment that does not deliver on the interactive (hover, etc.) aspect.

    I’m generally put off a little by nav that calls too much attention to itself pointlessly. Striking a balance between creativity and blending with the overall content of the site in support of user goals is the true test, and challenge (and fun) of being an interaction designer.

    That said, I’m finding (surprisingly) that I’m drawn most to the “unusual shapes” category and in particular the more hand-drawn style or those that look like physical elements. Another interesting example: Boloco takes the unusual/hand-drawn nav to an extreme, but it’s entertaining:

  58. 70

    Superb list. Thanks

  59. 71

    Nice examples :)

  60. 72

    Again a great inspiration for web designers like us. I just love this way but do not overreacting, keep the basics ahead. Long live CSS!

  61. 73

    Wolfgang Woehrle

    January 6, 2010 1:09 am

    Very nice article and some really nice examples!

  62. 74

    You guys completely miss very unique style of navigation..

  63. 75

    Shane Osborne

    January 6, 2010 2:59 am

    Wow a list of items which is actually worth looking at, great inspirational list.

    Good work.


  64. 76


    January 6, 2010 7:03 am

    Humbled to see our studio Xische’s website for Dubai Tourism (Definitely Dubai) featured in the list! :-)

  65. 77


    January 6, 2010 7:11 am

    Clean, bright design with good use of white space should be the new standard. Minimalist design with use of fonts as design itself. This will help speed of loading and that helps with search and Smart Phones accessing the site. Mobile smart phone usage set to explode ie Google HTC Nexus.

  66. 78

    Honestly, this list is not very good. Too many examples of trends that are old hat and not well “trendy.” There is nothing new or trendy about icons in navigation or rounded corners. Did you guys add those sections to the list as filler? I’m not sure why this list is being praised for its mediocrity.

    Maybe drop the filler from the this list and I would say it is concise and accurate. Especially on addressing the javascript animations and flat 3D elements… although i see those as becoming more fads than trends relatively soon.

    • 79

      Yes, actually some things are old hat and stolen. Mystery Tin’s chef illustration is a complete knock off of the Simpson’s chef character Luigi Risotto! Do a search for The 5 Most Underrated Simpsons Characters. You will find the drawing they stole.

  67. 80

    Jonny Campbell

    January 7, 2010 9:59 am

    @BillB Hi BillB, you’re dead right about the Mystery Tin chef — it was a project for my University course.

    • 81

      Sad. No excuse for theft. Is that what they are teaching in design school these days?

  68. 82

    Hi Jacob,
    It’s a very nice list. By the way, thanks for including my site’s navigation ( as well in the list. Expect more of this kind.

  69. 83

    Nice article.
    Do you like my flash menu ? =P

  70. 84

    I’m glad to see more jquery effects driving innovative navigation schemes.

  71. 85

    Fantastic post, there are some great examples here – cheers!

  72. 86

    Excellent…our firm needed to see this. Thanks…


  73. 87

    Hey, I should check my referrers more often! Thanks for the mention.

  74. 88

    Ted Thompson

    April 27, 2010 4:06 am

    Some great design inspiration. Lovin Mystery Tin!

  75. 89

    Mobile App Development

    July 16, 2010 1:58 am

    This was great! I want to do cool things to my navigation now! But… I won’t, because you featured me here, so I will let it continue to be as cool as you think it is for a while!

  76. 90

    Pam Hunter Design

    September 22, 2010 11:34 am

    I have enjoyed your article on navigation menus. With so many options it is a challenge sometimes to decide what would be best for a particular design. Menus are so important; I believe should be easy to see and use. Thanks once again for an informative collection.

  77. 91

    It seems to me that the trend for the past year or so has been to move away from css hover drop-down menus. I can think of multiple reasons for this: 1. CSS drop-down menus don’t function well on mobile devices; 2. with many sites having large headers pushes the nav down a bit, which means the drop-down list would force the user to scroll down; etc. Still, though, with even fewer links on your nav bar, it’s hard to describe to the user all of the content that is under the link (I know, expanded footer, right?). But is this really the case? Have you decided against drop-down menus? Why?

  78. 92

    I am on my learning period, and i am inspired by the showcase u have. Can u please give a link to tutorial of how to slice the unusual shape navigation in photoshop and coding it in dreamwever.

    thanks in advance.

  79. 93


    June 29, 2011 2:57 am

    I like this topic very much.

  80. 94

    Merlin Calo

    July 25, 2011 7:27 am

    Wow, a lot of great examples. So much creativity going on here brings these pages to life!

    Thanks for sharing.


  81. 95

    Mobile Game Developer@[x]cube GAMES

    December 12, 2013 6:58 am

    Truly inspiring!! … I love mesonprojekt design!!… simply awesome!!


↑ Back to top