Vitaly Friedman

About The Author

Vitaly Friedman Vitaly Friedman loves beautiful content and doesn’t like to give in easily. Vitaly is writer, speaker, author and editor-in-chief of Smashing Magazine. He runs responsive Web design workshops, online workshops and loves solving complex UX, front-end and performance problems in large companies. Get in touch.

CSS-Based Navigation Menus: Modern Solutions

Navigation menus have to be intuitive, precise and easy-to-use. One simple, basic principle, which is common for all kinds of nav bars you would ever want to use for your projects. In fact, navigation menu is probably the most important element in web design: after all, it is being used more often than any other element on a given page. Therefore it's important to make sure that your visitors...

[Update Dec. 2015] Please note that the below-presented examples are heavily outdated. If you look for up-to-date navigation design techniques, please continue reading on Marco Hengstenberg's Designing Smashing's Mobile Navigation, David Bushell's Responsive Off-Canvas Navigation, Viljami Salminen's Responsive Nav Plugin, or check out or our latest articles on designing a modern, lightweight and responsive navigation. (Ed.)


Navigation menus have to be intuitive, precise and easy-to-use. One simple, fundamental principle, which is common for all kinds of nav bars you would ever want to use for your projects. In fact, the navigation menu is probably the most important element in web design: after all, it is being used more often than any other element on a given page. Therefore, it's important to make sure that your visitors will find they way around the site structure - however complex the latter might be.

So how do designers cope with a challenging task to create an attractive and usable menu? Which results can be achieved? OK, that's a tough one. Let's take a look around.

Below you'll find 53 beautiful and user-friendly Navigation Menus and solutions web designers came up with using basic CSS styling.

PS: Over the last few months we've reviewed CSS-Based Techniques, CSS-Based Forms and CSS-Based Tables and CSS-Based Footers (yes, some of these techniques use not only CSS, but also JavaScript and PHP). You'll find even more CSS-related articles in our CSS Section.

PSS: We have included some DHTML- and JavaScript-based navigation menus in this list by mistake. Sorry for inconvenience.

CSS-Based Navigation Menus Link

Change.org Link

Navigation Menus - Change.org
N.Design Studio | Design & Blog Link
Navigation Menus - N.Design Studio | Design & Blog
Good Creative - Web and Graphic Design Link

Navigation Menus - Good Creative - Web and Graphic Design

MacRabbit - Welcome Link
Navigation Menus - MacRabbit - Welcome
Joyent: Introducing Joyent Link
Navigation Menus - Joyent: Introducing Joyent
CSS Vault » The Web's CSS Site Link
Navigation Menus - CSS Vault » The Web's CSS Site
notiam.com Link
Navigation Menus - notiam.com
Jamie Huskisson: Full time UK PHP freelance developer Link
Navigation Menus - Jamie Huskisson: Full time UK PHP freelance developer
Web design, development and consultancy from Ottawa, Canada - Snook.ca Link
Navigation Menus - Web design, development and consultancy from Ottawa, Canada - Snook.ca
BREAKER DESIGN Link
Navigation Menus - BREAKER DESIGN
Jen Gordon Link
Navigation Menus - Jen Gordon
Tulumarka Link
Navigation Menus - Tulumarka
Ars Technica Link
Navigation Menus - Ars Technica
CSS Beauty | CSS Design, News, Jobs, Community, Web Standards Link
Navigation Menus - CSS Beauty | CSS Design, News, Jobs, Community, Web Standards
Digg / Technology Link
Navigation Menus - Digg / Technology
Triple Crown Customer Service Link
Navigation Menus - Triple Crown Customer Service
microformats Link
Navigation Menus - microformats
Badboy.ro Link
Navigation Menus - Badboy.ro
GetMenus.ca Link
Navigation Menus - GetMenus.ca
Wedding Extravaganza 2007 - A Perfect Marriage Link
Navigation Menus - Wedding Extravaganza 2007 - A Perfect Marriage
Job Pile - Aggregating the Best Job Boards on the Web - Artypapers Link
Navigation Menus - Job Pile - Aggregating the Best Job Boards on the Web - Artypapers
Norman Morrow & Co - Estate Agents In Crumlin, Northern Ireland Link
Navigation Menus - Norman Morrow & Co - Estate Agents In Crumlin, Northern Ireland
Listal - List the stuff you love! Movies, TV, music, games and books Link
Navigation Menus - Listal - List the stuff you love! Movies, TV, music, games and books
folietto Link
Navigation Menus - folietto
Tony Yoo - Online Showcase (version2) Link
Navigation Menus - Tony Yoo - Online Showcase (version2)
Digital Web Magazine Link
Navigation Menus - Digital Web Magazine
Denbighshire Supporting Business Link
Navigation Menus - Denbighshire Supporting Business | Denbighshire, Supporting, Business
Pulmad, peod, lillesalong... - Annilill Peoteenindus Link
Navigation Menus - Pulmad, peod, lillesalong... - Annilill Peoteenindus
ExpressionEngine - Publish Your Universe! Link
Navigation Menus - ExpressionEngine - Publish Your Universe!
coda.coza Link
Navigation Menus - coda.coza
purevolume™ | We're Listening To You Link
Navigation Menus - purevolume™ | We're Listening To You
EGOLOUNGE *Büro für digitales Design Link
Navigation Menus - EGOLOUNGE *Büro für digitales Design
Merix - Internet Technologies Link
Navigation Menus - Merix - Internet Technologies
Bartelme Design | Showroom Link
Navigation Menus - Bartelme Design | Showroom
Luis Alarcón, Blog Link
Navigation Menus - Luis Alarcón, Blog
CSS3 . info - Everything you need to know about CSS3 Link
Navigation Menus - CSS3 . info - Everything you need to know about CSS3
nclud™ a creative web design agency Link
Navigation Menus - nclud™ a creative web design agency
Convan Design - Howdy Link
Navigation Menus - Convan Design - Howdy
ExpressionEngine - Publish Your Universe! Link
Navigation Menus - ExpressionEngine - Publish Your Universe!
Silverpoint: Web Solutions for Schools Link
Navigation Menus - Silverpoint: Web Solutions for Schools
Jambor-ee - Celebrating ExpressionEngine Link
Navigation Menus - Jambor-ee - Celebrating ExpressionEngine
far from fearless Link
Navigation Menus - far from fearless
Scribd - Home Link
Navigation Menus - Scribd - Home
Erika Greco - Blog Link
Navigation Menus - Erika Greco - Blog
Navigation Menus - Photoshop Tutorials and Articles - Tutorial Blog
Welcome to Buzz — Buzz Recruitment Link
Navigation Menus - Welcome to Buzz — Buzz Recruitment
Michal Zapoměl - český vlasový design | czech hair design Link
Navigation Menus - Michal Zapoměl - český vlasový design | czech hair design - Úvodní stránka
Onlinecenter Upload Link
Navigation Menus - Onlinecenter Upload
M122Arts Mixed Media and Technology // oo*o Link

Navigation Menus - M122Arts Mixed Media and Technology // oo*o

KazanShops.Ru Link
Navigation Menus - Магазины Казани - казанский сайт для тех, кто покупает - www.KazanShops.Ru
Stone inc. - Aménagements Paysager, Pavés. Link
Navigation Menus - Stone inc. - Aménagements Paysager, Pavés, Murets, Tourbe et plus!
Navigation Menus - Pixellogo
AUSMAG - das Australien Work & Travel Portal Link
Navigation Menus - AUSMAG - das Australien Work & Travel Portal - Arbeiten und Reisen in Australien

— Comments 0

Leave a comment


More Articles on

Inspire Yourself: 58 Creative Logos

by Sven Lennartz

Logotypes stand for Corporate Identity. The better a logo is designed, the greater is the probability that your potential clients will remember your CI and get back to you once your service is needed. Consequence: designers have to be creative and put many efforts in designing beautiful, unique and catchy logos. And the results they come out with are sometimes stunning and spectacular. Both in...

Read more

45 Fresh, Clean and Impressive Designs

by Vitaly Friedman

Sometimes it's just amazing to see, which level of usability, legibility and visual appeal can be achieved using some basic design techniques. In fact, some talanted web-developers manage to deliver powerful, functional and gorgeous web-design in "look-and-feel"-style, which is easy to use and nice to see. Recently we've listed 50 Beautiful CSS-based web-design of 2006 and chosen some of...

Read more

30 Dark Designs You Should've Seen

by Vitaly Friedman

Dark designs can be really stunning. I mean, really. In Web 2.0 designers try to do their best to impress their visitors and in many cases they definitely succeed in doing so. As a second (out of five) part of our 50 Beautiful CSS-Based Web-Designs in 2006 collection we'd like to present some stunning, but rather unknown dark designs, which you really should have seen if your aim is to...

Read more