title: How to create multi level menu using jade.pug
body: <p>In <code>header.pug</code></p>
  
  <pre><code>block link
      -var selected='Home';
  -var menu = [{'title':'Home','address':'/home/home.html','child':[]},{'title':'Shopping','address':'/shopping/shopping.html','child':[{'title':'TV','address':'/tv/tv.html'},{'title':'Smartphone','address':'/smartphone/smartphone.html'}]},{'title':'About','address':'/about/about.html','child':[]}]
  
  #navbar
      +navbar(selected,menu)
  </code></pre>
  
  <p>In <code>mixin.pug</code></p>
  
  <pre><code>//- Navbar mixin
  mixin navbar(selected, menus)
              ul
                  each menu in menus       
                      if selected === menu.title
                          li.active
                             a(href=menu.address, title=menu.address)= menu.title
                             if menu.child.length &gt; 0
                                  +navbar(selected, menu.child)
                      else
                          li
                             a(href=menu.address, title=menu.address)= menu.title
                             if menu.child.length &gt; 0
                                  +navbar(selected, menu.child)
  </code></pre>
  
  <p><strong>Problem:</strong></p>
  
  <p>When compile it into html, there is a error, shown in the console:</p>
  
  <pre><code>Cannot read property of undefined in the "if menu.child.length &gt; 0" row
  </code></pre>
  
  <p><strong>Edit:</strong></p>
  
  <p>Added a picture:</p>
  
  <p><img src="https://i.imgur.com/6QFtjSR.png" alt=""></p>