Foundation 6 Menu Walker Class for WordPress

It’s about that time again. New menu walkers for the new and improved Foundation 6. Last year I posted a menu walker class for Foundation 5, but this year I’m dropping 2, one for the Top Bar and another for the Drill Menu. You’ll notice these Walker classes are streamlined, only using one method. Fall Back functions are also included.

Top Bar

Top Bar Menu Walker Class

<?php
class F6_TOPBAR_MENU_WALKER extends Walker_Nav_Menu
{   
    /*
     * Add vertical menu class and submenu data attribute to sub menus
     */
     
    function start_lvl( &$output, $depth = 0, $args = array() ) {
        $indent = str_repeat("\t", $depth);
        $output .= "\n$indent<ul class=\"vertical menu\" data-submenu>\n";
    }
}

//Optional fallback
function f6_topbar_menu_fallback($args)
{
    /*
     * Instantiate new Page Walker class instead of applying a filter to the
     * "wp_page_menu" function in the event there are multiple active menus in theme.
     */
     
    $walker_page = new Walker_Page();
    $fallback = $walker_page->walk(get_pages(), 0);
    $fallback = str_replace("<ul class='children'>", '<ul class="children submenu menu vertical" data-submenu>', $fallback);
    
    echo '<ul class="dropdown menu" data-dropdown-menu>'.$fallback.'</ul>';
}

?>

Register Top Bar Menu

//Register Menu
function _register_menu() {
    register_nav_menu( 'topbar-menu', __( 'Top Bar Menu','textdomain' ) );
}

//Add Menu to theme setup hook
add_action( 'after_setup_theme', '_theme_setup' );

function _theme_setup()
{
    add_action( 'init', '_register_menu' );
        
    //Theme Support
    add_theme_support( 'menus' );
}

Instantiate Top Bar Menu in your theme

//header.php
echo'
<div class="top-bar">
    <div class="top-bar-right">';
        wp_nav_menu(array(
            'container' => false,
            'menu' => __( 'Top Bar Menu', 'textdomain' ),
            'menu_class' => 'dropdown menu',
            'theme_location' => 'topbar-menu',
            'items_wrap'      => '<ul id="%1$s" class="%2$s" data-dropdown-menu>%3$s</ul>',
            //Recommend setting this to false, but if you need a fallback...
            'fallback_cb' => 'f6_topbar_menu_fallback',
            'walker' => new F6_TOPBAR_MENU_WALKER(),
        ));
    echo'
    </div>
</div>';

Drill Menu

Drill Menu Walker Class

<?php
class F6_DRILL_MENU_WALKER extends Walker_Nav_Menu
{
    /*
     * Add vertical menu class
     */
     
    function start_lvl( &$output, $depth = 0, $args = array() ) {
        $indent = str_repeat("\t", $depth);
        $output .= "\n$indent<ul class=\"vertical menu\">\n";
    }
}

function f6_drill_menu_fallback($args)
{
    /*
     * Instantiate new Page Walker class instead of applying a filter to the
     * "wp_page_menu" function in the event there are multiple active menus in theme.
     */
     
    $walker_page = new Walker_Page();
    $fallback = $walker_page->walk(get_pages(), 0);
    $fallback = str_replace("children", "children vertical menu", $fallback);
    echo '<ul class="vertical menu" data-drilldown="">'.$fallback.'</ul>';
}

?>

Register Drill Menu

//Register Menu (functions.php)
function _register_menu() {
    register_nav_menu( 'drill-menu', __( 'Drill Menu','textdomain' ) );
}

//Add Menu to theme setup hook
add_action( 'after_setup_theme', '_theme_setup' );

function _theme_setup()
{
    add_action( 'init', '_register_menu' );
        
    //Theme Support
    add_theme_support( 'menus' );
}

Instantiate Drill Menu in your theme

//sidebar.php or off-canvas
wp_nav_menu(array(
    'container' => false,
    'menu' => __( 'Drill Menu', 'textdomain' ),
    'menu_class' => 'vertical menu',
    'theme_location' => 'drill-menu',
    'items_wrap'      => '<ul id="%1$s" class="%2$s" data-drilldown="">%3$s</ul>',
    //Recommend setting this to false, but if you need a fallback...
    'fallback_cb' => 'f6_drill_menu_fallback',
    'walker' => new F6_DRILL_MENU_WALKER(),
));

If you have any questions, corrections or gripes, leave a comment below. And don’t forget to Git the latest Foundation 6 menu walkers for WordPress!