Ive subthemed the main bootstrap theme, and i just want to add classes to my main menu and menu items, so my two solutions would be to:

1.copy menu--main.html.twig into my templates folder, that way overrideing the original, and then just delete all of that attributes/class logic they've added and add my own classes.

This was my initial idea, but then i looked at their attributes logic:

 * @file
 * Default theme implementation to display a menu.
 * Available variables:
 * - menu_name: The machine name of the menu.
 * - items: A nested list of menu items. Each menu item contains:
 *   - attributes: HTML attributes for the menu item.
 *   - below: The menu item child items.
 *   - title: The menu link title.
 *   - url: The menu link url, instance of \Drupal\Core\Url
 *   - localized_options: Menu link localized options.
 * @ingroup templates
{% 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{{ attributes.addClass('menu', 'nav', 'navbar-nav') }}>
    {% else %}
      <ul{{ attributes.addClass('dropdown-menu') }}>
    {% endif %}
    {% for item in items %}
      {% if menu_level == 0 and item.is_expanded %}
        <li{{ item.attributes.addClass('expanded', 'dropdown') }}>
        <a href="{{ item.url }}" class="dropdown-toggle" data-target="#" data-toggle="dropdown">{{ item.title }} <span class="caret"></span></a>
      {% else %}
        <li{{ item.attributes }}>
        {{ link(item.title, item.url) }}
      {% endif %}
      {% if item.bel{#
        {{ menus.menu_links(item.below, attributes.removeClass('nav', 'navbar-nav'), menu_level + 1) }}
      {% endif %}
    {% endfor %}
  {% endif %}
{% endmacro %}

I Thouth that there had to be a good reason why they have it, so i was thinking about doing the second solution:

  1. preprocess function for the template and add the attributes there. But the logic would be something like:

        function itkweb_preprocess_menu(&$variables) {
             if($variables['menu_name'] = "main") {
                 $variables['attributes']['class'][] = 'someclass';

So basically the question is why would i keep the attribute logic, or why would i just delete it?

Another question is, what is the name of the preprocess function, if i wanted to target the menu--main.html.twig specifically? the menu would be _preprocess_menu so ive tried to mix in main, but i can't get it to work.


  • See my question. drupal.stackexchange.com/questions/191845/…
    – SakaSerbia
    Feb 21 '16 at 11:13
  • Yeah okay, i see the usefulness of that, im looking a bit more into twig right now, to figuire out what exactly that bootstrap menu template does, and then i think il combine it with your solution. Thanks ! :) Feb 21 '16 at 11:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.