How to write a mixin function for a list in pug?

Question

HTML

I'm learning Pug. I wanted to write a mixin to quickly create a navigation list. It is necessary that the name and href differ in the name.
Here is the mixin:

mixin list([...names], [...links])
  each name in names 
    li
      each link in links
        a(href=link)=name

Here is the implementation:

+list(['Home', 'About Us', 'Order', 'Contacts'], ['_Home', '_About Us', '_Order', '_Contacts'])

This is what compiles to HTML:

<li>
<a href="_Home">Home</a><a href="_About Us">Home</a><a href="_Order">Home</a><a href="_Contacts">Home</a>
</li>
<li>
<a href="_Home">About Us</a><a href="_About Us">About Us</a><a href="_Order">About Us</a><a href="_Contacts">About Us</a>
</li>
<li><a href="_Home">Order</a><a href="_About Us">Order</a><a href="_Order">Order</a><a href="_Contacts">Order</a>
</li>
<li>
<a href="_Home">Contacts</a><a href="_About Us">Contacts</a><a href="_Order">Contacts</a><a href="_Contacts">Contacts</a>
</li>

Here's what you'd like:

<li>
<a href="_Home">Home</a>
</li>
<li>
<a href="_About Us">About Us</a>
</li>
<li>
<a href="_Order">Order</a>
</li>
<li>
<a href="_Home">Contacts</a>
</li>

I understand what I'm doing wrong. How can this be implemented?

Answer 1

mixin list( items )
  each item in items 
    li
      a(href=item.href)=item.text

+list( [ {href: 'index.html', text: 'Home'}, {href: 'about.html', text: 'About'}, {href: 'contacts.html', text: 'Contacts'} ] )