Top 10 CSS Navigation Menus

by on 26th March 2008 with 19 Comments

Creating navigation with CSS is one of the most crucial elements of website design. Get the navigation right, and people will feel welcomed and at home. Get it wrong, and it can spell trouble for your website. This is a great collection of 10 CSS navigation examples and tutorials to get you in the creative mood.

1. CSS Fancy Menu

CSS Fancy Menu

This article gos through the creation of a custom navigation bar with some cute Javascript effects that will certainly impress your friends. Thanks to the great Mootools library, this beauty is contained in 1.5kb. Not only that, but it’s also cross browser (tested on Internet Explorer 6/7, Firefox and Safari) and accessible!

2. cssMenus


This navigation menu works both vertically and horizontally, being fully compatible with all browsers.

3. Advanced CSS Menu

Advanced CSS Menu

This tutorial I will show you how to slice up the menu design (step by step) and put them together with CSS. Most of you probably know how to code a horizontal or vertical CSS list menu. Now let’s take it to the next level – code an advanced (un-typical) list menu utilizing the CSS position property.

4. Taming CSS Lists

Taming CSS Lists

In this article, I’ll demonstrate how to use CSS to bring unwieldy lists under control. It’s time for you to tell lists how to behave, instead of letting them run wild on your web page. Specific attention is paid to using a list as a vertical CSS menu.

5. Mini Tabs

CSS Tabs

I came up with these little “mini tabs” for navigation while working on a few projects. They’ll probably appear in the real world eventually. They are generated with pure CSS of course, and require no images.

6. Inverted Sliding Doors Tabs

Inverted Sliding Doors Tabs

This is an explanation of how I adapted Doug Bowman’s Sliding Doors technique to work with inverted tabs for a recent redesign of

7. A collection of free CSS menus

8. A simple gradient CSS menu

9. A walk-through of different CSS navigation techniques

10. Mini sliding navigation

Comments & Discussion


  • Simon

    Great article, point 11) is missing, – Free CSS Menu Builder :)

  • Alessandro

    Great article. View my menu! It’s the point 1!! :)

  • Tauranga web designer

    Excellent Post~

    This is exactly what i was looking for.

    Thanks mate.

  • Sharing Best Practices!

    I love number 3, its kinda unique. Thanks for sharing.

  • Web Design Lincolnshire

    Nice post, thanks for sharing.

  • B12

    Thank you :-)

  • Mike

    Great – especially like number 1.

  • Pingback: 10 CSS Navigation Menus |

  • Evan Skuthorpe

    great compilation of css navs. thanks!

  • TwitterBackgrounds

    Great post! Very useful :) Thanks for sharing.

  • Stuart

    Thanks – very useful… :D

  • imissyoulovers


  • Caputo Designz

    These menus look great. I have created a free 100% pure css dropdown menu. It is fully customizable, including the photoshop file and simple to edit. Check out:

  • Mohit

    Great artice. Thanks for it.

  • Elizabeth

    Found that has an interesting set of menus for creating web sites on the site.

  • Elizabeth

    Found that has an interesting set of menus for creating web sites on the site.

    Mistyped the URL earlier…

  • Pingback: 20120409の技術リンクメモ | WEB PANDA開発日誌()

  • fysisoft

    wonderful collection. I really love it

  • raman

    Nice collection, than for sharing
    I have also designed CSS top ,menu navigation bar, without using query
    Pls find time to add this in your list,
    Here it is


About the Author