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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
Nav item 1 (level0 nav-1 first level-top) - url item (level-top) Nav item 2 (level0 nav-2 level-top parent) - url item (level-top) - sub-menu (level0 submenu) - child 1 (level1 nav-2-1 first parent) - url item - sub-menu (level1 submenu) - sub-child 1 (level2 nav-2-1-1 first) - sub-child 2 (level2 nav-2-1-2) - sub-child 3 (level2 nav-2-1-3 last) - child 2 (level1 nav-2-2 last parent) - url item - sub-menu (level1 submenu) - sub-child 1 (level2 nav-3-2-1 first) - sub child 2 (level2 nav-3-2-2 last) Nav item 3 (level0 nav-3 last level-top) - url item (level-top) - sub-menu (level0 submenu) - child 1 (level1 nav-3-1 first parent) - url item - sub-menu (level1 submenu) - sub-child 1 (level2 nav-3-1-1 first) - sub-child 2 (level2 nav-3-1-2) - sub-child 3 (level2 nav-3-1-3) - sub-child 4 (level2 nav-3-1-4 last) - child 2 (level1 nav-3-2 last parent) - url item - sub-menu (level1 submenu) - sub-child 1 (level2 nav-3-2-1 first) - sub child 2 (level2 nav-3-2-2 last) |
If you prefer Html-code and to see it as it looks in Magento, this is shown below.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 |
<nav class="navigation"> <ul> <li class="level0 nav-1 first level-top"> <a href="" class="level-top"> <span></span> </a> </li> <li class="level0 nav-2 level-top parent> <a href="" class="level-top> <span></span> </a> <ul class="level0 submenu"> <li class="level1 nav-2-1 first parent"> <a href=""> <span></span> </a> <ul class="level1 submenu"> <li class="level2 nav-2-1-1 first" > <a href=""> <span></span> </a> </li> <li class="level2 nav-2-1-2"> <a href=""> <span></span> </a> </li> <li class="level2 nav-2-1-3"> <a href=""> <span></span> </a> </li> <li class="level2 nav-2-1-4 last"> <a href=""> <span></span> </a> </li> </ul> </li> <li class="level1 nav-2-2 last parent"> <a href=""> <span></span> </a> <ul class="level1 submenu"> <li class="level2 nav-2-2-1 first"> <a href=""> <span></span> </a> </li> <li class="level2 nav-2-2-2 last"> <a href=""> <span></span> </a> </li> </ul> </li> </ul> </li> <li class="level0 nav-3 level-top parent last"> <a href="" class="level-top"> <span></span> </a> <ul class="level0 submenu"> <li class="level1 nav-3-1 first parent"> <a href=""> <span></span> </a> <ul class="level1 submenu"> <li class="level2 nav-3-1-1 first"> <a href=""> <span></span> </a> </li> <li class="level2 nav-3-1-2"> <a href=""> <span></span> </a> </li> <li class="level2 nav-3-1-3"> <a href=""> <span></span> </a> </li> <li class="level2 nav-3-1-4 last"> <a href=""> <span></span> </a> </li> </ul> </li> <li class="level1 nav-3-2 last parent ui-menu-item" role="presentation"> <a href=""> <span></span> </a> <ul class="level1 submenu"> <li class="level2 nav-3-2-1 first"> <a href=""> <span></span> </a> </li> <li class="level2 nav-3-2-2 last"> <a href=""> <span></span> </a> </li> </ul> </li> </ul> </li> </ul> </nav> |
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.