Drupal 8.x - Beginner - Identify the id or hostname of the block, menu, or other twig template and use it in class naming

Question

I use the Zen theme for drupal 8.x.

I need to customize the menus so that they have the machine name or element ids that surrounds it. This example is how I intend it to stay:

<nav role="navigation" aria-labelledby="block-uni-theme-2018-account-menu-menu" id="block-uni-theme-2018-account-menu" class="contextual-region c-navigation-account c-navigation">
  <h2 class="visually-hidden" id="block-uni-theme-2018-account-menu-menu">User account menu</h2>

  <!-- THEME DEBUG -->
  <!-- THEME HOOK: 'menu__account' -->
  <!-- FILE NAME SUGGESTIONS:
  * menu--account.html.twig
  x menu.html.twig
  -->

  <!-- BEGIN OUTPUT from 'themes/custom/uni_theme_2018/templates/navigation/menu.html.twig' -->
  <ul class="c-menu-account c-menu c-navigation-account__menu">...</ul>
  <!-- END OUTPUT from 'themes/custom/uni_theme_2018/templates/navigation/menu.html.twig' -->
</nav>

Files I'm using: https://gist.github.com/onaSousa/488ab9349f15bd039c66bc663d43ba04 I do not know how to use the "account" in my menu file.

Answer 1

In the "menu.html.twig" template the default variable (menu_name) can not be used directly inside the function {% macro %} so we must set the variables together with the parameters to be accessible.

Before:

{{ menus.menu_links(items, attributes, 0) }}

{% macro menu_links(items, attributes, menu_level) %}

---

After:

{{ menus.menu_links(menu_name, items, attributes, 0) }}

{% macro menu_links(menu_name, items, attributes, menu_level) %}

---

https://gist.github.com/onaSousa/68ec7fbdc85c30d613d70053dd3e4a2b

<ul class="c-menu-account c-menu--no-levels c-menu">
   <li class="c-menu-account__item">
     <a href="/user" class="c-menu-account__link" data-drupal-link-system-path="user">Minha conta</a>
   </li>    
  <li class="c-menu-account__item">
    <a href="/user/logout" class="c-menu-account__link" data-drupal-link-system-path="user/logout">Sair</a>
  </li>
</ul>