Split up wp_nav_menu with custom walker

I am trying to create a Menu that shows a maximum of 5 items. If there are more items it should wrap them into another <ul> Element to create a dropdown.

5 Items or less:


6 Items or more


I know this kind of functionality could easily be created with a walker that counts the menu items and wraps if there are more then 5 the remaing into a seperate <ul>. But I dont know how to create this walker.

The code that shows my menu at the moment is the following:

<?php wp_nav_menu( array( 'theme_location' => 'navigation', 'fallback_cb' => 'custom_menu', 'walker' =>new Custom_Walker_Nav_Menu ) ); ?>

I noticed that if the menu is not defined by the user and it uses the fallback function instead the walker has no effect. I need it to work in both cases.


Using a custom Walker, the start_el() method has access to $depth param: when it is 0 the elemnt is a top one, and we can use this info to maintain an internal counter.

When the counter reach a limit, we can use DOMDocument to get from full HTML output just the last element added, wrap it in a submenu and add it again to HTML.


When the number of elements are exactly the number we required + 1, e.g. we required 5 elements be visible and menu has 6, it makes no sense to split the menu, because elements will be 6 either way.
The code was edited to address that.

Here’s the code:

class SplitMenuWalker extends Walker_Nav_Menu {

  private $split_at;
  private $button;
  private $count = 0;
  private $wrappedOutput;
  private $replaceTarget;
  private $wrapped = false;
  private $toSplit = false;

  public function __construct($split_at = 5, $button = '<a href="#">&hellip;</a>') {
      $this->split_at = $split_at;
      $this->button = $button;

  public function walk($elements, $max_depth) {
      $args = array_slice(func_get_args(), 2);
      $output = parent::walk($elements, $max_depth, reset($args));
      return $this->toSplit ? $output.'</ul></li>' : $output;

  public function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0 ) {
      $this->count += $depth === 0 ? 1 : 0;
      parent::start_el($output, $item, $depth, $args, $id);
      if (($this->count === $this->split_at) && ! $this->wrapped) {
          // split at number has been reached generate and store wrapped output
          $this->wrapped = true;
          $this->replaceTarget = $output;
          $this->wrappedOutput = $this->wrappedOutput($output);
      } elseif(($this->count === $this->split_at + 1) && ! $this->toSplit) {
          // split at number has been exceeded, replace regular with wrapped output
          $this->toSplit = true;
          $output = str_replace($this->replaceTarget, $this->wrappedOutput, $output);

   private function wrappedOutput($output) {
       $dom = new DOMDocument;
       $lis = $dom->getElementsByTagName('li');
       $last = trim(substr($dom->saveHTML($lis->item($lis->length-1)), 0, -5));
       // remove last li
       $wrappedOutput = substr(trim($output), 0, -1 * strlen($last));
       $classes = array(
       // add wrap li element
       $wrappedOutput .= '<li class="'.implode(' ', $classes).'">';
       // add the "more" link
       $wrappedOutput .= $this->button;
       // add the last item wrapped in a submenu and return
       return $wrappedOutput . '<ul class="sub-menu">'. $last;

The usage is pretty simple:

// by default make visible 5 elements
wp_nav_menu(array('menu' => 'my_menu', 'walker' => new SplitMenuWalker()));

// let's make visible 2 elements
wp_nav_menu(array('menu' => 'another_menu', 'walker' => new SplitMenuWalker(2)));

// customize the link to click/over to see wrapped items
  'menu' => 'another_menu',
  'walker' => new SplitMenuWalker(5, '<a href="#">more...</a>')

Leave a Comment