---
title: Cum inițializez un meniu de navigare în Magento 2?
description: "Widgetul de meniu Magento este o versiune personalizată a [jQuery UI Menu](https://api.jqueryui.com/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`: ``` Toys Electronics Home Entertainment Routers…"
url: "https://www.hostx.ro/kb/cum-initializez-un-meniu-de-navigare-in-magento-2/"
updated: "2026-07-26"
category: Programare / Aplicații / Magento
tags:
  - configurare
  - Frontend
  - Magento 2
---

# Cum inițializez un meniu de navigare în Magento 2?

Widgetul de meniu Magento este o versiune personalizată a [jQuery UI Menu](https://api.jqueryui.com/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.