30+ Examples of Big, Bold, and Beautiful Website Navigation Menus
Posted August 27, 2009 in Inspiration, Web Design 47 Comments »
One of the most recognizable elements in any website is the design of the main navigation menu. Some sites have large menus, others have small ones. Some sites have bold, attention-grabbing menus, others have something more subdued.
As a freelance web designer, you need to be able to draw upon many different styles depending on the current project you are working on. Since the current trend in design is bigger and more graphical menus, we thought it would be a good idea to offer some inspiration.
In this list we’ve compiled 30 of the most gorgeous navigation menu designs — all of which are big, bold, and beautiful. Take a look and see what you think:
8. DFW Usability Professionals
More Web Design Resources from FreelanceFolder
If you liked this list of beautiful headlines, you might also enjoy these other web design posts from FreelanceFolder:
- 15 Key Elements All Top Web Sites Should Have
- 10 SEO Techniques All Top Web Sites Should Use
- 15 Incredible WordPress Theme Customizations
- 10 Essential Plugins Every Modern Wordpress Site Should Have
- Top 10 Biggest Website Redesigns of All Time
Add Your Thoughts…
That’s it for this list — what do you think? Did we miss any awesome examples? Did you disagree with any of our choices?
Which was your favorite?
About the author: Mason Hipp is an entrepreneur, marketing guru, and writer. He blogs about life and business at FreelanceFolder.com and is co-author of the Book The Unlimited Freelancer. Follow him on twitter @MasonHipp
-
In honor of the new FreelanceFolder redesign, we decided to create a list of the top 10 most beautiful, most…
[Read More...] -
A brand new year has arrived and with it usually comes new hope and anticipation for better things to come.…
[Read More...] -
Given the quality of WordPress, it’s no surprise that it’s become the platform of choice for many web professionals.
[Read More...]
Due…
The Unlimited Freelancer is Now Only $19
Unleash the true potential of your business. Get The Unlimited Freelancer and start transforming your freelance business,
now only $19.
Try searching "Getting Clients" or "Productivity"
FreelanceCommunity
Free Resource: Massive Web UI and Button Set
This is a free photoshop set provided by MediaLoot with hundreds of free buttons, boxes, and other useful web elements.5 Fresh and Useful jQuery Plugins Were Born in November 2009
In November 2009, 5 jQuery plugins were born that are new and useful for web designers. Read this post to learn more.How Well Do You Understand CSS Positioning?
The css position property seems easy to grasp, but it works a little differently than it appears on the surface.
Free Report
Sign up for our product discount list to get a free copy of Why Some Freelancers Thrive and Others Barely Survive. You can unsubscribe anytime.
Popular Articles
- SEO Techniques All Top Websites Should Use
- When a Client Can't Afford You: Why It's Still Better to Bid High
- How To Stop Scrambling For Clients And Get A Steady Stream Of Paying Gigs
- A Simple Way To Stop Clients From Rejecting Your Proposals
- 3 Reasons Your Rates Are Still Low (And How To Start Raising Them)
47 Comments
Steve Bellante
August 27th, 2009 at 1:54 pmI really like #5. It’s simple, easy to navigate, and current in modern web design. The mellow colors and large text are nice on the eyes as well. It’s good to see that bolder text form taking shape around the web these days! =D
Mason Hipp
August 27th, 2009 at 6:04 pm@Steve — I’ll second that, #5 is very pretty.
I’d have to say my favorites are #7 and #13, though, there’s just something about beautiful icons that catches me (maybe because I can’t seem to make them myself).
Carla
August 27th, 2009 at 10:57 pmI really like the Ecosimply one and I agree with the others about #5. I am redesigning my retail store now and I want a much cleaner look that what I currently have.
Igor Kheifets
August 28th, 2009 at 3:06 amIt never seems to amaze me how much beauty can be created using html, css, photoshop and java.
Igor
Luke Jones
August 28th, 2009 at 6:32 amvery nice, head over to my site and see if you like my navigation!
I’m colour blind, so tried to be as colourful as possible.
Dave Sparks
August 28th, 2009 at 9:10 amBig type, big menus – everything on the web is getting bigger, whatever next!
Still it appears it can look good at least.
Murray
August 28th, 2009 at 1:42 pmwow, take a look at Jason Dorn’s, now that’s simple and awesome. The background seems a little busy, but it really pops out.
Pierre TOURISTIC
August 28th, 2009 at 1:48 pmHi, thank you for your benchmark.
In France, we found some websites with big menus and big rollover menus :
http://www.gites-de-france-landes.com
http://www.arte.tv
http://www.deco.fr
Most Interesting Ideas
August 28th, 2009 at 2:17 pmBeautiful set of menus
crazywabbit
August 28th, 2009 at 2:59 pmI agree everything is getting bigger, I am running at 1680 and still have to scroll. Are they mostly designed for the blind? Still some nice work.
carlo grossi
August 28th, 2009 at 6:35 pmwhat about our menu? ;-)
david strandberg
August 28th, 2009 at 11:59 pmlots of strong work. one thought – when you push the nav design? push the language, too. some fresh wording is out there…but the old and familiar (”news,” “contact us”) seems like it pulls the powerful designs down a bit.
Roxanne
August 29th, 2009 at 2:19 amI like #2 and #11 – they both have a little more fun and whimsy than the others, yet are still clean and professional. Great work!
Cathy at WebSavvyPR referred me to you… glad she did!
Kevin
August 29th, 2009 at 7:12 amThat’s the great collection… i love apple menu …you should include that as well
Anne
August 29th, 2009 at 11:40 amThese are all beautiful examples … however … the creative aesthetic and completely appealing presentation of beautiful text has one drawback (and perhaps one may blame the lagging web standards and search tech for this problem):
One of the no-no’s of web design in the 90’s was locking up text in graphics – i.e. making important key-words and search phrases unavailable to search engines by locking the text into a graphic. Search engines don’t have eyes the argument went, and it is as true today as it was back then.
Web site titles, sub-headings and navigation text are all important components of effective SEO, just as important as well written, authentic and useful content. One may make the mistake of thinking that “alt” text will do the trick, alas, this alternative is not nearly as effective as using the straight old boring fonts verdana, arial, etc. (you get the picture) text on titles, headers and navigation. This brings us to the limitations set on designers/developers forced to use these ancient and completely stale fonts:
CSS is making advances in font presentation, yes. But the old wars between the browsers (IE is particularly guilty here) are preventing creative designers from using the available standards to full effect (infuriating isn’t it?). Perhaps HTML5 will hail a new era of true advancement in this old battle, one can only hope.
At present designers, developers and SEO specialists have to make sacrifices in favor of either: usability, optimal search or aesthetics. Current web standards and search won’t allow for an all-round great solution to this problem, yet. Maybe by 2050? Who knows.
Nikhil
August 29th, 2009 at 2:52 pmHmmm…..
Really great stuff….here…inspiring!!
Matt Keegan
August 29th, 2009 at 3:24 pmI prefer a much more subdued menu, but not to the point where it is invisible. Between the navigation bar and my pages tab featured on the sidebar, I hope that the combination makes it easy for my visitors to get around.
info usaha purwokerto
August 30th, 2009 at 5:47 amthanks for sharing, its just 30 or actually you have much more.:)
Cristian Neagu
August 30th, 2009 at 3:01 pmYou can check out http://www.candesprojects.com menu. It’s very nice, simple and clear.
ChristianoErwen
September 1st, 2009 at 1:15 pm#30 is beautiful work
Kev Jaques
September 3rd, 2009 at 7:45 amAgree with the comment from Anne.
There is an important factor here though, it’s making the sites more usable with clearer/bigger calls to action which can only be a good thing.
wien
September 4th, 2009 at 6:54 ami like nr.2 and nr.6
Gennice
September 6th, 2009 at 6:12 amGreat collection!
I think Tutorial9 has the best design of all these. Great work!
Thanks!
info bisnis purwokerto
September 10th, 2009 at 3:18 amwhat a great post.thanks for sharing with us.pram from Indonesia say Hello There!may the best come with you always
Jennifer
September 12th, 2009 at 12:59 pmThanks for sharing! My favourites are:
29 – Water’s Edge Media: I love the creative way he breaks out of the “tab” metaphor. I just think if the birds were the same red as the links, it would be even cooler!
16 – Loodo: Again, I love the way they broke out of the tab metaphor, and adopted a curving game board. Very cool and creative.
8 – DFW Usability Professionals: Simple, friendly icons convey the message of usability well!
Vitezslav Valka
September 16th, 2009 at 3:14 amCoda is my favourite. Jiri Tvrdek my neighbour :-) Thank you for the list…
Mike
October 22nd, 2009 at 3:48 amSome great navigations designed here, very impressive collection. Some of these designs are very sleek and business like and others like the Loodo design are more arty and look like more fun to design, I think it shows in the design. Obviously those kind of designs don’t suit every client though.
Decent Weblog
November 1st, 2009 at 8:12 pmThanks for the collection. I am currently working on a web design project and I needed inspiration for navigation bars. I think my search for beautiful navigation bars ends here :)
blue2x
November 17th, 2009 at 12:37 ami like mac rabbit , its minimal but its pleasing to the eyes, thanks for the great post
Student Brands
November 21st, 2009 at 1:52 pmThanks for the great info, Hope to use it soon, Thanks again
eCentric Marketing
December 10th, 2009 at 2:09 amInspiring collection! Thanks for that…
Gotta love big buttons.
Huge fan of the cosmic soda.
Gyrel Dagooc
January 28th, 2010 at 3:59 amGreat compilation! I got an idea now for my new websites! thanks!
iphone
March 3rd, 2010 at 4:52 pmthe dragon interface is really nice. thanks for sharing your collection.
Babar
March 17th, 2010 at 6:33 pmamazing compilation…its inspirational
Brandon
March 17th, 2010 at 6:35 pmthanks for great information..keep up the good work
Trackbacks