40 Creative Navigation Menus

One of the first things to do when planning out a new website is to work out all of the content that will be in the site. You then divide that up into sections and then into various levels of navigation.

The result is a boring list of links.

That list of links is one of the most important part of your website though, it goes without saying that every visitor to the site will be using them to get around.

In this post we’ve pulled together some of the best designed navigation bars (both horizontal and vertical) to help give you ideas to enhance your own.

Horizontal Menus

1. Fabric London

A beautiful minimalist menu with fast colors and a compact design.

FabricLondon

2. Nopoko Graphics

Sleek looking tabs with drop shadow and a beautiful background pattern.

NopokoGraphics

3. Culture Code

iPhone style menu for an Iphone app.

CultureCode

4. Box Wish

Simple, compact and sleek.

Boxwish

5. Mac Rabbit

Light colors and creative symbols make this menu stand out from the crowd.

MacRabbit

6. Kyan Media

Solid colors and simple MouseOver effects make this menu pretty.

KyanMedia

7. Loodo

A nice multi-colored menu. The tiny green car indicates the current page.

Loodo

8. Firestone Live

A beautiful black and white themed menu with block fonts.

FirestoneLive

9. Matt Maxwell Design

A simple menu with beautiful contrasting colors.

MattMaxwellDesign

10. Cognigen

Another simple, light-colored design with unique tabs.

Cognigen

11. Black Book Mag:

A black-and-white menu with a transparent effect.

BlackBookMag

12. Agachi

A simple multi-line menu with soft blue colors.

Agachi

13. App Storm

A classy example of a minimalist multi-line menu.

AppStorm

14. Built By Buffalo

Wide tabs and simple fonts give this menu a pretty sophisticated look.

BuiltByBuffalo

15. Clear Left

Another multi-line menu with a great color scheme.

ClearLeft

16. Fashion Photography

A truly dynamic menu. A thumbnail pops up every time you hover on a menu item.

FasionPhotography

17. Mia and Maggie

A cool multi-line menu with the traditional underline effect.

MiaAndMaggie

18. Michael Austin

Wide tabs and simple colors.

MichaelAustinProductions

19. Mint

Another wide-tabbed menu with a transparent effect.

Mint

20. Rockatee

Refreshing use of numbers with each menu item.

Rockatee

21.Ronny Pries

Chalk-on-blackboard effect makes the menu casual yet creative.

RonnyPries

22. Royal Caribbean

Another great menu with elegant fonts and nice contrasting colors.

RoyalCarribean

23. Small Stone

A really creative and unique menu for a DJ.

SmallStone

24. Sohtanaka

Pretty colors, elegant fonts and light effects.

Sohtanaka

25. The Resume Girl

Another creative menu with a nice casual look.

TheResumeGirl

26. Sky Larkin

Each item in the menu is of a different color when you mouse over it. Really creative and fun.

WeareSkylarkin

27. Web Designer Wall

Another casual sticky-note style menu.

WebDesignerWll

Vertical Designs:

28. Surfstation

One of the most elegant menus. Nice use of bullets in a minimalist design.

SurfStation

29. Alex Cohaniuc

An expandable vertical menu with lots of colors.

AlexCohaniuc

30. Carbonica

A casual arrow and a circle indicates the current page. The casual font also adds to the beauty of this menu.

-Carbonia

31. District Solutions

Every item in this vertical menu turns a different color when you mouse over it.

DistrictSolutions

32. IipVapi

A black-and-white vertical menu in the shape of a post card.

IipVapi

33. Intereactive

An elegant, multi-line vertical menu.

Interactive

34. Power To The Poster

Sophisticated fonts and a transparent effect make this menu stand out.

-PowerToThePoster

35. Jeff Sarmiento

A colorful menu with extra large fonts and symbols.

-JeffSarmiento

36. McAllan Ridge

Another multi-line menu with a nice textured background.

McAllanRidge

37. Nando Designer

A casual menu with a notebook effect.

NandoDesigner

38. Pixel Media

Simple and elegant.

-PixelMedia

39. Nick Ad

A highly dynamic menu with great effects and contrasting colors.

NickAd

40. Nocturnal Miami

Another vertical menu with a transparent effect.

NocturnalMiami

Your Favorite Menus

Every site on the internet has its own menu, which means it’s simply impossible for us to even come close to finding all of the amazing menu designs out there.

What sites have you visited with a menu so nicely done, that you actually paused to look at it?

Share

  1. Mary Lou (1 comments)22 February 10

    Wow, some truly beautiful ones! Love the ClearLeft one!
    Thanks for the collection!

  2. Nice Posting, do more pstgs

  3. These look really great. Several of these are already on my own list of favorites. I’ll have to add more!

  4. Great collection! I like the mint.com navigation, its creative and professional both. though all are superbly cool!!!

  5. Codesquid (14 comments)22 February 10

    Some truly nice finds here! I really like the Loodo one! Very clever!

  6. Peach (1 comments)23 February 10

    Nice list. Loodo is my fav as well.

  7. Mohsin (29 comments)23 February 10

    Great stuff. Always up for some inspiration.

  8. Pat (2 comments)23 February 10

    Thanks for that inpiration again, I really like the simplicity from Mia and Maggie. I am really looking forward for a list with Mega Drop Down Menues…

  9. hery (5 comments)23 February 10

    thanks, this is very helpfull for me…

  10. jay design (12 comments)23 February 10

    Great round up of some slick navigation. The Small Stone nav is a cool idea. Would be nice if it was animated. Top level navigation is at times under-stated in web design as it can be a key area to make a site unique.

  11. Hi Tehseen
    Not just menus… they really add to the impact of the page.
    Very diverse collection, and my favourite?
    The one from Mint, described by you as “Another wide-tabbed menu with a transparent effect.”
    Looks great.

  12. Mitko (26 comments)24 February 10

    Great ideas, if you are wondering what menu to use for ur site/blog. But with so many choices how does one stick to one style/nav bar/theme.

    I like it today, I wanna change it tomorrow :) it’ so annoying when u have a choice.

  13. I miss the rich menus. The 3rd row menu. Do you have examples?

  14. Max (5 comments)26 February 10

    7, 19 and 21 are the very best)

  15. Exceptionally awesome are the Carbonica, Clear Left, Small Stone and Ronnie Prize. Thanks for a very nice collection

  16. So many choices and awesome selections of different navigation schemes, it’s had to pick a favorite. Love the inspiration keep it up.

  17. Hi,

    I definitely agree that the navigation menus must be given attention like what is given on the design of the website because by this menus there is lot of chance that visitor would visit the other pages of your site. By doing a descriptive or appealing menus visitor would have the cue to click on that.

    Regarding on the post, it is very nice and it is obviously researched. You have shown all good example of good navigation menus design.

  18. Linny (1 comments)2 March 10

    Wow thanks for the layout of the menus…there were some options here that I wouldn’t have ever thought of….I’m torn between many of them

  19. MadRukus (7 comments)2 March 10

    Great showcase of different navigations.

  20. Koratsuki (2 comments)6 March 10

    Great post, thanks.

  21. Mitko (26 comments)7 March 10

    Combined all posts about sites, make up one good quality “theme”. This was the last piece of the puzzle I need to give my site that overall finished look. Thank you

  22. ucak bileti (1 comments)10 March 10

    very nice things thank you very much ..

  23. slim (1 comments)11 March 10

    Great showcase of different navigations.

  24. Vamerah (4 comments)12 March 10

    Thank you, very interesting.

  25. I am officially inspired! I think one of the hardest things of web design is coming out with a navigation bar that is not only useful but also looks great and original. With thousands of sites out there, most navigation bars look and function very much alike. Adding some spark to the nav can truly make your site stand out.
    Thanks for these inspirations to use on my next project.

  26. inopacnon (1 comments)28 March 10

    I’m a web developer and I have to say those are one of a kind nav designs. Looking forward to pattern one or two of those on my works. Thanks you so much.

  27. neatnest (2 comments)3 April 10

    Thanks. It’s very helpful!

  28. Damian smith (7 comments)9 April 10

    Thanks for all of these! some really great ideas here, someone mentioned before me that designing the navigation is a fairly hard thing to do. You have to make sure its simple to use and read as well as it fitting into the rest of your design.

    I tend to either make the navigation the very first or very last thing I work on, sometimes I will think of a great navigation design and then build the site around it or sometimes I’m completely at a loss for ideas and get inspiration from the rest of the site I have designed!

    I’m not a fan of the over complicated designs such as the small stone DJ design, I much prefer a clean look, I think one of my favourite designs in this list is Fabric London, good choice of font and the simple design with the coloured dot really makes it work and look great.

    Thanks for the inspiration anyway! Will definitely refer to this if I’m ever stuck again.

  29. Shane (5 comments)12 April 10

    Great Post, there’s some really nice example of navigation menu designs. It’s so hard to choose a favourite, I’m definitely bookmarking this for future reference.

    Thanks.

  30. Great collection! very inspiring. You should check out my menu at http://www.fuseboxcreations.com. Hope you like it!

  31. MobileGround (19 comments)17 April 10

    7,32 are very cool .. thanks

  32. I really like Mac Rabbit, it helps alot to have an icon by any button.
    This is more pleasing to look at and its easy to remember.

  33. These are really cool. I really admire these navigation bars. They are like model for every navigation design.

  34. Hi,

    BTW, it is easy to combine this navigation menus with these Free Website Templates

  35. P.S,

    Check This free website templates, they are ready to use.

  36. Glass Bottles (2 comments)17 May 10

    It is amazing how versatile we can get with this simple pattern of words. There are some really awesome menus here.

  37. Great compilation of menus and so many nice ones to choose from. I always get stuck when it comes to designing a nice navigation menu. These will definitely give me some new ideas. Thanks for these.

  38. Beatifull designs to several site types, thanks!

  39. GBG (4 comments)21 May 10

    Great navigation menu designs, and lots of applications. Thanks for the excellent content!

    Best to you …

  40. Like the Loodo menu – thanks for the inspiration

  41. Clear preferance on the Nopoko Graphics menu. Hope, I got time to work it out for my page. Thanks for the input!

  42. penny auctions (24 comments)2 June 10

    Hi,
    I liked this post so much that i just had to tweet it. This is by so far one of the best posts that i have seen so far.

  43. Ok, Tanks”

  44. Ok Tanks

  45. 9 looks perfect.

  46. Oto Kiralama (2 comments)17 June 10

    Great navigation menu designs, and lots of applications. Thanks for the excellent content!

  47. Sheryll (1 comments)24 June 10

    Great collection! Lots of great inspiration here. It is true that the navigation is just as important as the content which is often overlooked.

  48. Awesome list of really inspiring navigation, I personally love the post it notes and the ludo board… such unique ideas I don’t think I’ve ever seen navigation this creative… It’s really inspired me to get a bit more adventurous with my navigation in my next site. How did you find all these? must of took you quite some time.

  49. Sergio (2 comments)8 July 10

    Amazing and very outstanding menus. But I prefer the oldschool menu like bookmarks :)

  50. Brindes (1 comments)8 July 10

    Great navigation menu designs, and lots of applications. Thanks for the excellent content!

    Keep up the good work!!

  51. Thanks for the great list, im thinking of using number 27 in my next website i design.

  52. Oyunlar (8 comments)8 July 10

    Amazing and very outstanding menus. But I prefer the oldschool menu like bookmarks

  53. web deisgn (6 comments)12 July 10

    Great Post, there’s some really nice example of navigation menu designs.

  54. OMG..this is awesome..i like this great list..thanks for it

  55. Wow great article. That give me an inspiration on how to redesign my WordPress website. I must really thank you for this post. it helped me a lot.

  56. Website (1 comments)20 July 10

    Great navigation menu designs. I like it! Thanks for the excellent content!

  57. I have to say that there is alot on the menu there. lol poor joke

    Its good to see a nice big list of different menu styles because when you are always trying to come up with new ideas and expecially for menus you can some times run a little short and you dont really want everything to look the same.

    Good work in finding a nice list of different looking menus

  58. Thank you great design! It is a good inspiration to me. How did you find all these?

  59. I agree that you have said that it have a good comment form because I like its comment form like how

  60. Its good to see a nice big list of different menu styles because when you are always trying to come up with new ideas and expecially for menus you can some times run a little short

  61. Angela (3 comments)4 August 10

    They are all great! But what I love the most is the Agachi. Love the sub menus you can add above the main menu for each tab. Where can I get that one and how much does it cost? I would really love to have that on my web site.

  62. Amy (4 comments)5 August 10

    Thanks for the menus. But i like mega drop down menu 2 or 3 column menus. for example : go to my site (prowp.net)

  63. saat (1 comments)6 August 10

    Thanks for the menus. But i like mega drop down menu 2 or 3 column menus. for example : go to my site (prowp.net)

  64. Nocturnal Miami is may favourite in that list

  65. Thanks for sharing. Very inspiring ideas. It is always tricky to get the balance right with navigation between making something new and interesting, and yet still easy to use. Navigation is all about functionality at the end of the day, so people need to know how to find their way around the site. This doesn’t have to be boring though, as your blog posts shows. Nice post! :)

  66. There are vertical menu designs in your list – most of the designs use a horizontal system – which doesnt quite follow the “F” visual pattern that most users follow.

Leave a Comment

Your reply will be added to the comment above (Below any other replies to this comment) -

(We DoFollow)

Not sure how to get an image with your comment?