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.