Good website navigation is vital part of any website. Good navigation is both user-friendly and complements the rest of the site’s design elements. Below are some techniques and tips for creating navigation that does both.
Create dropdown menus with CSS only
A complete tutorial on creating CSS-based dropdown menus that behave like dropdown lists. It’s a short and easy-to-implement method.
Simple scalable CSS based breadcrumbs
Using breadcrumbs on your site can make it easier for your visitors to navigate. And this tutorial shows a method for creating scalable breadcrumbs using CSS.
Horizontal Sub-nav with CSS & jQuery
Here’s a complete tutorial on creating a horizontal navigation submenu using purely CSS (in most cases, anyway). If you want it to work in IE6, you’ll need to implement some jQuery, too.
CSS Step Menu
Creating a stepped menu (also referred to as a “wizard menu”) can be tricky, especially when it has to change the number of steps depending on what it’s being used for. Here’s an example of one with information on how to create your own.
The Tabbed Breadcrumb Navigation
A comprehensive tutorial on creating breadcrumb navigation formatted as tabs.
Apple’s Navigation bar using only CSS
This tutorial shows how to create an Apple-like navigation bar using only CSS and HTML (with no images).
Sitemap Celebration
Here’s a sitemap style that’s cross-browser compatible (even back to IE5 for the Mac) and based on nested lists.
Nice CSS menu with feed reader icons list
Create a menu of feed reader icons using CSS. It could easily be adapted to other types of menus.
Multi-level Menus with jQuery and CSS
Here’s a collection of techniques for creating multi-level menus in pure CSS and CSS/JS. In addition to basic techniques, it also covers more advanced and creative examples.









