Skip to content

Dear Internet Explorer user: Your browser is no longer supported

Please switch to a modern browser such as Microsoft Edge, Mozilla Firefox or Google Chrome to view this website's content.

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>


One response to “Simple CSS menu separators for navigation”

On 11 July 2018, G Hart wrote: Hyperlink chain icon

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.