Provides powerful menu editor to replace category based menus in Magento 2
JavaScript PHP Vue HTML CSS
Clone or download

Packagist Packagist

Magento 2 Menu

Provides powerful menu editor to replace category based menus in Magento 2.


List of menus is located in Admin Panel under Content > Elements > Menus.

Following example shows how to replace default Magento 2 menu, by the user-defined menu with identifier main.

<referenceBlock name="catalog.topnav" remove="true"/>
<referenceBlock name="">
  <block name="" class="Snowdog\Menu\Block\Menu">
        <argument name="menu" xsi:type="string">main</argument>

Overwriting templates per menu ID

You have to add new folder with menu ID and add same structure like in default folder. For example, to overwrite templates of menu with ID menu_main the folders structure should looks like this:

  └─ templates
    └─ menu_main
      │- menu
      │  │- node_type
      │  │  │- category.phtml
      │  │  └─ ...   
      │  └─ sub_menu.phtml
      └─ menu.phtml

Adding new types of nodes

To add new type node you have to add new backend block that also implements \Snowdog\Menu\Api\NodeTypeInterface.

Backend block will be directly injected into menu editor. Menu editor is using Vue.js so you need to create a new vue component that has node type code as name in view/adminhtml/web/vue/menu-type and load it in view/adminhtml/templates/menu/nodes.phtml (See view/adminhtml/web/vue/menu-type/category.vue for reference)

Newly created block with additional method should be added via di.xml defining block instance and node type code (code will be stored in database).

<?xml version="1.0" encoding="UTF-8" ?>
<config xmlns:xsi="" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="Snowdog\Menu\Model\NodeTypeProvider">
            <argument name="providers" xsi:type="array">
                <item name="my_node_type" xsi:type="object">Foo\Bar\Block\NodeType\MyNode</item>

Available endpoints:

  • /rest/V1/menus: retrieves available menus
  • /rest/V1/nodes: retrieves nodes by menuId