{"id":2315,"date":"2019-01-15T07:20:05","date_gmt":"2019-01-15T11:20:05","guid":{"rendered":"http:\/\/agileadam.com\/?p=2315"},"modified":"2019-01-15T07:21:04","modified_gmt":"2019-01-15T11:21:04","slug":"adding-level-number-class-to-menu-items-in-drupal-8","status":"publish","type":"post","link":"https:\/\/agileadam.com\/2019\/01\/adding-level-number-class-to-menu-items-in-drupal-8\/","title":{"rendered":"Adding Level Number Class to Menu Items in Drupal 8"},"content":{"rendered":"

This is a quick post showing how to add level classes to menu items in Drupal 8.<\/p>\n

Here’s the result, showing the additional menu–level-N<\/span>\u00a0\u00a0and menu-item–level-N<\/span>\u00a0\u00a0<\/em>classes:<\/p>\n

\"Result\"<\/p>\n

Step 1: Create a New Twig template File<\/strong><\/p>\n

Determine which Twig template you need to override. I recommend reading the official docs<\/a> on this. In my case, for a menu called infofor<\/em>, I copied docroot\/core\/themes\/classy\/templates\/navigation\/menu.html.twig<\/span>\u00a0to docroot\/themes\/custom\/mytheme\/templates\/navigation\/menu–infofor.html.twig<\/span>\u00a0.<\/p>\n

Step 2: Update the\u00a0Twig Code<\/strong><\/p>\n

The best way to see the changes is to see a diff. Notice how few changes it takes to achieve the desired result:<\/p>\n

 {#\r\n \/**\r\n  * @file\r\n  * Theme override to display a menu.\r\n  *\r\n  * Available variables:\r\n  * - menu_name: The machine name of the menu.\r\n  * - items: A nested list of menu items. Each menu item contains:\r\n  *   - attributes: HTML attributes for the menu item.\r\n  *   - below: The menu item child items.\r\n  *   - title: The menu link title.\r\n  *   - url: The menu link url, instance of \\Drupal\\Core\\Url\r\n  *   - localized_options: Menu link localized options.\r\n  *   - is_expanded: TRUE if the link has visible children within the current\r\n  *     menu tree.\r\n  *   - is_collapsed: TRUE if the link has children within the current menu tree\r\n  *     that are not currently visible.\r\n  *   - in_active_trail: TRUE if the link is in the active trail.\r\n  *\/\r\n #}\r\n {% import _self as menus %}\r\n \r\n {#\r\n   We call a macro which calls itself to render the full tree.\r\n   @see http:\/\/twig.sensiolabs.org\/doc\/tags\/macro.html\r\n #}\r\n {{ menus.menu_links(items, attributes, 0) }}\r\n \r\n {% macro menu_links(items, attributes, menu_level) %}\r\n   {% import _self as menus %}\r\n   {% if items %}\r\n     {% if menu_level == 0 %}\r\n       <ul{{ attributes.addClass('menu') }}>\r\n     {% else %}\r\n-      <ul class=\"menu\">\r\n+      <ul class=\"menu menu--level-{{ menu_level + 1}}\">\r\n     {% endif %}\r\n     {% for item in items %}\r\n       {%\r\n         set classes = [\r\n           'menu-item',\r\n           item.is_expanded ? 'menu-item--expanded',\r\n           item.is_collapsed ? 'menu-item--collapsed',\r\n           item.in_active_trail ? 'menu-item--active-trail',\r\n+          'menu-item--level-' ~ (menu_level + 1)\r\n         ]\r\n       %}\r\n       <li{{ item.attributes.addClass(classes) }}>\r\n         {{ link(item.title, item.url) }}\r\n         {% if item.below %}\r\n           {{ menus.menu_links(item.below, attributes, menu_level + 1) }}\r\n         {% endif %}\r\n       <\/li>\r\n     {% endfor %}\r\n     <\/ul>\r\n   {% endif %}\r\n {% endmacro %}<\/pre>\n
Step 3: Clear Cache and Test<\/strong><\/p>\n
You may have to clear the cache every time you make changes.<\/p>\n","protected":false},"excerpt":{"rendered":"
This is a quick post showing how to add level classes to menu items in Drupal 8. Here’s the result, showing the additional menu–level-N\u00a0\u00a0and menu-item–level-N\u00a0\u00a0classes: Step 1: Create a New Twig template File Determine which Twig template you need to override. I recommend reading the official docs on this. In my case, for a menu called infofor, I copied docroot\/core\/themes\/classy\/templates\/navigation\/menu.html.twig\u00a0to docroot\/themes\/custom\/mytheme\/templates\/navigation\/menu–infofor.html.twig\u00a0. Step 2: Update the\u00a0Twig Code<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[79],"tags":[300,44,301],"_links":{"self":[{"href":"https:\/\/agileadam.com\/wp-json\/wp\/v2\/posts\/2315"}],"collection":[{"href":"https:\/\/agileadam.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/agileadam.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/agileadam.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/agileadam.com\/wp-json\/wp\/v2\/comments?post=2315"}],"version-history":[{"count":4,"href":"https:\/\/agileadam.com\/wp-json\/wp\/v2\/posts\/2315\/revisions"}],"predecessor-version":[{"id":2320,"href":"https:\/\/agileadam.com\/wp-json\/wp\/v2\/posts\/2315\/revisions\/2320"}],"wp:attachment":[{"href":"https:\/\/agileadam.com\/wp-json\/wp\/v2\/media?parent=2315"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/agileadam.com\/wp-json\/wp\/v2\/categories?post=2315"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/agileadam.com\/wp-json\/wp\/v2\/tags?post=2315"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}