Instantly share code, notes, and snippets.
Created
October 27, 2016 15:18
Applying classes and attributes to navigation under certain depth conditions
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{# | |
/** | |
* @file | |
* Theme override 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. | |
* - is_expanded: TRUE if the link has visible children within the current | |
* menu tree. | |
* - is_collapsed: TRUE if the link has children within the current menu tree | |
* that are not currently visible. | |
* - in_active_trail: TRUE if the link is in the active trail. | |
*/ | |
#} | |
{% 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 %} | |
{% | |
set wrapper_classes = [ | |
(menu_level == 0) ? 'primary-nav__menu js-menu', | |
(menu_level == 1) ? 'primary-nav__submenu', | |
(menu_level == 2) ? 'primary-nav__tertmenu', | |
] | |
%} | |
{% if items %} | |
<ul class="{{ wrapper_classes|join(' ') }}"> | |
{% for item in items %} | |
{% | |
set classes = [ | |
(menu_level == 0) ? 'primary-nav__item', | |
(menu_level == 1) ? 'primary-nav__subitem', | |
(menu_level == 2) ? 'primary-nav__tertitem', | |
(menu_level == 0 and item.below) ? 'has-submenu js-has-submenu', | |
(menu_level == 0 and item.url.options.attributes['data-highlight']) ? 'has-highlight', | |
item.in_active_trail ? 'active-trail', | |
item.in_active_trail ? 'is-active', | |
] | |
%} | |
<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 %} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment