Jul 26 2011

40+ Websites with Unusual Navigation

Advertisement

Navigation is the most important part of a website without which no website can effectively operate. Achieving unique navigation that effectively fulfills its purpose is nearly akin to climbing Mount Everest. Having a unique navigation with perfect functionality makes the website easy to navigate, thus ensuring a better users experience.

Here, we have collected some sites with amazing and unique navigational elements that will not only inspire you, but will show you how to combine innovation with practicality. We hope you like this assortment. Enjoy!

CSS and JavaScript Based Navigation Menu

Small Stone
The navigation of this site goes with the theme. This is a website of a US based record label that is evident through its navigation.

Screenshot

BountyBev
BountyBev turns to their creativity to help make their navigation menu as unique and distinctive as it is.

Screenshot

I am Yuna
Beautiful navigation with exceptional hover effects. Navigation menu goes up and down when you hover over it with your mouse.

Screenshot

Racket
Truly exceptional and creative navigation that shows a hierarchy of menu up to its roots.

Screenshot

Side Show Press Shop
An easy to navigate website thanks to its well designed navigation menu.

Screenshot

TapTapTap
A restaurant menu like navigation is used here that looks really great. The navigation grabs the attention with its simplicity and creativity.

Screenshot

Studio-Output
Beautiful and appealing navigation. Selected area becomes highlighted and provides necessary information to the visitors.

Screenshot

Got Milk
Bold use of a centered navigation menu that never dislodges from its position. On hover, icons change to text.

Screenshot

CathyBeck
This website uses a unique navigation style that opens and closes like a scroll when a menu is chosen.

Screenshot

Unfold
Unfold has a simple yet most powerful navigation system that sets it apart from other websites.

Screenshot

Lab for Culture
Simply creative navigation menu is used here that not only is functional but looks visually interesting as well.

Screenshot

El Studio
Beautiful and easy to navigate website demonstrating the power of their navigation menu.

Screenshot

Acko
The site navigation is designed from a totally different perspective. Worth mentioning.

Screenshot

Jiri Tvrdek
Yet another creative way to present site navigation. Here the navigation is presented in the form of fruit bearing tree.

Screenshot

District Solutions
Vertical tabs are very rarely used as navigation bars, but this website proves that they can look stunning if used properly.

Screenshot

Dragon Interactive
Simple, neat and clean navigation that looks stunning with the stylish hover effect employed.

Screenshot

Helmy Bern
The navigation has a grungy style and jQuery dropdown menu.

Screenshot

Andreas Hinkel
Here the navigational elements are setup as handwritten captions on a Polaroid picture.

Screenshot

Cypher13
Cypher 13 possesses a flexible navigation that is supported by photographs and text. This style is appealing, practical and at times amusing.

Screenshot

Im Design
Navigate the site through the arrows and certain other keys of your keyboard, Mac users may require their mouse on some occasions.

Screenshot

Studio Stemmler
Studio Stemmler has a simple landing page. But the instant you choose a category, the interface transforms giving you several ways to access content.

Screenshot

Thibaud
Another dazzling portfolio with innovative navigation, this one is based on Flash color samples to select from. Similar items are grouped together.

Screenshot

SensiSoft
To help visitors connect with their creative navigation menu, SensiSoft puts a familiar-looking information stand in the center.

Screenshot

Flash Based Navigation Menu

Work Life Balance Centre
Work Life Balance Centre uses a balanced navigation menu that emphasizes all the necessary elements.

Screenshot

Narrow Design
This is a portfolio website where Nick Jones uses a simple but dynamic sort of navigation.

Screenshot

TBWA\HAKUHODO
Navigation is based on a beautiful artistic scenario where every element used adds life to the site, simply magnificent.

Screenshot

Gleis 3
Overall the site is simple and plain, but creatively used navigation makes this website look out of the ordinary.

Screenshot

Marc Anton Dahme
A unique concept of mouse and keyboard being used as the navigation that really stands out, all the while remaining practical.

Screenshot

Amore
Navigational menu is set at the bottom of the web page and has some cool hover effects incorporated.

Screenshot

Grip Limited
Here you can navigate with the simple scroll of your mouse or with the arrows keys of your keyboard.

Screenshot

65media
Bold use of navigational elements on this site stimulates a visual interest among users.

Screenshot

Organic Grid
Organic Grid uses an excellent approach to create navigation bars as if they are the main attraction of the website. Navigation bars move left and right when mouse over to it.

Screenshot

Innovative Imaging Professionals
Here a beautiful navigation menu with hover color effect is used that gives the website a very unique feel.

Screenshot

Moodstream | Getty Image
This website tweaks the mood sliders in order to squeeze your creative juices. This navigation style rocks.

Screenshot

Not forgotten Movie
Here navigation is presented in the form of tarot like cards which catch fire when clicked. The cards are based on a devilish and freaky theme to match the feel of the website.

Screenshot

Marc Ecko
This site’s navigation allows the visitors to take a tour of a virtual art gallery to move through the site’s offerings. A more traditional nav menu is also included.

Screenshot

Agency Net
This is a New York and Fort Lauderdale based design studio whose website uses a dramatic and astonishing navigation design.

Screenshot

Nickad
A flexible approach is taken while keeping the navigation easy to use. Stars when clicked change to navigation that simply look stunning.

Screenshot

Okaydave
The navigation is set at the bottom of the web page which is out of the ordinary in and of itself. Different images are used to point to the same content.

Screenshot

Section Seven
A colorful and vibrant pamphlet like navigation gives this site character and sets it apart from others.

Screenshot

Andreas Smetana
You can navigate through the photo thumbnails either by using your mouse wheel or the arrows.

Screenshot

You may also want to consider our previous posts:

(rb)

About the Author

Aquil Akhter is a web graphic designer and has been working in this field for 8 years. He also runs the blog webdesigncore.com, which focuses on free web resources and inspiration for designers and developers.

Comments and Discussions
  • George Dina, 26 July 2011

    Great article for inspiration!
    I love Section Seven and racket.net websites.

  • Tiago Balbino, 26 July 2011

    So good inspirational … congratulations

  • Dhawal D, 26 July 2011

    Amazing Stuffs!!

  • PeterV, 26 July 2011

    Nice collection, but you should revisit the classifications as at least 4 of them under CSS are actually Flash: Lab for Culture, Studio Stemmler, Thibaud & SensiSoft

  • peer jenuschey, 26 July 2011

    very amazing!

    Another great exaample(I think): http://www.rhythmus-2000.de

  • ndmdesign, 26 July 2011

    Great collection! Thanks for putting it together and sharing, Aquil! Love Moodstream and Grip Limited.

  • Alex Rees, 26 July 2011

    That small stone recordings website is terrible IMO! Just spent 10 valuable seconds clicking on various buttons and dials which didn’t do anything but are indistinguishable from those that do

  • Goukaseishi, 26 July 2011

    Awesome collection of different websites. I loved the Sensisoft website when I first saw it. I have to decide what to use on my next website now :0).

  • Pietsen, 27 July 2011

    Great list of cool websites. Very nice to view. Some of them are real art. Many greetings from Germany. Pietsen.

  • PsdDude, 27 July 2011

    cool list, I’ve always enjoyed such inspirational design collections … I really like Helmy Bern and Jiri Tvrdek !

    thanks for sharing :)

  • Cool examples of unsual navigations.
    Thanks for sharing.

  • Paul, 01 August 2011

    The navigation on these sites is, while unique, completely accessible. Such a combination is the hallmark of a perfect website.

  • smurfalurf, 01 August 2011

    great collection! 5*
    maybe you want to add
    http://www.schaefer-music.com

  • haungo, 03 August 2011

    Don’t forget about http://www.parioonline.com

    ;)

  • @UlisesBolivar, 07 August 2011

    interesante web

  • JB Web Design, 01 September 2011

    Cool post. Love the BountyBv site and that Nickad has some seriously slick flash skills. Great read

  • Rana mukherjee, 14 September 2011

    Nice.

  • Fort3design, 01 October 2011

    These websites really present information and content in an interactive and fresh way. Regardless, I think sometimes navigation be unnecessarily complicated and prevent a user from finding content easily. I’m all for new and different navigation, but sometimes it can just get too gimmicky.

    Maybe part of the reason it’s harder to find content is that we’ve established a norm of head/side bars. People aren’t used to more creative websites like this, and poor website design tends to be basic, but accesible. In addition, a lot of the templates out there use a similar layout.

    Maybe if more of these websites existed, people would feel more comfortable with them?

search form
 
image description image description