Drupal 8 remove extra divs and add custom classes in menu

Question

Currently the {{page.primary_menu}} created the extra divs and default d8 classes as below:

<div class="region region-primary-menu">
    <nav role="navigation" aria-labelledby="block-demo-main-menu-menu" id="block-demo-main-menu">
            <h2 class="sr-only" id="block-demo-main-menu-menu">Main navigation</h2>

      
      <ul class="menu menu--main nav navbar-nav">
                      <li class="first">
                                        <a href="#mu-slider" data-drupal-link-system-path="<front>" class="is-active">Home</a>
              </li>
                      <li>
                                        <a href="/drupal8/" data-drupal-link-system-path="<front>" class="is-active">Home</a>
              </li>
                      <li class="last">
                                        <a href="#mu-about-us" data-drupal-link-system-path="<front>" class="is-active">ABOUT US</a>
              </li>
        </ul>
  

  </nav>

  </div>

However, I want to generate the menu structure as like:

<ul id="top-menu" class="nav navbar-nav navbar-right mu-main-nav">
    <li><a href="#mu-slider">HOME</a></li>
    <li><a href="#mu-about-us">ABOUT US</a></li>                       
    <li><a href="#mu-restaurant-menu">MENU</a></li>                       
    <li><a href="#mu-reservation">RESERVATION</a></li>                   
    <li><a href="#mu-gallery">GALLERY</a></li>
    <li><a href="#mu-chef">OUR TEAM</a></li>
    <li><a href="#mu-latest-news">BLOG</a></li> 
    <li><a href="#mu-contact">CONTACT</a></li> 
 </ul>

I've created a file name demo.theme and pasted the code but it did not give me the expected result.

<?php 
use Drupal\Core\Form\FormStateInterface;
use Drupal\Core\Template\Attribute;

/**
 * Implements hook_preprocess_HOOK() for HTML document templates.
 *
 * Adds body classes if certain regions have content.
 */
function demo_menu_tree(&$variables) {

  return '<ul id="top-menu" class="nav navbar-nav navbar-right mu-main-nav">' . $variables['tree'] . '</ul>';

}

Any suggestion?

Answer 1

1. Make sure you have twig debugging enabled, it will make your life a lot easier, by adding comments to your mark up (which you can see inline in the web inspector). Using those comments you can figure out what you should name your theme file.

2. Create a new custom twig file in the /templates directory of your theme like so themes/[your-theme-name-here]/templates/menu.html.twig. As a starting point I'd suggest either using the default classy theme menu.html.twig template, or clone use the file referenced inline in the markup comments of your site when you have twig debugging enabled.

3. Edit the menu.html.twig file to meet your needs, something like this:

{% import _self as menus %}

{#
  We call a macro which calls itself to render the full tree.
  @see http://twig.sensiolabs.org/doc/tags/macro.html
#}
{{ menus.menu_links(items, attributes, 0) }}

{% macro menu_links(items, attributes, menu_level) %}
  {% import _self as menus %}
  {% if items %}
    {% if menu_level == 0 %}
      <ul id="top-menu" {{ attributes.addClass('nav navbar-nav navbar-right mu-main-nav') }}>
    {% else %}
      <ul class="menu">
    {% endif %}
    {% for item in items %}
      {%
        set classes = [
          'menu-item',
          item.is_expanded ? 'menu-item--expanded',
          item.is_collapsed ? 'menu-item--collapsed',
          item.in_active_trail ? 'menu-item--active-trail',
        ]
      %}
      <li{{ item.attributes.addClass(classes) }}>
        {{ link(item.title, item.url) }}
        {% if item.below %}
          {{ menus.menu_links(item.below, attributes, menu_level + 1) }}
        {% endif %}
      </li>
    {% endfor %}
    </ul>
  {% endif %}
{% endmacro %}