Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Usability

Web Design Reference Guide

Hosted by

Toggle Open Guide Table of ContentsGuide Contents

Close Table of ContentsGuide Contents

Close Table of Contents

Usability Tips You Can Use: Designing Navigation with Lists

Last updated Oct 17, 2003.

By Sarah Horton, author of Access by Design: A Guide to Universal Usability for Web Designers

On the surface, navigation appears to have been overlooked by the originators of the web. There is no NAV tag to mark a navigation block and no LINK tag to identify individual links. But let's take a step back and think more broadly about navigation. What is navigation if not a list of links? And don't we have tags for marking up lists? Of course we do—our friends, UL and LI.

In the past, we avoided these tags because they looked... well... nerdy. Browsers are not kind to lists, rendering them with big ol' bullets and margins deep enough to drown in. With today's support for CSS, we have the tools to make lists look goood. And the advantages of list markup are many. Structural markup is the way to code, and since navigation is a list of links, it makes sense to use list markup over, say, tables or DIVs: tables are the wrong structure and DIVs are structureless—they tell nothing about the content they contain. On the other hand, list markup has loads to say: It tells software that everything enclosed within the UL tag belongs to one navigation system, and that each element enclosed within an LI tag is a separate link. With this information, software can do a better job of reading links as separate items, and we can avoid using meaningless characters, such as vertical bars or angle brackets, to separate links.

If you're new to using lists for navigation and want to give it a try, read on! This article will give you the basics you need to get started using list markup and CSS to design tab, breadcrumb, and vertical navigation. If you already use lists for navigation, read on anyway! You might pick up a new trick or two.

Orientation

Without CSS, lists display vertically in the browser (see Example 1):

<ul>
 <li><a href="#">Home</a></li>
 <li><a href="#">Products</a></li>
 <li><a href="#">Support</a></li>
 <li><a href="#">Contact</a></li>
</ul>

Here, the links display vertically because each list item is considered a block element, with a line break before and after each link. But what if we want a list to display horizontally across the page, such as for tab or breadcrumb navigation? For this, we use the display: inline declaration, which causes links to display one after another without a line break (see Example 2):

li { display: inline; }

Margins and Padding

Browsers apply default white space around lists and list items. Given browser inconsistencies, however, removing the default formatting is easier than trying to find the magic numbers that work consistently across all browsers (see Example 3):

ul
{
 margin: 0;
 padding: 0;
}

But since white space is helpful for distinguishing links, we can assign margin and padding values to the A tag. You may ask, Why assign properties to A? Why not use LI? Styling the A tag (selector in CSS-speak) is more predictable than styling list elements. Browsers have big ideas about how lists should display and are not always willing to let them go, whereas the properties that are assigned to links (underlines, color, etc.) are easy to modify using CSS.

The following style rule adds 5 pixels of padding to the top and bottom of each link and 10 pixels to each side (see Example 4):

a { padding: 5px 10px; }

Borders and Backgrounds

Next, we'll spice up our navigation design by assigning links a background color and a 1-pixel border (see Example 5):

a
{
 padding: 5px 10px;
 background-color: #8DA293;
 border: 1px solid #637267;
}

In addition, we can use color to highlight the current section link so that users know where they are in the site. To do so, we add a current class to the A selector rule, which allows us to change the background color of the current page link. We also need to add class="current" to the A tag of the current page in order to apply the formatting (see Example 6):

a.current { background-color: #ffffe5; }

<li><a class="current" href="#">Support</a></li>

Type Styles

Currently, our links are displayed using default text settings. Let's style the text by removing link underlines; changing the case to all caps; setting the font weight, size, typeface, and color; and adding a smidge of space between letters (see Example 7):

a
{
 padding: 5px 10px;
 background-color: #8DA293;
 border: 1px solid #637267;
 text-decoration: none;
 text-transform: uppercase;
 font: bold .8em verdana, arial, sans-serif;
 color: white;
 letter-spacing: .1em;
}

With our current class in action, the white link text is invisible against the pale background of the current page link. Here, we change the link text color for the current page link to the same color as the tab border (see Example 8):

a.current
{
 background-color: #ffffe5;
 color: #637267;
}

Behaviors

Rollovers tell users when the cursor is positioned over an actionable element, such as a link or button. We can use CSS to provide this type of feedback by assigning properties and values to the :hover pseudo-class of the A selector. Here, we create a rollover using the same background and text color values as the current class rule (see Example 9):

a:hover
{
 background-color: #ffffe5;
 color: #637267;
}

Item Markers

Now we'll move away from tab navigation design and take a look at techniques for marking list items. We may not want a list marker, in which case we can suppress the display of any item marker by setting the list-style-type property to none (see Example 10):

ul { list-style-type: none; }

Should we choose to display a marker, we can use a disc (bullet), circle, or square. And since we use the A selector to define the text color, we can use the LI selector to jazz things up by using a different color for the bullet (see Example 11):

ul { list-style-type: square; }
li { color: orange; }

CSS version 2 provides a way to use a character other than a bullet to mark list items. We can use what are called pseudo-elements to insert content before or after an element. Here, we'll construct a breadcrumb list by using the :before pseudo-element to insert an angle bracket before each item.

First, we set the list-style-type to none to suppress bullet display. Next, we set the list item display to inline to make the links display horizontally across the page. Finally, we use li:before to display an angle bracket, designated using its hex code (003E), before each link. Okay, okay, that's not it! We also add a space after the bracket (0020) and some padding to the link left margin because we simply cannot help fussing! (See Example 12.)

ul { list-style-type: none; }

li
{
 display: inline;
 padding-right: 8px;
}

li:before { content: "\003E \0020"; }

Well, there you have it—navigation design with lists! I hope the ease of styling lists has convinced you to adopt list markup for all your navigation designs. For more on designing navigation using lists, read Mark Newhouse's article "CSS Design: Taming Lists" at A List Apart, and visit Listamatic, from Max Design. Also check out Dan Cederholm's books Bulletproof Web Design (New Riders, 2005, ISBN 0321346939) and Web Standards Solutions: The Markup and Style Handbook (Friends of ED, 2004).