A custom walker to support Foundation 5's off-canvas nav in WordPress

Foundation_Off_Canvas_Menu.php

<?php

/**
 * FoundationNavWalker by rickbutterfield
 * Now lives at https://github.com/rickbutterfield/FoundationNavWalker
 */

class FoundationNavWalker extends Walker_Nav_Menu {

  public function start_lvl( &$output, $depth = 0, $args = array() ) {
    $indent = str_repeat( "\t", $depth);
    $output .= "\n$indent<ul class=\"off-canvas-list\">\n";
  }

  public function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
    $indent = ( $depth ) ? str_repeat( "\t", $depth) : '';

    if ( $depth === 0 ) {
      $output .= '<li><label>' . esc_attr( $item->title ) . '</label></li>';
    }

    if ( $depth === 1) {
      //Get classes
      $class_names = $value = '';

      $classes = empty( $item->classes ) ? array() : (array) $item->classes;
      $classes[] = 'menu-item-' . $item->ID;
      $classes[] = ($item->current) ? 'active' : '';

      $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );

      $class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';

      //Get id
      $id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
      $id = $id ? ' id="' . esc_attr( $id ) . '"' : '';

      $output .= $indent . '<li' . $id . $value . $class_names .'>';

      if (!empty($item->url)) {
        $output .= '<a href="' . $item->url . '">' . $item->title . '</a>';
      }

      $output .= '</li>';
    }
  }
}

?>

Hey Rick, this is great. I have been looking for something like this. Have not been able to make it work, but I'll keep trying. Hey, have you considered making something similar for wp_list_pages? Comes in handy for CMS menus. Thanks!

Hi @jkinley! I've worked on this some more and made a repo for it at FoundationNavWalker which works as the Zurb example does. Maybe it'll work for you?

With wp_list_pages, what is it you're looking to do?

Thanks Rick! How does this work for multilevel off canvas menu? Thanks for your kind advise.

This is awesome. Great contribution and thanks! I'm interested to know if it works for multi-level off-canvas as well.