How to customize the markup of a theme menu

[Chris_H]

I have this code in my header.blade.php:

@if (has_nav_menu('primary_navigation'))
  {!! wp_nav_menu(['theme_location' => 'primary_navigation', 'menu_class' => 'main-menu']) !!}
@endif

Which outputs this markup on the page:

<header class="site-header">
  <nav>
    <a class="brand" href="/">Example</a>
    <div class="menu-main-nav-container">
      <ul id="menu-main-nav" class="main-menu"> 
        <li id="menu-item-1" class="menu-item menu-item-home"><a href="/">Home</a></li>
        <li id="menu-item-2" class="menu-item menu-item-example-1"><a href="/example-1">Example 1</a></li>
        <li id="menu-item-3" class="menu-item menu-item-example-2"><a href="/example-2">example 2</a></li>
      </ul>
    </div>
  </nav>
</header>

but I’d like to have this markup:

<header class="site-header">
  <nav>
    <a class="nav-title" href="#">Example</a>
    <ul class="main-menu">
      <li>
        <a href="/"><i class="material-icons-round">home</i><span>Home</span></a>
      </li>
      <li>
        <a href="/example-1"><i class="material-icons-round">save</i><span>Example 1</span></a>
      </li>
      <li>
        <a href="/example-2"><i class="material-icons-round">remove_red_eye</i><span>Example 2</span></a>
      </li>
    </ul>
  </nav>
</header>

How can I customize and control the generated markup?

[alwaysblank]

You would need to extend the nav walker to create your own walker with the formatting you want. This provides a simple example: https://gist.github.com/5544535

Dealing with WP walkers is an huge pain though, so I strongly recommend using something like @Log1x’s navi.

[Chris_H]

Thanks, I suppose I’ll just hard code it to keep it simple.