Skip to content

Simple CSS menu separators for navigation

G9th September 2013

C1 Comment

TCSS

Use CSS to Insert an unobtrusive image or a symbol as a separator between unordered or ordered list items that function as a navigation menu.

In order to place separators between ordered (<ol>) or unordered (<ul>) list items (<li>) that form part of a horizontal menu, use the following CSS code for placing an image-based separator as a background image between menu items:


#nav li + li {
    background:url('separator-image.png') no-repeat top left;
    padding-left: 10px;
}

This CSS code adds the image to every list item that follows another list item, so the result will be to place a separator to the left of each list item except the first. Being a background image, the separator will not be clickable.

If you prefer to use the “pipe” (ie |) as the separator (or any other character), use the following CSS code instead:


#nav li + li:before {
    content: " | ";
    padding: 0 10px;
}

Both of these pieces of code will work for a list, such as the example below:


<ul id="nav">
  <li><a href="page1.htm">Menu Item 1</a></li>
  <li><a href="page2.htm">Menu Item 2</a></li>
  <li><a href="page3.htm">Menu Item 3</a></li>
  ...
</ul>
   

Comments:

One response to “Simple CSS menu separators for navigation”

  • Written by G Hart on 11 July 2018:

    When the list wraps due to a smaller screen size, how do we prevent the first items on the wrapped rows having a pipe before the object?

Have your say:

The following HTML is permitted:
<a href="" title=""> <b> <blockquote cite=""> <code> <em> <i> <q cite=""> <strike> <strong>

Comments will be published subject to the Editorial Policy.