Menu Search
Jump to the content X X
Smashing Conf New York

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

CSS-Based Navigation Menus: Modern Solutions

[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 Navigation1, David Bushell’s Responsive Off-Canvas Navigation2, Viljami Salminen’s Responsive Nav3 Plugin, or check out or our latest articles4 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 Techniques5, CSS-Based Forms6 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.org7 Link
Navigation Menus - Change.org8
N.Design Studio | Design & Blog9 Link
Navigation Menus - N.Design Studio | Design & Blog10
Good Creative – Web and Graphic Design Link

Navigation Menus - Good Creative - Web and Graphic Design

MacRabbit – Welcome11 Link
Navigation Menus - MacRabbit - Welcome12
Joyent: Introducing Joyent13 Link
Navigation Menus - Joyent: Introducing Joyent14
CSS Vault » The Web’s CSS Site15 Link
Navigation Menus - CSS Vault » The Web's CSS Site16
notiam.com17 Link
Navigation Menus - notiam.com18
Jamie Huskisson: Full time UK PHP freelance developer19 Link
Navigation Menus - Jamie Huskisson: Full time UK PHP freelance developer20
Web design, development and consultancy from Ottawa, Canada – Snook.ca21 Link
Navigation Menus - Web design, development and consultancy from Ottawa, Canada - Snook.ca22
BREAKER DESIGN Link
Navigation Menus - BREAKER DESIGN
Jen Gordon Link
Navigation Menus - Jen Gordon
Tulumarka23 Link
Navigation Menus - Tulumarka24
Ars Technica25 Link
Navigation Menus - Ars Technica26
CSS Beauty | CSS Design, News, Jobs, Community, Web Standards27 Link
Navigation Menus - CSS Beauty | CSS Design, News, Jobs, Community, Web Standards28
Digg / Technology Link
Navigation Menus - Digg / Technology
Triple Crown Customer Service29 Link
Navigation Menus - Triple Crown Customer Service30
microformats31 Link
Navigation Menus - microformats32
Badboy.ro33 Link
Navigation Menus - Badboy.ro34
GetMenus.ca Link
Navigation Menus - GetMenus.ca
Wedding Extravaganza 2007 – A Perfect Marriage35 Link
Navigation Menus - Wedding Extravaganza 2007 - A Perfect Marriage36
Job Pile – Aggregating the Best Job Boards on the Web – Artypapers37 Link
Navigation Menus - Job Pile - Aggregating the Best Job Boards on the Web - Artypapers38
Norman Morrow & Co – Estate Agents In Crumlin, Northern Ireland39 Link
Navigation Menus - Norman Morrow & Co - Estate Agents In Crumlin, Northern Ireland40
Listal – List the stuff you love! Movies, TV, music, games and books41 Link
Navigation Menus - Listal - List the stuff you love! Movies, TV, music, games and books42
folietto43 Link
Navigation Menus - folietto44
Tony Yoo – Online Showcase (version2) Link
Navigation Menus - Tony Yoo - Online Showcase (version2)
Digital Web Magazine Link
Navigation Menus - Digital Web Magazine
Denbighshire Supporting Business45 Link
Navigation Menus - Denbighshire Supporting Business | Denbighshire, Supporting, Business46
Pulmad, peod, lillesalong… – Annilill Peoteenindus47 Link
Navigation Menus - Pulmad, peod, lillesalong... - Annilill Peoteenindus48
ExpressionEngine – Publish Your Universe!49 Link
Navigation Menus - ExpressionEngine - Publish Your Universe!50
coda.coza51 Link
Navigation Menus - coda.coza52
purevolume™ | We’re Listening To You53 Link
Navigation Menus - purevolume™ | We're Listening To You54
EGOLOUNGE *Büro für digitales Design55 Link
Navigation Menus - EGOLOUNGE *Büro für digitales Design56
Merix – Internet Technologies57 Link
Navigation Menus - Merix - Internet Technologies58
Bartelme Design | Showroom Link
Navigation Menus - Bartelme Design | Showroom
Luis Alarcón, Blog59 Link
Navigation Menus - Luis Alarcón, Blog60
CSS3 . info – Everything you need to know about CSS361 Link
Navigation Menus - CSS3 . info - Everything you need to know about CSS362
nclud™ a creative web design agency63 Link
Navigation Menus - nclud™ a creative web design agency64
Convan Design – Howdy65 Link
Navigation Menus - Convan Design - Howdy66
ExpressionEngine – Publish Your Universe!67 Link
Navigation Menus - ExpressionEngine - Publish Your Universe!68
Silverpoint: Web Solutions for Schools69 Link
Navigation Menus - Silverpoint: Web Solutions for Schools70
Jambor-ee – Celebrating ExpressionEngine Link
Navigation Menus - Jambor-ee - Celebrating ExpressionEngine
far from fearless71 Link
Navigation Menus - far from fearless72
Scribd – Home73 Link
Navigation Menus - Scribd - Home74
Erika Greco – Blog Link
Navigation Menus - Erika Greco - Blog
Navigation Menus - Photoshop Tutorials and Articles - Tutorial Blog75
Welcome to Buzz — Buzz Recruitment76 Link
Navigation Menus - Welcome to Buzz — Buzz Recruitment77
Michal Zapoměl – český vlasový design | czech hair design78 Link
Navigation Menus - Michal Zapoměl - český vlasový design | czech hair design - Úvodní stránka79
Onlinecenter Upload80 Link
Navigation Menus - Onlinecenter Upload81
M122Arts Mixed Media and Technology // oo*o Link

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

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

Footnotes Link

  1. 1 /2015/09/mobile-navigation-for-smashing-magazine/
  2. 2 /2013/01/off-canvas-navigation-for-responsive-website/
  3. 3 /2013/04/javascript-plugin-for-responsive-navigation/
  4. 4 /tag/navigation/
  5. 5 /2007/01/19/53-css-techniques-you-couldnt-live-without/
  6. 6 /2006/11/11/css-based-forms-modern-solutions/
  7. 7 http://change.org/
  8. 8 http://change.org/
  9. 9 http://www.ndesign-studio.com/
  10. 10 http://www.ndesign-studio.com/
  11. 11 http://macrabbit.com/
  12. 12 http://macrabbit.com/
  13. 13 http://www.joyent.com/
  14. 14 http://www.joyent.com/
  15. 15 http://cssvault.com/
  16. 16 http://cssvault.com/
  17. 17 http://notiam.com/
  18. 18 http://notiam.com/
  19. 19 http://www.jhuskisson.com/
  20. 20 http://www.jhuskisson.com/
  21. 21 http://www.snook.ca/
  22. 22 http://www.snook.ca/
  23. 23 http://www.tulumarka.com/
  24. 24 http://www.tulumarka.com/
  25. 25 http://arstechnica.com/index.ars
  26. 26 http://arstechnica.com/index.ars
  27. 27 http://www.cssbeauty.com/
  28. 28 http://www.cssbeauty.com/
  29. 29 http://triplecrowncs.com/
  30. 30 http://triplecrowncs.com/
  31. 31 http://microformats.org/
  32. 32 http://microformats.org/
  33. 33 http://www.badboy.ro
  34. 34 http://www.badboy.ro
  35. 35 http://www.weddingextravaganza.co.uk/
  36. 36 http://www.weddingextravaganza.co.uk/
  37. 37 http://artypapers.com/jobpile/
  38. 38 http://artypapers.com/jobpile/
  39. 39 http://www.normanmorrow.co.uk/
  40. 40 http://www.normanmorrow.co.uk/
  41. 41 http://www.listal.com/
  42. 42 http://www.listal.com/
  43. 43 http://www.folietto.at/
  44. 44 http://www.folietto.at/
  45. 45 http://www.denbighshiresupportingbusiness.co.uk/General/xhtml/default.asp?lang=eng&pn=Home%20Page
  46. 46 http://www.denbighshiresupportingbusiness.co.uk/General/xhtml/default.asp?lang=eng&pn=Home%20Page
  47. 47 http://www.annilill.ee/
  48. 48 http://www.annilill.ee/
  49. 49 http://www.expressionengine.com/
  50. 50 http://www.expressionengine.com/
  51. 51 http://coda.co.za/
  52. 52 http://coda.co.za/
  53. 53 http://www.purevolume.com/sleeveless
  54. 54 http://www.purevolume.com/sleeveless
  55. 55 http://www.egolounge.de/
  56. 56 http://www.egolounge.de/
  57. 57 http://www.merix.com.pl/
  58. 58 http://www.merix.com.pl/
  59. 59 http://www.luisalarcon.com/blog/
  60. 60 http://www.luisalarcon.com/blog/
  61. 61 http://www.css3.info/
  62. 62 http://www.css3.info/
  63. 63 http://nclud.com/
  64. 64 http://nclud.com/
  65. 65 http://convandesign.com/
  66. 66 http://convandesign.com/
  67. 67 http://expressionengine.com/
  68. 68 http://expressionengine.com/
  69. 69 http://www.silverpoint.net/
  70. 70 http://www.silverpoint.net/
  71. 71 http://www.farfromfearless.com/
  72. 72 http://www.farfromfearless.com/
  73. 73 http://www.scribd.com/
  74. 74 http://www.scribd.com/
  75. 75 http://tutorialblog.org/
  76. 76 http://www.buzzrecruitment.co.nz/
  77. 77 http://www.buzzrecruitment.co.nz/
  78. 78 http://www.cvdmz.cz/
  79. 79 http://www.cvdmz.cz/
  80. 80 http://www.onlinecenter.nu/
  81. 81 http://www.onlinecenter.nu/
  82. 82 http://www.kazanshops.ru/
  83. 83 http://www.kazanshops.ru/
  84. 84 http://www.stoneinc.ca/
  85. 85 http://www.stoneinc.ca/
  86. 86 http://www.pixellogo.com/
  87. 87 http://www.pixellogo.com/
  88. 88 http://www.ausmag.de/
  89. 89 http://www.ausmag.de/
SmashingConf New York

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

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.

  1. 1

    Chaaban, they got banned from Digg. Read their “8 Things You Should Know About Smashing Magazine” post.

    0
  2. 2

    is it my browser/computer or is the N.Design nav bar very laggy?

    0
  3. 3

    Very nice to see these great solutions.. but was there are reason for not putting in any vertikal CSS menu’s?

    0
  4. 4

    Скакунов Александр

    March 15, 2007 1:22 am

    I don’t see anything attractive, but thanks for the set.

    0
  5. 5

    I’m in no way bashing these examples or any of the other fine fine sets assembled here, but does anyone else find it odd that the majority of all these examples are design shops or personal portfolios?

    Can we not sell these ideas to our clients?

    Great work though!

    Cheers,Tim

    0
  6. 6

    To get the .css code…

    1) View source code of the page
    2) Grab the path to the .css inside the HEAD tags at the top of the page.
    3) Place the path of the .css at the end of the URL in the browser
    4) You’ll see the .css file.

    0
  7. 7

    @ Roy

    There is such a thing as a css image rollover, I use one on my as yet unfinished site redesign.

    0
  8. 8

    Check out this site’s all-css nav. It’s different than the two dozen tabbed horizontal bars.

    0
  9. 9

    Vitaly Friedman & Sven Lennartz

    March 15, 2007 4:11 am

    Jen Simmons, thanks for the reference. Interesting solution, indeed.

    0
  10. 10

    Joost Money…

    Not everyone who views source code steals it…

    Some of us use it to learn from…

    0
  11. 11

    These are all great samples of well designed navigation. However many of them suffer from the “flicker” effect that is associated with a pure css navigation. Although it is mainly only in IE its still a problem… Anyone know how to solve this?

    0
  12. 12

    Maybe this site gives you some inspiriation too.

    Nice Navigation: http://www.favouritz.com/

    0
  13. 13

    Modern solutions? Excuse me, but some of the above sites use image roll overs. Besides that you need to have javascript enabled to see these, they are plain inaccessible to other user agents than the standard browsers. So much for ‘usability’ and ‘using basic CSS styling’.

    4
    • 14

      Stephen Bates

      January 4, 2010 2:17 pm

      Not to mention that 90% of these are just tabbed horizontal nav menus. Wherein lies the “solution”?

      2
    • 15

      CSS can be used for roll-over effects without JavaScript animations. (e.g. a:hover)

      -1
  14. 16

    You guys never stop amazing me :)

    Smashing is a name that fit you .

    where is the digg button , need to digg this .

    -1
  15. 17

    Great work .

    Keep it up !

    it would be nice if we also had access to the source of those designs .

    0
  16. 18

    Hey. You forgot to mention ‘ExpressionEngine – Publish Your Universe!’

    0
  17. 19

    Designers/Coders should learn not to make their hover the same as their “You are here” style. It’s unusable. When designing a navigation, you should have at least three distinct states: off, hover, active.

    0
  18. 20

    @ Forgiste: using CSS you usually have the roll over on the link (which is the way you should use it). I was referring to the javascript methods.

    0
  19. 21

    Come on, anyone interesting about web developing and design already know these an a whole lot more. What the point of making list of them. “Come on people digg us and click the links so we make some money”, that’s the point, isn’t it?

    0
  20. 22

    It strikes me as mostly design variations on the same theme.

    For true originality you could have restricted this post to just one link :

    http://www.cssplay.co.uk/menus/index.html

    0

↑ Back to top