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
A beautiful minimalist menu with fast colors and a compact design.
Sleek looking tabs with drop shadow and a beautiful background pattern.
iPhone style menu for an Iphone app.
Simple, compact and sleek.
Light colors and creative symbols make this menu stand out from the crowd.
Solid colors and simple MouseOver effects make this menu pretty.
A nice multi-colored menu. The tiny green car indicates the current page.
A beautiful black and white themed menu with block fonts.
A simple menu with beautiful contrasting colors.
Another simple, light-colored design with unique tabs.
A black-and-white menu with a transparent effect.
A simple multi-line menu with soft blue colors.
A classy example of a minimalist multi-line menu.
Wide tabs and simple fonts give this menu a pretty sophisticated look.
Another multi-line menu with a great color scheme.
A truly dynamic menu. A thumbnail pops up every time you hover on a menu item.
A cool multi-line menu with the traditional underline effect.
Wide tabs and simple colors.
Another wide-tabbed menu with a transparent effect.
Refreshing use of numbers with each menu item.
Chalk-on-blackboard effect makes the menu casual yet creative.
Another great menu with elegant fonts and nice contrasting colors.
A really creative and unique menu for a DJ.
Pretty colors, elegant fonts and light effects.
Another creative menu with a nice casual look.
Each item in the menu is of a different color when you mouse over it. Really creative and fun.
Another casual sticky-note style menu.
Vertical Designs:
One of the most elegant menus. Nice use of bullets in a minimalist design.
An expandable vertical menu with lots of colors.
A casual arrow and a circle indicates the current page. The casual font also adds to the beauty of this menu.
Every item in this vertical menu turns a different color when you mouse over it.
A black-and-white vertical menu in the shape of a post card.
An elegant, multi-line vertical menu.
Sophisticated fonts and a transparent effect make this menu stand out.
A colorful menu with extra large fonts and symbols.
Another multi-line menu with a nice textured background.
A casual menu with a notebook effect.
Simple and elegant.
A highly dynamic menu with great effects and contrasting colors.
Another vertical menu with a transparent effect.
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?
Custom Search
Mary Lou (1 comments)22 February 10
Wow, some truly beautiful ones! Love the ClearLeft one!
Thanks for the collection!
cssclassic (1 comments)22 February 10
Nice Posting, do more pstgs
Pippin Williamson (7 comments)22 February 10
These look really great. Several of these are already on my own list of favorites. I’ll have to add more!
DivPlayers (3 comments)22 February 10
Great collection! I like the mint.com navigation, its creative and professional both. though all are superbly cool!!!
Codesquid (14 comments)22 February 10
Some truly nice finds here! I really like the Loodo one! Very clever!
Peach (1 comments)23 February 10
Nice list. Loodo is my fav as well.
Mohsin (29 comments)23 February 10
Great stuff. Always up for some inspiration.
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…
hery (5 comments)23 February 10
thanks, this is very helpfull for me…
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.
Keith Davis (71 comments)23 February 10
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.
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.
Guido Gihaux (1 comments)25 February 10
I miss the rich menus. The 3rd row menu. Do you have examples?
Max (5 comments)26 February 10
7, 19 and 21 are the very best)
Omer Greenwald (4 comments)26 February 10
Exceptionally awesome are the Carbonica, Clear Left, Small Stone and Ronnie Prize. Thanks for a very nice collection
Media Dew (4 comments)27 February 10
So many choices and awesome selections of different navigation schemes, it’s had to pick a favorite. Love the inspiration keep it up.
Furniture Lift (21 comments)27 February 10
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.
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
MadRukus (7 comments)2 March 10
Great showcase of different navigations.
Koratsuki (2 comments)6 March 10
Great post, thanks.
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
ucak bileti (1 comments)10 March 10
very nice things thank you very much ..
slim (1 comments)11 March 10
Great showcase of different navigations.
Vamerah (4 comments)12 March 10
Thank you, very interesting.
Top Wordpress Themes (6 comments)18 March 10
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.
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.
neatnest (2 comments)3 April 10
Thanks. It’s very helpful!
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.
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.
Juan Camilo Estela (1 comments)16 April 10
Great collection! very inspiring. You should check out my menu at http://www.fuseboxcreations.com. Hope you like it!
MobileGround (19 comments)17 April 10
7,32 are very cool .. thanks
inspirationfeed (14 comments)17 April 10
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.
chicago limo service (10 comments)22 April 10
These are really cool. I really admire these navigation bars. They are like model for every navigation design.
free website template (2 comments)10 May 10
Hi,
BTW, it is easy to combine this navigation menus with these Free Website Templates
free website template (2 comments)10 May 10
P.S,
Check This free website templates, they are ready to use.
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.
Bristol Web Design (40 comments)19 May 10
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.
Memory Brindes (7 comments)20 May 10
Beatifull designs to several site types, thanks!
GBG (4 comments)21 May 10
Great navigation menu designs, and lots of applications. Thanks for the excellent content!
Best to you …
Bournemouth Web Design (1 comments)22 May 10
Like the Loodo menu – thanks for the inspiration
Fachübersetzungen Nicole (3 comments)1 June 10
Clear preferance on the Nopoko Graphics menu. Hope, I got time to work it out for my page. Thanks for the input!
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.
Brindes Personalizados (4 comments)7 June 10
Ok, Tanks”
Brindes Personalizados (4 comments)7 June 10
Ok Tanks
Odzyskiwanie danych z dysku (3 comments)13 June 10
9 looks perfect.
Oto Kiralama (2 comments)17 June 10
Great navigation menu designs, and lots of applications. Thanks for the excellent content!
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.
Warren Jerzyszek (6 comments)2 July 10
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.
Sergio (2 comments)8 July 10
Amazing and very outstanding menus. But I prefer the oldschool menu like bookmarks
Brindes (1 comments)8 July 10
Great navigation menu designs, and lots of applications. Thanks for the excellent content!
Keep up the good work!!
Free Advertising Forum (6 comments)8 July 10
Thanks for the great list, im thinking of using number 27 in my next website i design.
Oyunlar (8 comments)8 July 10
Amazing and very outstanding menus. But I prefer the oldschool menu like bookmarks
web deisgn (6 comments)12 July 10
Great Post, there’s some really nice example of navigation menu designs.
Iklan Percuma (3 comments)14 July 10
OMG..this is awesome..i like this great list..thanks for it
Salehdbrent Sgdashhousedotcom (2 comments)17 July 10
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.
Website (1 comments)20 July 10
Great navigation menu designs. I like it! Thanks for the excellent content!
Steam Multimedia - Web Design Glasgow (9 comments)27 July 10
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
cupcakes maken (1 comments)29 July 10
Thank you great design! It is a good inspiration to me. How did you find all these?
Joyeria Contemporanea (12 comments)30 July 10
I agree that you have said that it have a good comment form because I like its comment form like how
Ropa Alternativa (11 comments)30 July 10
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
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.
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)
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)
Blink Web Design (1 comments)13 August 10
Nocturnal Miami is may favourite in that list
web design bristol (1 comments)21 August 10
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!
Web Development (1 comments)26 August 10
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.