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:
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.