1

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 %}
      </li>
    {% endfor %}
    </ul>
  {% 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.

Thanks!

2
  • See my question. drupal.stackexchange.com/questions/191845/…
    – SakaSerbia
    Feb 21, 2016 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, 2016 at 11:53

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.