25 Examples of Creative Navigation

In addition to being one of the most significant influences on the usability of a site, navigation menus also allow designers an opportunity to get creative and add some interesting and attractive visual elements to a site. Of course, in some cases the creativity can hinder the usability of the site, but in many cases appearance and functionality can work together.

I have compiled a collection of 25 sites that use navigation more creatively than just the standard menu. These sites have been chosen based upon their appearance and there may be some that are not up to par on usability. The idea is to get your creativity flowing, but remember the importance of usability and accessibility when creating your own navigation.

For more inspirational design galleries, see:

Kevin John Gomez

Kevin John Gomez

Ben Hulse Design

Ben Hulse Design

The English Riveria Comedy Film Festival

English Riveria Comedy Film Festival

Babasonicos

Babasonicos

Kukral

Kukral

 

Timothy van Sas

Timothy van Sas

Cloth Moth

Cloth Moth

Hugs

Hugs

Pixel Resort

Pixel Resort

The Things We Make

The Things We Make

 

Satsu Design

Satsu Design

MB Dragan

MB Dragan

Ryan Downie

Ryan Downie

Ma.tt

Ma.tt

Davroc Interiors

Davroc

Hella Music

Hella Music

Students’ Association at Unitec

Students' Association at Unitec

CSS Layout

CSSLayout

Sarah Hyland

Sarah Hyland

Navigant Consulting

Navigant Consulting

Time for Cake

Time for Cake

Sitesquared

Sitesquared

Shoes Addict

Shoes Addict

Dawghouse Design Studio

Dawghouse Design Studio

La Privata Republica

La Privata Republica

For more design inspiration and resources please see:

Looking for hosting? WPEngine offers secure managed WordPress hosting. You’ll get expert WordPress support, automatic backups, and caching for fast page loads.

104 Responses

Comments are now closed on this post.

  • Shanna, August 4, 2008

    Thanks for the mention Steven. This is one thing that I love about creative websites.. the little things like cool navs that make you want to pause for a minute and play a little bit. :)

  • Adam, August 5, 2008

    I would have to say that my favourite is from. ‘The Things We Make` I love the simplicity of it.

  • Nathan Beck, August 5, 2008

    Fantastic. There’s a great selection there and some top inspiration. I feel my menus are always to atypical, but some of the ideas above will provide me with some fresh direction.

    Thanks a lot!

    Nathan Beck
    http://www.redswish.co.uk

  • Tracey Grady, August 5, 2008

    Great collection. I’ve only seen a couple of these sites before. A few are very bandwidth-heavy, but they’re all ambitious and adventurous in their design, and I really like that.

  • Andrew, August 5, 2008

    So cool. I love these navs. My fav has to be Ben Hulse Design.

  • Alvin, August 5, 2008

    I like the “Time for Cake”, but it’s difficult for the designer to think of such creative navigation, since user usability is another important topic for a website now. Best design always need to take a balance on these issues.

  • Andy, August 5, 2008

    ‘there may be some that are not up to par on usability’. If they’re not up to par, and both accessibility and usability are important (as you say in the very next sentence), why put them in your list?

    I also like the Ben Hulse design, but you have to question why the navigation links are built with images instead of using text. View the site with images disabled, the site is totally unusable. It’s the same for many of the sites in this list.

  • Matt, August 5, 2008

    great post. lots I havent seen before. thanks!

  • Suresh, August 5, 2008

    Excellent post.
    All the examples in this collections are really cool and inspirational.
    Thanks for devoting time to collect and share with all.
    Bookmarked and forwarded to friends.

    – Suresh
    http://www.realgroup.co.in

  • frank, August 5, 2008

    Those are GREAT.

    Thanks!

  • Chris, August 5, 2008

    I really like the MB Dragan navigation – the spaceship trail helps to highlight the navigation. very clever.

    I like to think our navigation is pretty nice :-)

  • mike, August 5, 2008

    Great Stuff. MB Dragan Rocks!

  • alfred devanesan samuel, August 5, 2008

    i like the Ma.tt navigation fentastic work.

  • Shashi Pinto, August 5, 2008

    Cool navigation i liked it!

  • Streetwise, August 5, 2008

    With a design like Davroc, how are they doing a fade without using flash? Very nice.

  • Dean Peterson, August 5, 2008

    Regarding Davroc Fade. The effect is used using Jquery. for each panel there is a saturated picture and a un saturated picture. Javascript fades between the two.

    I found this through using FF Page Info, and the web developer plugin.

    Cool stuff.

  • Dathan, August 5, 2008

    Misleading title – this is just graphic design, I was hoping to find
    creative ways of navigating – Like data visualization (http://www.visualcomplexity.com/vc/)
    but for for the web.

  • Andrew, August 5, 2008

    That’s funny. I don’t see my site in there. I kid, I kid. :)

    http://www.filter9.com

  • Martyn P, August 5, 2008

    I think it’d be really cool if the Ben Hulse design one unravelled in the picture when you moused over. Totally impractical, of course. :)

  • Marketing Deviant, August 5, 2008

    They have some really cool designs and navigation! Nice sites!

  • Vandelay Design, August 5, 2008

    Andy,
    To answer your question about why they were included, usability is something that you can typically fix and still get a very similar effect. For example you mention that Ben Hulse uses images instead of text – I’m not disagreeing that it would be better to use text, but if someone is just looking for some ideas of creative navigation why do they have to be limited to only ones with perfect usability? If I wanted to create a similar effect I could easily do so by using text instead of the image, but if you totally ignore anything that’s not 100% usable you may never learn some nice effects that could be tweaked or improved.

  • Vandelay Design, August 5, 2008

    Dathan,
    Sorry if you found the title misleading. I don’t think it’s an inaccurate title though.

  • Matt, August 5, 2008

    Very nice, this gives me some new ideas to break away from my usual navigation techniques.

  • ben, August 5, 2008

    great links

  • Vandelay Design, August 5, 2008

    Matt,
    Good! That’s what I was hoping for.

  • Angie Bowen, August 5, 2008

    There are some really interesting designs on the list. I try to include some creativity in the navigation of the sites I build.

  • Fox, August 6, 2008

    Thank you.
    They will be handy for my next designs.

  • veerendra, August 6, 2008

    thats creative collection ..
    check out this one too
    http://www.helmy-bern.cz/

  • Andy, August 6, 2008

    ‘but if you totally ignore anything that’s not 100% usable you may never learn some nice effects that could be tweaked or improved.’

    I take that point completely. The trouble is there are those designers who look objectively at examples of design and can understand how they can be ‘tweaked’ or improved, and then there are those who mimic what they see, then view source for the HTML/CSS to get it working. You only have to look a the amount of designs that follow the trend for hand-written, ripped/crumpled paper navigation started by webdesignerwall.com – most of which fail on usabililty with images disabled – to see that.

    From that point of view it would have been useful to have included at least a few examples of stunning designs that are also usable and accessible (for the lemmings :). Perhaps a future Vandelay Design post?

  • VandelayDesign, August 6, 2008

    Andy,
    I agree with that. Thanks for your feedback – it’s appreciated.

  • Caligula, August 6, 2008

    “Sorry if you found the title misleading. I don’t think it’s an inaccurate title though.”

    I also found the title misleading: these aren’t examples of “creative navigation”, they’re (ostensibly) examples of “creative design”.

    There’s nothing creative about the *navigation*–they’re just plain old menus with pictures or effects.

  • Andy, August 6, 2008

    ‘they’re just plain old menus with pictures or effects.’

    I’d say they’re far from plain, and they’re certainly excellent examples of creativity in terms of layout and design. It’s worth mentioning that the majority of the sites featured are small, and with only a handful of pages, building your navigation is a much easier task.

    It’s where you have a site with hundreds or thousands of pages that goes several levels deep that you need to be creative. I don’t think many of the styles featured here would be practical for a larger site, but whether you found the post title misleading or not, that wasn’t the focus of this article – it was to showcase creative layout and design, *not* creative ways of navigating a site.

  • Bret Bouchard, August 6, 2008

    Another interesting one is http://ceg.org

  • David Sanchez, August 6, 2008

    Obviously the proper ones are those who conform to clear user experience. I mean… some of them are confusing and now thought or consideration about the user. Is like designer doing Information Architecture with no experience at all.

    When it comes to clients money, the main goal is to elaborate on the best user experience, rather than confusion.

    Cute examples, but at least the winners are those aiming for high UX standards.

  • Caligula, August 6, 2008

    @Andrew: “I’d say they’re far from plain,”

    They’re traditional, simplistic navigation with pretty pictures and effects. It’s not creative navigation, it’s creative artwork and/or effects. ‘Nuff said.

    “*not* creative ways of navigating a site.”

    That’s why I said *I* found the title misleading; it says “creative navigation”, not “pretty pictures for regular navigation”.

  • Andy, August 6, 2008

    @Caligula – I’m agreeing with you, sorry if I didn’t make that clear. A better post title would have been ’25 creative effects for web navigation’ or something like that.

  • Vandelay Design, August 6, 2008

    Caligula,
    Sorry if the title was misleading, that wasn’t the intent. Obviously the focus was on the creativity of the design in the navigational menus.

    Andy,
    Good point. It’s definitely more practical for smaller sites.

    David,
    Agreed. User experience is more important than design. I tried to state that in the intro while still showcases the creativity of the examples.

  • Shanna, August 6, 2008

    I am not in any way knocking usability.. I would probably be fired from my day job if I did that. However, I think that the design is *just as* important. Especially for a design portfolio site… your own website is just an extension of your portfolio. For any type of site, your target market really helps dictate what the user should experience. It’s nice every once in a while to step outside the box and just get creative and have fun. (for me anyway…)

  • Manu, August 7, 2008

    Great list

  • Fubiz, August 7, 2008

    Huge selection!

  • Kyle, August 8, 2008

    These are some very creative examples. I prefer navigation’s that are easy to read and use.

    MB Dragon is great because the navigation is big and easy to read.

    Time for Cake seems too cluttered for my preference.

    The Ben Hulse design navigation is very creative.

    I like having a hover for some reason it just makes sense.

  • arvin, August 8, 2008

    nice list, thanks a lot

  • Karthik, August 9, 2008

    Steven, awesome collection as always – no matter what the title! (just staying away from the debate!)

  • Logo Design Templates, August 10, 2008

    Ha ha ha.I love all of them.They are really very cute.Thanks for sharing.

  • A. Georgiev, August 11, 2008

    This is great resource! I like most of the sites. Thanks for sharing this with us.

  • Web Design Michael Janik, August 12, 2008

    I love the one with the drinks. Beautiful idea. Really unique.

    I guess we will see more nice navigations coming up because flash is now spiderable

  • cake, August 19, 2008

    Hi there,
    I’m sure our site’s nav is too cluttered for some. We do our fair share of minimal/super clean and spaced out designs, though.

    Additionally … we most definitely do care tremendously about standards, and our nav is still usable without flash, js, etc. etc. Not sure if anyone noticed. :)

    Thanks very much!

  • software blog, August 19, 2008

    Great collection of navigation system. Thanks for sharing this with us

  • dainix, August 31, 2008

    Really appreciated. that “kukral” page really stand out with great 3d look. Nice.

  • Merol, September 12, 2008

    Very interesting

  • Creativity Quiz Wiz, October 27, 2008

    These really are creative! It amazes me how designers can adapt and create innovative new features for website as the web technology changes. Inspiring.

  • Love2dsign, October 30, 2008

    I like the kukral website, the whole site looks as fresh as the drinks! It’s fun to navigate through playful websites, websites should provide some entertainment!

  • Internetagentur München, December 3, 2008

    I love the Babasonicos design. It remembers me of Saturday Night Fewer. Excellent collection! Thanks

  • Simon Page, December 11, 2008

    I like the “to top” navigation from my site and think that web browsers should have this build in with the scroll bar…nice collection.

  • Creative Logo Design, February 9, 2009

    Those were some creative navigation bars. I agree that the site can be creative without sacrificing usability. I would just make sure to keep the design consistent.

  • Faisal, March 12, 2009

    Wow this is really great to take inspiration. You guys doing good job in bringing creativity in one place.

  • Web Design, April 4, 2009

    Great post and it is important to mention both usability and accessibility, creativity does not need to be restrictive as long as the interface is intuitive and consistent.
    Agree with the Krukal comments, visualising the links with iconic drink types is a fantastic slant and focus on great design without sacrificing usability.

  • Gorge, May 6, 2009

    Great post and it is important to mention both usability and accessibility, creativity does not need to be restrictive as long as the interface is intuitive and consistent.
    Agree with the Krukal comments, visualising the links with iconic drink types is a fantastic slant and focus on great design without sacrificing usability.

  • creative logo design, June 15, 2009

    Although a native English speaker, I thoroughly enjoyed the layout of the Kukral page. The site has eye-catching, vibrant colors, and the drinks seem to jump out of the screen at you. I couldn’t understand a word of text, but I still browsed around a bit.

  • Mandy | Print n Ink, July 16, 2009

    Great stuff there, I wish I could be so creative, it must be able to come up and produce stuff like the above. I absolutely love the first one it has to be my favorite, even though the rest are just as fantastic.

  • Great collection! Very interesting and nice!

  • medyum, August 24, 2009

    they’re just plain old menus with pictures or effects.’

    I’d say they’re far from plain, and they’re certainly excellent examples of creativity in terms of layout and design. It’s worth mentioning that the majority of the sites featured are small, and with only a handful of pages, building your navigation is a much easier task.

  • Web Design Singapore, October 23, 2009

    You guys can take a small topic and make it sound like rocket science! i love it! thats why you guys are pro!

  • Tom, November 22, 2009

    These aren’t really very creative at all, there all just rows of boxes like any other website but with fancier images, nothing new and exciting.

  • seo, December 23, 2009

    They have some really cool designs and navigation! Nice sites!

  • Calin, January 4, 2010

    Wow, some of these are really great. If anyone is interested please check out my companies website at http://www.calindaniel.com, we have a really cool navigation system I haven’t seen anywhere else.

    C

  • web design york, April 18, 2010

    Some really good stuff there. Most are fairly complicated but for creative work they’re spot on.

  • Evan Skuthorpe, May 24, 2010

    some great examples here of navigation.

  • Janet, July 11, 2010

    wow very cool. Loved “time for cake”!

  • medyum, July 11, 2010

    This is great resource! I like most of the sites. Thanks for sharing this with us.
    Medyum Niyazi

  • angela, July 13, 2010

    that is a really nice collection, i just started a website and some of these will give me some great inspiration

  • Bernard Teske, July 29, 2010

    Cool Stuff. Sometimes it’s difficult to find a new idea. If you want checkout http://www.druckundrepro.de. I made this Website – some years ago – but I still like it. It’s using Flash. Today I Think I would use jQuery… Greetings, Bernard

  • Web Design York, September 3, 2010

    Excellent – really inspiring stuff. A Nice collection that have spurred me on to rethink the next project. Glad I stumbled on this article.

  • IWM - Marketing Internet, October 23, 2010

    I love John Gomez’s menu navigation.

    I will try to incoroporate this for my website.

  • Web design hull, November 23, 2010

    Really nice collection of creative navigation… Some might have usability issues but some really great designs, thanks!

  • Brabo Media, January 11, 2011

    Superb collection and source of inspiration. Thank you!

  • Web design York, January 27, 2011

    Great collection, loving the Ben Hulse Design – excellent!

  • medyum, April 16, 2011

    These are some very creative examples. I prefer navigation’s that are easy to read and use.

    MB Dragon is great because the navigation is big and easy to read.

    Time for Cake seems too cluttered for my preference.

    The Ben Hulse design navigation is very creative.

    I like having a hover for some reason it just makes sense……

    Medyum

  • Anoop Menon, June 21, 2011

    What a collection. Great resource. I like Hugs and MB Dragan.

  • Vishwas, March 30, 2012

    What a superb collection! I am a publisher myself. But there is no way on earth I will ever be able to create something like this. On my site, I have just plain horizontal navigation bar. That’s it. But I must say that I am really delighted to see your collection. And my favourite is Kukral :)

  • Alex Braker, June 25, 2012

    Yes Steven, you have given nice examples of the navigation. In the web design the most important thing is the navigation. By creating a good navigation, users can easily use the website and it is beneficial when your website has breadcrumb category. It is a good collection of the creative navigation.

  • Kev, July 11, 2012

    I think responsive top navigation is the best way to go and also keeping it as simple as possible. I have some great nav bars with and without a drop-down menu, and semi-transparent nav bars that will match any webpage background colour or design.

    Check out these Responsive Top Navigation Bars.
    http://templatz.co/navigation.php

  • Ant, July 21, 2012

    I don’t like “cloth moth”, just looks messy. “sitesguard” menu looks like it’s hard to read with those letters.
    The other ones look interesting though : D

  • Shaun, November 30, 2012

    A great show of creativity in web design, I really liked the Kukral and Davroc navigation designs

  • Andy Kuiper, May 16, 2013

    I looove the Kukral navigation example (5th from the top) :-) It’s a stunning visual that makes it clear where you’re going. Very creative navigation.
    Thanks Steven :-)