30 Exceptional CSS Navigation Techniques

We’ve seen innovative ways in which designers and developers have used CSS to innovate upon its shortcomings. Here, you’ll find some of the best ways to use CSS for your website navigation. You’ll find a variety of techniques that truly showcase the capabilities of CSS.

In this article, you will find a collection of excellent navigation techniques that use the CSS to provide users with an impressive interface.

1. The Menu menu

The Menu menu

This another great CSS menu Stu Nicholls that’s unique – hovering over a menu item reveals a submenu. If you want get started with this menu just simple view the source code. Demo in page.

2. Pure CSS hover menu

Pure CSS hover menuView Demo

In this CSS technique, you’ll learn to create a vertically-oriented CSS hover menu that reveals a submenu when a menu item is hovered on.


3. Matte CSS Menu

Matte CSSView Demo

Matte is a simple CSS menu with rounded corners using two small images only from 13styles. It is maintained by David Appleyard who has lots of simple and advanced CSS-based menus.

4. CSS Blur Menu

CSS Blur MenuView Demo

This CSS technique shows you a method from creating a menu that blurs sibling menu items when you hover over an item.

5. CSS Navigation with Glowing Icons

CSS Navigation with Glowing IconsView Demo

This beautiful CSS menu technique can be created by following along this extensive step-by-step tutorial.

6. CSS Sliding Door using only 1 image

CSS Sliding Door using only 1 imageView Demo

This slick CSS menu is based on the Sliding Doors technique but only uses one image.

7. Navigation Matrix Reloaded

Navigation Matrix ReloadedView Demo

This stylish navigation menu technique uses a CSS sprite.

8. CSS Horizontal Menu

CSS Horizontal MenuView Demo

Update: this no longer exists. Ian Main provides a great set of free CSS menus that are stylish and easy to use.

9. Woody CSS Menu

Woody CSS Menu.

Woody is a pre-made CSS menu that’s ready to use and has been tested in IE6, IE 7, Firefox, Opera, Safari, Chrome. Demo in the page.

10. Advanced CSS Menu

Advanced CSS Menu

Advanced CSS Menu was created by Nick La and uses an advanced (extraordinary) list menu utilizing the CSS position property. Demo in the page.

11. Simple Yellow Tabbed

Simple Yellow Tabbed

This menu is from CSS Menu Generator which has more free high quality menus. Demo in the page.

12. Vimeo-Like Top Navigation

Vimeo-Like Top NavigationView Demo

This CSS-based navigation menu is based on the Vimeo primary menu.

13. Apple Like Colorful CSS Menu

Apple Like Colorful CSS Menu

Learn a technique for mimicking Apple’s image rollover CSS menu by following along this menu tutorial. Demo in page.

14. CSS Hoverbox

CSS Hoverbox

Inspired by the Hoverbox Image Gallery technique developed by Nathan Smith, CSS Hoverbox leans on the background-position CSS property to superimpose rollover images on top of neighboring menu items. Demo in page.

15. Big CSS Box

Big CSS Box

This is an experimental CSS menu that allows you to create a scaling menu that adjusts depending on the browser’s width. Demo in page.

16. Simple CSS-based drop-down menu

Simple CSS-based drop-down menuView Demo

This is a very basic CSS-based drop-down menu that’s excellent for trying to grok the technique involved in creating drop-down menu that doesn’t require client-side scripting.

17. Two Level Horizontal Navigation in CSS

Two Level Horizontal Navigation in CSSView Demo

Veerle Pieters provides a CSS menu and tutorial created using text-indent CSS property.

18. Uberlink CSS List Menus

Uberlink CSS List MenusView Demo

This CSS navigation bar looks and behaves like an image-swapping menu.

19. CSS-Only Accordion Effect

CSS-Only Accordion EffectView Demo

In this technique, you’ll witness a method for creating a CSS-based accordion menu.

20. Tabbed Navigation Using CSS

Tabbed Navigation Using CSS

Here is another excellent method for creating a module tab interface based purely on CSS. Use the tabs in the page to learn about the instructions on how to implement this technique.

21. CSS Mini Tabs (the UN-tab, tab)

CSS Mini Tabs (the UN-tab, tab)View Demo

This CSS menu on the popular web design agency SimpleBits shows a way for creating mini tabs. View the source code on the demo page to learn how it works (the code is inline and formatted well for readability for your convenience).

22. Drop-Down Menus, Horizontal Style

Drop-Down Menus, Horizontal StyleView Demo

This A List Apart CSS menu technique is for a fly-out submenu that appears on the right of the top-level menu, leveraging the position: absolute CSS property to move the submenu to the appropriate level.

23. List Into a Navigation Bar

List Into a Navigation BarView Demo

Roger Johansson of 456 Berea Street shows us the basic principles of turning an unordered list into a navigation bar – it’s a great starting point for beginners to learn about building a semantic HTML structure and then styling it with CSS.

24. CSS Tabs with Submenus

CSS Tabs with Submenus

This CSS menu technique will allow you to create CSS tabs that have submenus for a two-level hierarchy. Demo in page.

25. CSS Block Navigation Menu

CSS Block Navigation Menu

This CSS menu technique allows you to create a navigation menu that has item with descriptions. Demo in page.

26. XHTML & CSS Sprite Navigation

XHTML & CSS Sprite NavigationView Demo

This stylish CSS sprite menu technique has three states: idle, hover, and clicked.

27. XHTML CSS Tabbed Menu

XHTML CSS Tabbed MenuView Demo

Learn how to create module tabs without the use of client-side scripting.

28. Cool, Simple, Horizontal CSS Menu

XHTML & CSS Sprite NavigationView Demo

Learn to create a straightforward technique for creating a CSS based menu.

29. CSS Menu with Descriptions

CSS Menu with DescriptionsView Demo

This technique showcases a method for creating a menu that expands when hovered upon.

30. CSS Hover Button

CSS Hover ButtonView Demo

Create CSS button-style navigation menu by checking out this excellent tutorial.

Related content

About the Author

Kawsar Ali is a web designer, graphic designer, and wannabe photographer based in NY, U.S. He’s also the founder of Desizntech,a site to find tips about web design, Mac, PC and more. If you’d like to connect with him, you can follow him on Twitter or at his Personal Website.

This was published on Apr 16, 2009


aravind Apr 16 2009

Great list!
Thanks for featuring my css menu tutorial.. :)

mbreti3gut Apr 16 2009

good job

anonymous Apr 16 2009

ack – link to The menu menu is 404.

Jacob Wyke Apr 16 2009

Yeah awesome list of resources Kawsar! Perfect to send people learning CSS to – showing them just what CSS can do.

Martin Grandrath Apr 16 2009

Really great list. Thanks!

Liam McCabe Apr 16 2009

Some good stuff :)

Patternhead Apr 16 2009

Great list, thanks.

Sebastiano Apr 16 2009

Excellent list

smashill Apr 16 2009

Exactly what I was looking for as I am just redesigning a page and look for a good, non java script navigation.

Michael Arnaldo Apr 16 2009

Great stuff, I’ve always been amazed with Nick La’s technique .

I don’t know that I’d include the CSS Blur Menu in here as exceptional. Essentially, you’re letting the coolness factor trump usability. You could just as easily use icons with no labels to match the blur experience.

I know, I know… you can still read most of the labels but, my point is, you should be able to read all the labels all the time.

jyoseph Apr 16 2009

Yeah dude, nice to see some css menus. We all love jquery (a lot!) but sometimes it’s nice to get back to our roots with some pure css lovins.

Ryan Merket Apr 16 2009

Wow. Love this list. Great job!

Good list.

Jacob Gube Apr 16 2009

@anonymous: It seems to work now give it another shot.

@jyoseph: I agree, but also want to mentions that a strong design would use progressive enhancement in that you can style your menus so that they degrade nicely if JS is turned off.

Vordreller Apr 16 2009

Nice list, though I personnaly find the pure CSS hover menu a horrible idea.

anandarudra Apr 16 2009

Really helpfull listing for quick reference.

Allie Apr 16 2009

Great list! I love the blurring technique.

crvenk Apr 17 2009

Good job! Meticulously done. Thanks.

Ganesh Apr 17 2009

Nice tips !! Hope these menu contain tutorials !!!

Alex Mitchell Apr 17 2009

Jacob, fantastic list and nice to see one of our own made the cut too; thank you for that. Some of these are new to me and some I’ve seen before, the CSS Blur Menu (#4) I’ve always liked anyway.

Thanks for sharing and keep up the great work!

Alex | @ZenElements

MarcoBarbosa Apr 17 2009


Claire Web Apr 17 2009

Thank you for sharing these designs. I know sometimes it can take a whilt to create a navigation in CSS that looks good, and this has sparked off some ideas for me, as well as having all the css resource i need for Web Design.

web Design Apr 17 2009

Navigation simplified and made attractive.Wow CSS! and thanks Kawsar for this piece . It has enhanced my knowledge. Surely gonna use them in my design.

Swapan Kumar Apr 17 2009

Good stuff…Keep it up

Jacob Gube Apr 17 2009

@Alex Mitchell: Thanks for stopping by and well done on the CSS tutorial.

@Claire Web: Glad Kawsar’s post sparked some ideas for you!

Great selection. First one is my favorite!!

Janko Apr 17 2009

Very nice list, some of them I haven’t seen before. I am glad that you included my tutorial in the list!


Mepho Apr 17 2009

Great list I love the vimeo like navigation menu system, probably one of the more tricky ones when transparency is involved.

1. The Menu menu
The image link goes to a 404 error page fyi~

Thanks for sharing!

MorayWeb Apr 19 2009

Great list thanks!

Pranav Prakash Apr 19 2009

This collection is really nice. I will be using a couple of them in my upcoming project. Thanks :-)

I always get confused as to why some of these are on lists like these. What is “exceptional” about #1? It’s an exceptional pain in the ass to use, but that’s it. Why have flyouts pop over other navigational elements?

justina Apr 20 2009

thanks you for sharing! I am new in CSS and this will help me a lot

Marco Apr 20 2009

Very good review and very helpful.

I want to report another type of horizontal menu based on Roger
Johansson menu.

How to:

Jacob Gube Apr 20 2009

@Marco: Pretty great, thanks for taking the time to share that with all of us!

Joshua Parker Apr 20 2009

The CSS Blur Menu is definitely my favorite.

CSS Blur menu makes me dizzy.Is it only me?

Frank J Apr 22 2009

Awesome inventory of fantastic CSS style navigation menus!

PelFusion Apr 23 2009

nice techniques
i liked Pure CSS hover menu (no.2)

Pranay Apr 23 2009

Good stuff.. I like it

Stephen Clark Apr 26 2009

Here is a mash up I created a few years ago that builds on Simplebits/Dan Cederholm’s Mini Tabs navigation. Its CSS driven but the tab slides between the navigation selectors via a small javascript.

– Stephen

Kevin Apr 27 2009

Great resource. Thanks for saving us all a lot of time!

ravindra Apr 28 2009

great list but you miss the site css menus they have 1000 of unique css menus

redips Apr 28 2009

Nice collection. This will certainly save my time.
Thank you!

Andreas Blixt May 06 2009

Hey! I noticed a small burst to the traffic on my old article (#20, Tabbed Navigation Using CSS) from this page. Thanks for the mention! =)

I’d just like to say that the article has been updated and that the new version is available here:

isaac May 12 2009

Nice one.
The use of empty tags on #6 is not so elegant…

francis May 25 2009


Fred Campbell May 26 2009

Great list! Some I knew, quite a few I didn’t, but will be giving them a try over the coming months. Page bookmarked and Tweeted! Thanks.

paolo Jun 11 2009

I need to learn all of this! Thanks! Jun 22 2009

Good stuffs! Thanks for sharing.

Thanks a lot, some of these techniques will be very handy when I redesign my site!

temizlik Jun 27 2009

Good stuffs! Thanks for sharing

Matty Aug 19 2009

Really like the CSS Blur Menu this would really help to communicate designer to my sites visitors. Will have to look more into this one. Thank you for sharing the excellent post.

Cara Dixon Oct 14 2009

This is a great list – thanks for sharing! I’m sure the resources featured will prove useful for web designing in the future.

I love the blur effect. But overall, great post.

hi, i have a css navigation bar with tooltip and maybe you are interested in it. its difference from others is no requirement of javascript, jquery or any image. you can check it on my blog:

thank you…

Lyons Dec 19 2009

I wonder where those skeptics of CSS are now a days. Remember those comments people used to make about CSS?

Great resource – thanks so much!

Deepu Balan Jan 03 2010

Really Useful list… Luv the 4th one, css blur menu is really amazing. Thanks for sharing…


Patrick Jan 03 2010

I’m sorry, but most of these simply don’t justify the word ‘exceptional’. Most are very ordinary. Why does every list-style post have to have a word like exceptional in it?

WebCatch Feb 10 2010

Many thanks for the great article! Some great tips. Well worth a bookmark.

As a web designer, I am always looking for examples and inspiration for new types of menus on my projects. This is by far one of the best collections I have come across. I have bookmarked this list and use it from time to time.

masterGOmaster Mar 03 2010

This is a very complete collection and I will choose one. thank you

Paarth Apr 03 2010

Good list but not all are so good, i liked some of them.

David Etherington Apr 06 2010

Love the glowing buttons got me thinking time for a website makeove :)

Bit Doze May 01 2010

Excelent list

Jose German Martinez May 10 2010

thanks for this excellent information

Subhash Khatri May 18 2010

Really great list. Thanks!

great menus.Thx for all

Animas Jun 08 2010

You say, about CSSEdit: “It’s best suited for first time and casual CSS coders.”

Come on. By far the best editor. I use it on very large complex sites.
By your comment i can tell that you have never used it! CCSEit is the best ccs-edtor ever!

Kekko Jun 08 2010

After reviewing my stats for both my blog and my website I have come to the conclusion that about 97% of my readers use css3 friendly browsers with a majority on firefox… So I have decided to sit down and start learning css3 and really giving it a go….

Aphrodite Jul 10 2010

Good to see a post about this for a change, fuctionality and navigation should be every websites priority, aesthetics can only get you so far.

Craig Sep 03 2010

Damn, this has made me feel like I have been really lazy in this area :-( so Thanks for giving me some inspiration!

ilham ali Oct 02 2010

Css looks simple when you see what others done, but when you try to do something from scratch it always take time.

Thanks very much for this useful information.

etoileweb Nov 09 2010

Does anyone have an idea about how to reproduice the one here : ?

Nice Article.. thanks for this useful information.

Randal Reinmiller Jan 04 2011

Excellent info. I’m new to this sort of thing and very much appreciate this type of info on the subject. Thanks alot!

Good selection. Navigation can always innovate.

Linda Jan 24 2011

Thanks a lot! I was looking for this info and finally i got it here…

HomeList Feb 02 2011

Thank you so much for this! I finally have a decent navbar in my website now

Stefan Feb 11 2011

A very nice list.

Andrew Feb 19 2011

I remember that I took different menus from
but this collection is great too ;-)

aryan Mar 11 2011

Good list Pappu

Paarth Mar 26 2011

great list, good inspiration

Jimmy Nguyen Mar 30 2011

Another helpful post. I’m standing between full of Menu styles to decide the best choice. I will try on several of 30 techniques above. Thank alot.


noexyoga Apr 10 2011

Dear Ali ,

did u have example navigation like tool tip ( rounded navigation with arrow at the botom navigation?

Thank yu

Thanks for collection. Nice work. Appreciate your effort =)

Jyoti May 04 2011

Realy its so nice…:-)

escapade May 04 2011

Great! God job everything i want is there. I choose Woody menu.
Appreciate your time to give a very good info. From Quebec Canada.

THANK You So much….



dumber May 31 2011

8. CSS Menu horizontal
link is dead

Jacob Gube May 31 2011

@dumber: Thanks for the report. The website it links to no longer exists, so I’ve updated the post to indicate that.

Caputo Designz Jun 10 2011

These menus are great! If anyone needs a pure css menu with rounded dropdowns that is really simple to edit check out:

Reality Dodge Jun 10 2011

+1 for my design bookmark folder. Thanks

Robin Hood Jun 22 2011

These have given me some great inspiration. I always like to avoid using javascript where I can and often the CSS hover types which use a back ground image han be slow and have a slight lag. The ones I like here don’t do that, they all have nice clean code, so that you for choosing such high quality examples. There are so many ‘top 10’ pages on the net, that it’s nice to have found one made by someone who understands the code used to power the navbar/whatever.

Joan Cole Jul 22 2011

CSS is something I really want to be good at, but I took a lot of time to learn it. What you have provided us here is an amazing techniques that I want to learn with.

thank u for ur great list of demo

great site, have learnt tons, but i’m stumped. Can i ask a question? On many sites when i ctrl+ to expand the navbar stays on one line and expands off the side of the window. But when i do it the examples don’t do this but continue on the next line. Can you tell me what i am doing wrong?

Love the site, will keep on coming. Thanks

Wow!!! Excellent list of menu!

Bloggerblur Oct 07 2011

List number 17 look very nice.

anikdey Nov 24 2011

nice……liked it.

raman Oct 09 2012

No. 16 and 12 looks really neat and wlwgant

This comment section is closed. Please contact us if you have important new information about this post.