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 New York, dedicated to smart front-end techniques and design patterns.

CSS-Based Navigation Menus: Modern Solutions

Advertisement

[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 Tables7 and CSS-Based Footers8 (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 Section9.

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.org10 Link
Navigation Menus - Change.org11
N.Design Studio | Design & Blog12 Link
Navigation Menus - N.Design Studio | Design & Blog13
Good Creative – Web and Graphic Design Link

Navigation Menus - Good Creative - Web and Graphic Design

MacRabbit – Welcome14 Link
Navigation Menus - MacRabbit - Welcome15
Joyent: Introducing Joyent16 Link
Navigation Menus - Joyent: Introducing Joyent17
CSS Vault » The Web’s CSS Site18 Link
Navigation Menus - CSS Vault » The Web's CSS Site19
notiam.com20 Link
Navigation Menus - notiam.com21
Jamie Huskisson: Full time UK PHP freelance developer22 Link
Navigation Menus - Jamie Huskisson: Full time UK PHP freelance developer23
Web design, development and consultancy from Ottawa, Canada – Snook.ca24 Link
Navigation Menus - Web design, development and consultancy from Ottawa, Canada - Snook.ca25
BREAKER DESIGN Link
Navigation Menus - BREAKER DESIGN
Jen Gordon Link
Navigation Menus - Jen Gordon
Tulumarka26 Link
Navigation Menus - Tulumarka27
Ars Technica28 Link
Navigation Menus - Ars Technica29
CSS Beauty | CSS Design, News, Jobs, Community, Web Standards30 Link
Navigation Menus - CSS Beauty | CSS Design, News, Jobs, Community, Web Standards31
Digg / Technology Link
Navigation Menus - Digg / Technology
Triple Crown Customer Service32 Link
Navigation Menus - Triple Crown Customer Service33
microformats34 Link
Navigation Menus - microformats35
Badboy.ro36 Link
Navigation Menus - Badboy.ro37
GetMenus.ca Link
Navigation Menus - GetMenus.ca
Wedding Extravaganza 2007 – A Perfect Marriage38 Link
Navigation Menus - Wedding Extravaganza 2007 - A Perfect Marriage39
Job Pile – Aggregating the Best Job Boards on the Web – Artypapers40 Link
Navigation Menus - Job Pile - Aggregating the Best Job Boards on the Web - Artypapers41
Norman Morrow & Co – Estate Agents In Crumlin, Northern Ireland42 Link
Navigation Menus - Norman Morrow & Co - Estate Agents In Crumlin, Northern Ireland43
Listal – List the stuff you love! Movies, TV, music, games and books44 Link
Navigation Menus - Listal - List the stuff you love! Movies, TV, music, games and books45
folietto46 Link
Navigation Menus - folietto47
Tony Yoo – Online Showcase (version2) Link
Navigation Menus - Tony Yoo - Online Showcase (version2)
Digital Web Magazine Link
Navigation Menus - Digital Web Magazine
Denbighshire Supporting Business48 Link
Navigation Menus - Denbighshire Supporting Business | Denbighshire, Supporting, Business49
Pulmad, peod, lillesalong… – Annilill Peoteenindus50 Link
Navigation Menus - Pulmad, peod, lillesalong... - Annilill Peoteenindus51
ExpressionEngine – Publish Your Universe!52 Link
Navigation Menus - ExpressionEngine - Publish Your Universe!53
coda.coza54 Link
Navigation Menus - coda.coza55
purevolume™ | We’re Listening To You56 Link
Navigation Menus - purevolume™ | We're Listening To You57
EGOLOUNGE *Büro für digitales Design58 Link
Navigation Menus - EGOLOUNGE *Büro für digitales Design59
Merix – Internet Technologies60 Link
Navigation Menus - Merix - Internet Technologies61
Bartelme Design | Showroom Link
Navigation Menus - Bartelme Design | Showroom
Luis Alarcón, Blog62 Link
Navigation Menus - Luis Alarcón, Blog63
CSS3 . info – Everything you need to know about CSS364 Link
Navigation Menus - CSS3 . info - Everything you need to know about CSS365
nclud™ a creative web design agency66 Link
Navigation Menus - nclud™ a creative web design agency67
Convan Design – Howdy68 Link
Navigation Menus - Convan Design - Howdy69
ExpressionEngine – Publish Your Universe!70 Link
Navigation Menus - ExpressionEngine - Publish Your Universe!71
Silverpoint: Web Solutions for Schools72 Link
Navigation Menus - Silverpoint: Web Solutions for Schools73
Jambor-ee – Celebrating ExpressionEngine Link
Navigation Menus - Jambor-ee - Celebrating ExpressionEngine
far from fearless74 Link
Navigation Menus - far from fearless75
Scribd – Home76 Link
Navigation Menus - Scribd - Home77
Erika Greco – Blog Link
Navigation Menus - Erika Greco - Blog
Navigation Menus - Photoshop Tutorials and Articles - Tutorial Blog78
Welcome to Buzz — Buzz Recruitment79 Link
Navigation Menus - Welcome to Buzz — Buzz Recruitment80
Michal Zapoměl – český vlasový design | czech hair design81 Link
Navigation Menus - Michal Zapoměl - český vlasový design | czech hair design - Úvodní stránka82
Onlinecenter Upload83 Link
Navigation Menus - Onlinecenter Upload84
M122Arts Mixed Media and Technology // oo*o Link

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

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

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

Advertisement
  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
  21. 24

    @ Jen Simmons: That’s just mystery-meat navigation. Doesn’t score too well in terms of accessibility.

    0
  22. 25

    you can get all of these sites css files..
    But you manually you have to clear your temp directory, then go to that page and then refresh the temp directory the css will be there..with the whole page layout..:0 have fun.. and we didnt tell ya how to do this,,lol

    0
  23. 26

    I dunno whats with all the unappreciative haters. I personally love going through your lists, I get massive amounts of design ideas and see new techniques and styles. I don’t really give a **** if its badly coded. Theres still alot to gain, and the list would have taken a fair amount of effort to compile. So what if they are making money from all the traffic, good on them.

    Anyways keep up the good work and don’t let the haters get you down.

    0
  24. 27

    The tabs are an obvious trend but I also noticed a bunch of carrots/pointers/wedges. I’ll have to keep an eye open and see if this is a general web trend.

    0
  25. 28

    criticalerror

    March 15, 2007 7:24 am

    great work…!!!

    0
  26. 29

    YOU SURE ARE A SMART GUY bogy!!!

    There. That was the subtext of your post and you got what you wanted. Happy?

    Now spare us the superior attitude and disdain. It’s tiresome.

    0
  27. 30

    Jamie Huskisson

    March 15, 2007 8:06 am

    Thanks for the feature guys. I only launched the new layout with that menu last night around 11pm.. so to find out by 4-5pm that it had been posted up here was amusing :)

    0
  28. 31

    I took a look at the first few, saw that they were either image-based and thus completely unscalable or had text in them that refused to scale with the browser text height. Meh. Any fool can create a pretty-looking menu if you’re fixing your size. Show me pretty menus that scale up and down gracefully and then I’m impressed.

    0
  29. 32

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

    0
  30. 33

    Paul Stamatiou

    March 15, 2007 2:52 pm

    Now, which of these menu styles can be done using no images at all. I try to keep loading time on my site top-notch and can’t justify extra images for anything.

    0
  31. 34

    There have been quite a few css navigation menu round-ups lately but you’ve again managed to list some of the best. Thanks!

    0
  32. 35

    Found this list a bit uninspiring, just a whole lot variations on tabs.

    Some of theme even have problems like a flicker between the normal and :hover state or worse javascript for a rollover that could easily be done with css.

    0
  33. 36

    “PSS”? I think you mean PPS.

    0
  34. 37

    why is this on digg.com? this sucks. where is the code?

    who gives a crap about a bunch of screens and links to sites?

    0
  35. 38

    check out these menus too: http://www.13styles.com

    0
  36. 39

    Another tabbed one I stumbed across: http://www.brusheezy.com

    0
  37. 40

    这些都是导航之精品!

    1
  38. 41

    not to be rude, but it should be PPS instead of PSS. PS stands for postscript so you want to say post-postscript, not postscript-script.

    Excellent set of examples. I think I’ll be adding this site to my regular routine

    0
  39. 42

    imaginepaolo

    March 16, 2007 8:20 pm

    […] smashingmagazine best user friendly navigation and solutions […]

    0
  40. 43

    “Silverpoint: Web Solutions for Schools” could be called a solution if the goal is to confuse the user equally as much as look pretty. It’s almost like a drug. I’ll coin the term “crackNav”.

    0

↑ Back to top