Simple CSS menu separators for navigation

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”

On 11 July 2018, G Hart wrote:

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?

Reply

Have Your Say

Δ