30 Website Navigations that Make You Wanna Click It

By / Dec 16, 2009 / Inspiration

The navigation might be the single most important aspect of a web design’s usability. Without a navigation, you would be stuck on the home page for a very long time. I believe a navigation or menu must be easy to use, but this doesn’t mean it has to be boring. In fact, it helps to add a little flair to your navigation. It entices visitors to click and hang around your site a little longer. Here are thirty examples of beautifully designed web design navigation for your inspiration.

Billy Tamplin

website navigation

Burciaga

website navigation

The Swish Life

website navigation

Mission Bicycle Company

website navigation

Typejockeys

website navigation

Red Velvet Art

website navigation

MetaLab

website navigation

Authentic Jobs

website navigation

Icon Dock

website navigation

Morphix Design Studio

website navigation

Sushi & Robots

website navigation

Utah.travel

website navigation

Robert Alan

website navigation

Hull Digital Live 09

website navigation

NOSOTROS

website navigation

Artua Design Studios

website navigation

Internet Dreams

website navigation

Strutta

website navigation

Pirata London

website navigation

Tapbots

website navigation

Weightshift

website navigation

Guifx

website navigation

Owltastic

website navigation

inkd

website navigation

Bohemian Coding

website navigation

Think Orange

website navigation

Culinary Culture

website navigation

Light CMS

website navigation

Toggle

website navigation

atebits

website navigation

About the Author

Henry Jones is a web developer, designer, and entrepreneur with over 14 years of experience. He is the founder of WDL and ThemeTrust.

  • http://BrendanWenzel.net Brendan Wenzel

    Great list. Wish I would have seen it earlier. Needed the help. Oh well. I’m happy with what I ended up with. Thanks for the inspiration list.

  • http://webvisionairs.com webdevelopment

    I like the list, well mainly because it contains some pretty examples.

    But my question is: do these pretty buttons really want to make you click them? Do you have test data to back your statement ?

    Cheers

  • http://www.smashingshare.com Waheed Akhtar

    Excellent examples. Love them all

  • http://www.portsurf.co.uk Damian Webber

    How about the very simple navigation of http://www.portsurf.co.uk

    This still needs some tweaks to stop the navigation bouncing when over-zealous mouse movements are used but I like it.

    One day we’ll have the time to make the site even slicker (I’d love to have more time, I really would!)

    Great list, though – very inspirational for those who are not graphic designers

  • http://designinformer.com Design Informer

    Utah and Pirata London are the ones that I really like for some reason.

    Nice collection. I think the nav is a very important part of the design. I do think that the links should be enticing, and you have done a great job showcasing sites that have enticing navigations. :)

  • http://designi1.com designi1

    nice examples!!

  • http://jhaygamba.com Jhay Gamba

    Awesome collection!! Thanks

  • http://ijlalhasnain.com dandy

    Great navigation bars. Loved to navigate them.
    Thanks

  • http://www.icreativelabs.com Anggi@icreativelabs

    i liked metalab and guifx

  • http://www.manthonydesign.blogspot.com M Anthony

    nice list… thank you.

  • http://selfignition.net Check

    Love the post title

  • http://www.petrus-studio.com Petrus

    Nice showcase with beautiful examples. Good work.

  • http://www.DigitalOvercast.com Kien

    tabs for navagation never seem to get old. great post.

  • http://www.limina-ao.com Jon Fukuda

    Nice showcase! It’s always a beautiful thing when cognitive psychology, gestalt laws of perception, elegant design and keen interaction modeling come together!

    There’s something to be said for the aesthetic-usability effect. It doesn’t always solve the problem, but it does make you want to click!

  • http://sexidesign.com Melody

    This showcase is an example of clean webdesign..love the red velvet art navigation!

  • http://www.aimonkey.com Waasys

    Hate such buttons! i click them even if don’t want to (

    • vivienne

      haha.

  • http://dkuntz2.co.cc Don

    I wasn’t a fan of a couple of these, some of them look the same as lots of other websites. I hated the Utah one, those compelled me not to click on them.

  • http://www.db-elements.com DB-Elements

    Very nice! Extremely inspirational.

  • http://www.xcellence-it.com/ Xcellence IT

    hey, it helps generate great ideas… we can use few styling & colors in making layouts for our clients..

    great list.

    Thanks
    Xcellence IT

  • http://corecss.net $hekh@r

    thax for great inspiration.

  • http://www.waqaskhanonline.com waqas khan

    good stuff, thanx.

  • http://www.nopun.com Noel Wiggins

    There are so many elements that go into making a great website design. So many it can be overwhelming, personally I like to break each element up into individual creative exercises, In most cases the creativity is limitless, but I have found that the navigation is one of those elements you have to be careful with, being you don’t want to confuse the visitors,

    I love this round up, for navigation inspirada, it is both creative and clearly noticeable, and can really help explore ideas for any website design project

    Thanks and Regards

    Noel for Nopun.com
    professional graphics design

  • Glassgigang

    Actually a large amount of them does make me want to leave their site.

  • M.R.

    Thanks for posting.

    Me likes Burciaga’s site design.

  • http://web-patterns.net Samoo

    Though they all are good examples, I love clean, simple navigation such as Mission Bycicle company.
    If you want to see others navigation samples here you are a nice list that I’ve made up:
    http://web-patterns.net/category/menu-navigation/

  • http://www.moinid.com Design Ideas

    Great collection of navigations

  • http://www.rk1webdesigns.co.uk RK1 Web Design

    Inspiring list of web navigation.

  • http://www.bigtunainteractive.com Adam Hermsdorfer

    You’re seeing more navigation sets with icon sets and sprites. Nice list.

  • http://www.spunkz.co.cc aziq

    Just love them all.

  • http://www.kaplang.com/blog Michelle

    really nice collection :)

  • http://32aabra.com Amanda Sage

    I like the more subtle ones. I think Nosotros is my favorite. The only one I really don’t like is the ribbon-shaped Home button on Billy Tamplin… it looks like an award, which would be a weird thing to have in your navigation.

  • http://www.westfloridacomponents.com Andy

    Some really good ones. I get inspired by looking at them. Thanks for showcasing them.

  • http://www.templatecustomization.org Template Customization

    I like the “atebits” site, like apple design. Very nice looks. Thanks a lot.

  • http://stephenou.com Stephen Ou

    Carsonfied is not on it :(

  • http://www.tj-todo.com Thibault

    Really good stuff. Thanks for sharing.

  • brahim abrkok

    that”s very nice . all like of them

  • http://www.glendelmdesign.co.uk Glendelm Web Design

    This is a great collection. Thanks for sharing these, I particularly like all the Apple-style ones. :)

  • http://www.kadom.net Thomas

    Great inspiration, thanks

  • http://www.resonancecommunication.com Pynouch

    love the inkd navigationcsimple but useful.

  • http://sidoza.com Siddhartha Oza

    Fantastic. Although I know most designers dont prefer it, and I am not a designer or a UX expert, but still, no examples of vertical navigation that are very clicky?

  • Great Post

    Awesome post

  • http://www.dotndot.com dotndot

    Wonderful collection.Great post.

  • http://www.digikraf.com Digikraf

    I love the Utah.travel thing…. too good…

    Thanx for the post!

  • http://www.greatmindsdesign.com ecommerce web design

    I think many people over look how important the style of menu buttons can be in a website design. All of these websites are great examples as the menu buttons make you want to click through.

  • http://ahadith.co.uk Hadith

    Great site for this, im definitely bookmarking it.

  • Ronnie

    http://monaconovel.com
    best navigation ever

  • http://www.FREEPETCOGIFTCARD250.TK Shelton Heusinkveld

    I like the layout of your blog and I’m going to do the same thing for mine. Do you have any tips? Please PM ME on yahoo @ AmandaLovesYou702

  • http://www.greatmindsdesign.com web design los angeles

    These are really great menu designs. Probably one of the most overlooked things when designing a website.

  • http://www.rakdesign.com Rak Design

    Great varity… good inspirational blog.

  • Pingback: 12 Excellent CSS3 Button and Menu Techniques | Tutorials()

  • http://www.ivanovandrey.net/ drummer

    Great site and very nice info! Thanks!

  • Alex I.

    Wow! Also fantastic navigation i’m find here – http://aisay.org

  • Hannah P.

    I am so grateful to know this site. Very amazing! It helping me a lot in navigating easily and is giving me idea in web designing.

  • http://www.olviafest.com/ olvia

    webdesignledger very nice!

  • http://www.keremsuer.com Kerem

    Not to brag but I find my websites navigation pretty clickable.

  • http://www.netkreativ.hu Webáruház készítés

    Nice i like them :-)

  • http://www.reynoldsdigital.com RD Web Design

    These are fantastic, internet dream have a very good design with the blue.

  • http://www.nua.ie Nuasoft Web Design

    Some really nice designs there.

    Unfortunatly it looks like lightcms replaced thir navigation with something far less interesting.

  • http://www.spinxwebdesignnewyork.com/ Website Design New York

    Amazing navigations, stylish navigation plays major role for getting success in online business

  • http://www.finchstudio.co.uk Web Design Winchester

    Inspirational

  • http://www.justtotaltech.co.uk/ web designer london

    Awesome collection, it really play key role in online world.
    Thanks for sharing….