Widgetul de meniu Magento este o versiune personalizată a jQuery UI Menu (sursa: lib/web/mage/menu.js). Fragmentele de mai jos sunt exemple și necesită adaptare.
Inițializarea prin data-mage-init
Se folosește notația declarativă cu atributul data-mage-init:
<nav class="navigation" data-action="navigation">
<ul id="menu" data-mage-init='{"menu":{"responsive":true,"expanded":true,"delay":200,
"position":{"my":"left top","at":"left+10 top+30"}}}'>
<li class="level0 level-top"><a href="#">Toys</a></li>
<li class="level0 level-top parent"><a href="#">Electronics</a>
<ul class="level0 submenu">
<li><a href="#">Home Entertainment</a></li>
<li><a href="#">Routers</a></li>
</ul>
</li>
</ul>
</nav>Opțiunile (responsive, expanded, delay, position) sunt aceleași ca la jQuery UI Menu, cu câteva setări specifice Magento.
