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.