piped navigation with css

You’ve seen piped navigation before. Typically found in the footer of websites, appearing as a list of links separated by a | (pipe).

There’s a nice way to fake piping using really clean, standards friendly code along with our friend, CSS. I’ve been using this method for years now and am quite happy with it. Basically, you start by creating a typical unordered list containing the list of links.

<ul id="piped">
  <li><a href="first">One</a></li>
  <li><a href="second">Two</a></li>
  <li class="last"><a href="third">Three</a></li>
</ul>

I’ll explain the class=”last” in a minute.

Now in your stylesheet you tell the list to be displayed without any bullets and displayed inline rather than stacked as is the default. You also give each link a nice pad on both the left and right. To fake the pipe, you simply add a border to one side. This is where the class=”last” comes in. You don’t want there to be a border after the last link, so for that class, you can simply set the border to none.

ul#piped li{
  display: inline;
  border-right: 1px solid #000;
  padding-left: 10px;
  padding-right: 7px;
}
ul#piped li.last{
  border-right: none;
}

(Realistically, you could also do border-left and class=”first.”)