How To »

The Template Tag, wp_list_pages(), displays a list of WordPress Pages as links. It is often used to customize the Sidebar or Header. So now the code of the top nav bar will look like this:

You can simply edit the header.php file and exclude any page id you want, you can also include the pages you want.

Creating Two-Tiered Conditional Navigation in WordPress »

A common navigational scheme, parent pages on top and child pages (if they exist) on bottom as seen at the top of this post.

How To »

Darren Hoyt goes through a nice solution to help us: 1) query the page, 2) determine if there are child pages, and 3) properly highlight both the .current_page_parent and .current_page_item links.

And then he show us how to use CSS to make sure the :active and :hover states display correctly whether or not subpages exist — if they do, the primary nav uses current_page_parent, if they don’t, it resorts to simply current_page_item.

Use breadcrumbs

Breadcrumbs are great for so many reasons: usability, SEO, etc. In terms of plugins, there are many options, my favorite is Yoast’s Breadcrumbs, because it’s easy to implement. Another breadcrumbs plugin, gives you a new template tag called breadcrumb_trail() that you can place anywhere in your theme. Once that’s done, it’ll display a hierarchical menu of where the current visitor is on your site. It’s quite useful if you have more than a few pages or posts.

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.