How to create multi level menu using jade.pug
<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>