Blogg

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.

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.

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.