title: Wordpress Nav Walker - Multilevel navigation
body: <p>I need help with navigation in Wordpress site. I'm trying to get Wordpress print my navigation in this format:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul data-menu="main" class="menu__level"&gt;
          &lt;li class="menu__item"&gt;&lt;a class="menu__link" data-submenu="submenu-1" href="#"&gt;Vegetables&lt;/a&gt;&lt;/li&gt;
          &lt;li class="menu__item"&gt;&lt;a class="menu__link" data-submenu="submenu-2" href="#"&gt;Fruits&lt;/a&gt;&lt;/li&gt;
          &lt;li class="menu__item"&gt;&lt;a class="menu__link" data-submenu="submenu-3" href="#"&gt;Grains&lt;/a&gt;&lt;/li&gt;
          &lt;li class="menu__item"&gt;&lt;a class="menu__link" data-submenu="submenu-4" href="#"&gt;Mylk &amp; Drinks&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
        
  &lt;!-- Submenu 1 / Shown when user clicks the first list item (item with data-submenu="submenu-1") on data-menu="main" --&gt;
        &lt;ul data-menu="submenu-1" class="menu__level"&gt;
          &lt;li class="menu__item"&gt;&lt;a class="menu__link" href="#"&gt;Stalk Vegetables&lt;/a&gt;&lt;/li&gt;
          &lt;li class="menu__item"&gt;&lt;a class="menu__link" href="#"&gt;Roots &amp; Seeds&lt;/a&gt;&lt;/li&gt;
          &lt;li class="menu__item"&gt;&lt;a class="menu__link" href="#"&gt;Cabbages&lt;/a&gt;&lt;/li&gt;
          &lt;li class="menu__item"&gt;&lt;a class="menu__link" href="#"&gt;Salad Greens&lt;/a&gt;&lt;/li&gt;
          &lt;li class="menu__item"&gt;&lt;a class="menu__link" href="#"&gt;Mushrooms&lt;/a&gt;&lt;/li&gt;
          &lt;li class="menu__item"&gt;&lt;a class="menu__link" data-submenu="submenu-1-1" href="#"&gt;Sale %&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
        
  &lt;!-- Submenu 2 / Shown when user clicks the second list item (item with data-submenu="submenu-2") on data-menu="main" --&gt;
        &lt;ul data-menu="submenu-2" class="menu__level"&gt;
          &lt;li class="menu__item"&gt;&lt;a class="menu__link" href="#"&gt;Citrus Fruits&lt;/a&gt;&lt;/li&gt;
          &lt;li class="menu__item"&gt;&lt;a class="menu__link" href="#"&gt;Berries&lt;/a&gt;&lt;/li&gt;
          &lt;li class="menu__item"&gt;&lt;a class="menu__link" data-submenu="submenu-2-1" href="#"&gt;Special Selection&lt;/a&gt;&lt;/li&gt;
          &lt;li class="menu__item"&gt;&lt;a class="menu__link" href="#"&gt;Tropical Fruits&lt;/a&gt;&lt;/li&gt;
          &lt;li class="menu__item"&gt;&lt;a class="menu__link" href="#"&gt;Melons&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
        
  &lt;!-- Submenu 3 / Shown when user clicks the third list item (item with data-submenu="submenu-3") on data-menu="main" --&gt;
        &lt;ul data-menu="submenu-3" class="menu__level"&gt;
          &lt;li class="menu__item"&gt;&lt;a class="menu__link" href="#"&gt;Buckwheat&lt;/a&gt;&lt;/li&gt;
          &lt;li class="menu__item"&gt;&lt;a class="menu__link" href="#"&gt;Millet&lt;/a&gt;&lt;/li&gt;
          &lt;li class="menu__item"&gt;&lt;a class="menu__link" href="#"&gt;Quinoa&lt;/a&gt;&lt;/li&gt;
          &lt;li class="menu__item"&gt;&lt;a class="menu__link" href="#"&gt;Wild Rice&lt;/a&gt;&lt;/li&gt;
          &lt;li class="menu__item"&gt;&lt;a class="menu__link" href="#"&gt;Durum Wheat&lt;/a&gt;&lt;/li&gt;
          &lt;li class="menu__item"&gt;&lt;a class="menu__link" data-submenu="submenu-3-1" href="#"&gt;Promo Packs&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
        
  &lt;!-- Submenu 4 / Shown when user clicks the forth list item (item with data-submenu="submenu-4") on data-menu="main" --&gt;
        &lt;ul data-menu="submenu-4" class="menu__level"&gt;
          &lt;li class="menu__item"&gt;&lt;a class="menu__link" href="#"&gt;Grain Mylks&lt;/a&gt;&lt;/li&gt;
          &lt;li class="menu__item"&gt;&lt;a class="menu__link" href="#"&gt;Seed Mylks&lt;/a&gt;&lt;/li&gt;
          &lt;li class="menu__item"&gt;&lt;a class="menu__link" href="#"&gt;Nut Mylks&lt;/a&gt;&lt;/li&gt;
          &lt;li class="menu__item"&gt;&lt;a class="menu__link" href="#"&gt;Nutri Drinks&lt;/a&gt;&lt;/li&gt;
          &lt;li class="menu__item"&gt;&lt;a class="menu__link" data-submenu="submenu-4-1" href="#"&gt;Selection&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>But I can't figure out how to specify child items to specific parent item and then printing them with data-submenu.</p>
  
  <p><strong>Navigation structure is taken from here:
  <a href="http://tympanus.net/Blueprints/MultiLevelMenu/" rel="nofollow">http://tympanus.net/Blueprints/MultiLevelMenu/</a></strong></p>
  
  <p>Thanks!</p>
  
  <p>Update: This crossed my mind: would it be easier or cleaner to just get navigation data with php and then populate it in right format with Javascript? Does anyone know if this would be better way to handle this? </p>
  
  <p>Or how about using rest-api with this (I'm fairly new with this, so is there point to use it as a part of in small website project) </p>