Menu editor for Magento 2 – new module that replace category based menus

Snowdog’s Magento 2 Menu implements a long awaited feature for Magento. The ability to work with menus as a modifiable node-list as a content element in the admin area. There are modules available that does this, but at a substantial cost if you run multi-store. There are also nice hacks available, using a plugin-approach, but the hacks that are readily available doesn’t support multi-store and is not implemented for editors with access only to the store admin. Personally, I think that such a feature should be part of the core. Hence, I was delighted when Alan Storm informed about the existence of this module.

FYI: It turned out to be a bit of work to get it working as I wanted. What I initially thought was a substantial cost for the available commercial modules are close to zero in comparison to the effort I put into understanding the Snowdog menu master module. Add any potential maintenance to that and the substantial cost is… close to zero for the commercial available modules. But hey, I enjoy learning, it is why I work with Magento and internet! 

Installation (one way to do it)

  1. Download the files from https://github.com/SnowdogApps/magento2-menu and select download ZIP.
  2. Unzip on your machine.
  3. Upload to your server, I’ve put it in MagentoWebRoot/app/code/Snowdog. Within the Snowdog-folder, I’ve got the Menu-folder.
  4. Run CLI-command php magento setup:upgrade and follow the instructions.

Use

If installation worked, you should see a new section in the Content-menu, within the Element-section, namely, Menus. In this, you can easily create a new menu. It is quite self-instructing. It will work well in multi-store as you select to which store each menu is applicable to.

The position of the Menu editor in the admin is located within the "Content" area in the menu, with title "Menus". Once Menus has been clicked, a "Create new menu" button and a list of existing menus will appear.
The Menu editor appears in the Content section of the Magento 2 admin.
Once the "Create new menu" has been selected, a page is shown where configuration (title, identifier, menu main css class, store view) is made.
The configuration once a new menu is created with Menu editor

Within the Nodes tab, once creating a new menu, the menu nodes are added. Different types are available, such as category, custom url, cms page, etc. Within this tab, CSS class, node text, link etc. are set.
Adding a node to the menu. The tree that gets created has a drag and drop feature. If you select Add [some] node, it is a bit finicky to get the node at the right level. It is possible to put all nodes without any node being the parent of another (typically, the top-level of any menu shouldn’t have an explicit parent specified).
Once the menu is created, you need to include it your theme. To do so, edit default.xml in your theme. By editing default.xml, you can also remove existing menu. The code I’ve added in my default.xml (in the MagentoWebRoot/app/design/frontend/VendorName/themeName/Magento_Theme/layout/default.xml) is below. When I created the menu, I’ve named it main and added a couples of nodes of different types. You can see the menu-identifier in the arguments section and need to adjust it according to the identifier you select.

To remove existing menu, add the below code in your default.xml.

Its not pretty – out of the box

Out of the box with Luma-theme or similar theme, the menu will not look good. Well, yes, you can add certain CSS-classes when you create the menu, but what you can add and what gets automatically added isn’t in the same as Magento standard menu CSS. Furthermore, Menu master implements certain Html-elements that doesn’t exist in the native menu and seems to have a different approach to responsive web design.

Stay tuned, I’ll come back with some technical in-depth stuff and what I did to get the Menu Editor work with a Luma child theme.

The logic of Magento 2 menu CSS classes

This post describes the CSS of the Magento 2 standard menu through example. This post will not describe how to add additional items to the menu.

Below is a general menu, with three first level nav items. It can be described generally as below, where each child and sub-child has an implicit url item. Within (), I’ve included the standard Magento CSS class for each navigation item. I’m not showing the classes called active and has-active. The active is assigned to the nav item, child or sub-child if it is the current page displayed. The has-active is assigned if its child is active.

If you prefer Html-code and to see it as it looks in Magento, this is shown below.

From a css and html-structure perspective, the depth and size of the menu could be substantially larger, but above should provide enough input on how the css and html looks like, independent of size and depth.