Add Dividers or Separators Between Nav Menu Items

Does anybody have an idea on how to allow a user to drop in separators or dividers between certain nav menu items?

Google only seems to bring up rookie CSS tips for first/last child selectors but I am after something very much like Firefox bookmarks.

UPDATE:

I do appreciate all input so far, but I’ll elaborate to avoid any further confusion;

• I’ve written many plugins & themes, and have a good understanding of all the basics (hooking into WordPress, implementing extended functionality, handling & saving data etc.)
• I’m specifically after advice on extending the nav menus admin UI, which would allow users to drop in ‘separators’ (nothing more than markers) between items in the menu, and how best to store that data & then render it in some shape or form on output with wp_nav_menu

Usually I would delve in & just get to work. But since this is only a possible requirement for an upcoming project, I thought I’d see if anyone’s already tried something similar.

Plus I thought it might actually be useful for others, and would post my own feedback/results if I proceed with it.

Use a custom walker. Extend start_el() to print <li class="menu_separator"><hr></li> if the menu title is just a '-'.

functions.php

function wpse38241_setup_menu()
{
    register_nav_menu( 'main-menu', 'Main Menu' );
}
add_action( 'after_setup_theme', 'wpse38241_setup_menu' );


/**
 * Replaces items with '-' as title with li class="menu_separator"
 *
 * @author Thomas Scholz (toscho)
 */
class Wpse38241_Separator_Walker extends Walker_Nav_Menu
{
    /**
     * Start the element output.
     *
     * @param  string $output Passed by reference. Used to append additional content.
     * @param  object $item   Menu item data object.
     * @param  int $depth     Depth of menu item. May be used for padding.
     * @param  array $args    Additional strings.
     * @return void
     */
    public function start_el( &$output, $item, $depth, $args )
    {
        if ( '-' === $item->title )
        {
            // you may remove the <hr> here and use plain CSS.
            $output .= '<li class="menu_separator"><hr>';
        }
        else
        {
            parent::start_el( &$output, $item, $depth, $args );
        }
    }
}

Create the menu

Now create your usual menu. Add an item with '-' as title:

Full size image

Call the menu in your template

wp_nav_menu(
    array (
        'menu'            => 'main-menu',
        'container'       => FALSE,
        'container_id'    => FALSE,
        'menu_class'      => '',
        'menu_id'         => FALSE,
        'walker'          => new Wpse38241_Separator_Walker
    )
);

Output

(reformatted for readability)

<ul id="menu-separated" class="">
  <li id="menu-item-92" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-92">
    <a href="https://wordpress.stackexchange.com/questions/38241/nav-menu-separators">Nav menu separators?</a>
  </li>
  <li class="menu_separator">
    <hr>
  </li>
  <li id="menu-item-93" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-93">
    <a href="https://wordpress.stackexchange.com/">wordpress.stackexchange.com</a>
  </li>
</ul>

This works even without JavaScript and CSS.