How to use Metro 4 Appbar as main menu Wordpress

[olton]

Adding an Appbar is very simple. To do this, you must define the component itself and add a menu to it with the appropriate class. The code below defines the component and adds a menu to the component. The menu will be minimized by default and unfolded with a media rule of min-width: 758px (md). We also redefine the position of the app bar from absolute (default) to the relative with class pos-relative (if necessary).

Code: Select all

<nav class="main-menu text-upper bg-light">
  <div data-role="appbar" class="app-bar-expand-md pos-relative">
     <a href="/" class="brand d-none-md">
         <span class="mif-home"></span>
     </a>

     <?php wp_nav_menu( array( 
         'theme_location' => 'main',
         'menu_class' => 'app-bar-menu',
         'container' => false 
     ) ); ?>
  </div>
</nav>

The actual menu we add by calling WordPress functions wp_nav_menu. Note the third element of the array of parameters

Code: Select all

'container' => false

. This is mandatory, as it removes the container around the menu, if you need to leave this container, you should trim the corresponding class of the component app-bar-container.

Code: Select all

<?php wp_nav_menu( array( 
    'theme_location' => 'main',
    'menu_class' => 'app-bar-menu',
    'container' => true,
    'container_class' => 'app-bar-container' 
) ); ?>

If you do not need to use the drop-down menu, you can limit this, but if you need to use the drop-down menu, you'll have to work a little more. By default, WordPress for the second level menu adds a sub-menu class. But when using Metro 4, you need to add a d-menu class and a corresponding dropdown role with attribute data-role="dropdown". To do this, we need to override the Walker_Nav_Menu class by default to create the menu and the function inside it is start_lvl. Below is the corresponding PHP class code.

Code: Select all

class Metro4_Walker_Nav_Menu extends \Walker_Nav_Menu {
    public function start_lvl(&$output, $depth = 0, $args = array())
    {
        $indent = ( $depth > 0  ? str_repeat( "\t", $depth ) : '' ); // code indent
        $classes = array(
            'd-menu'
        );
        $class_names = implode( ' ', $classes );

        $output .= "\n" . $indent . '<ul class="' . $class_names . '" data-role="dropdown">' . "\n";
    }
}    

Now we just need to rewrite the function call wp_nav_menu using our new class.

Code: Select all

<?php wp_nav_menu( array(
   'theme_location' => 'main', 
   'menu_id' => 'main-menu', 
   'menu_class' => 'app-bar-menu', 
   'container' => false, 
   'walker' => new Metro4_Walker_Nav_Menu() 
) ); ?>

That's all. In this way, you can control the addition of any menu from Metro 4.