Navigation menus

Documentation • Demo

Ready

When and how to use this component

The horizontal menu is used to display the first 2 levels of pages within a website’s architecture.

For levels 3 and below the menu should be complemented by using navigation blocks to drill down to sub-pages.

Guidelines

Amount of Items

Due to limited horizontal space, especially on low resolution screens, the number of items on the first level of the menu should be 3-5 items.

Labeling

Labels on the first level of the menu should be simple and composed of 1 to 3 words (for the English language version of the menu).

Using 3 words should be an exception when you want to refer to two related topics (e.g. News and events / Contracts and funding).

When to use this component

if you need an alternative to the listing navigation blocks
only for improved sites
only with a basic page header
below the basic page header
on every page of the website

Do not use this component

with a default page header


        {#
  Parameters:
    - "menu_label" (string) (default: ''): visible on mobile
    - "menu_aria_label" (string)  (default: ''): label displayed before the list
    - "links" (array) (default: []): [{
        "href" (string): target of the link
        "label" (string): label of the link
        "is_active" (boolean): does the menu contains the current page? (default: false)
        "children_links" (array): [{
          "href" (string)
          "label" (string)
          "is_active" (boolean): is it the current page?
        }]
      }]
    - "extra_classes" (string) (default: '')
    - "extra_attributes" (array) (default: []): format: [
        {
          "name" (string) (default: ''),
          "value" (string) (default: '')
        },
        ...
      ]
  Blocks:
    - "navigation": instead of providing an array of links, you can also embed the template and fill the "navigation" block directly
#}

{# Internal properties #}

{% set _menu_label = menu_label|default('') %}
{% set _menu_aria_label = menu_aria_label|default('') %}
{% set _links = links|default([]) %}
{% set _css_class = 'ecl-navigation-menu' %}
{% set _extra_attributes = '' %}

{# Internal logic - Process properties #}

{% if extra_classes is defined and extra_classes is not empty %}
  {% set _css_class = _css_class ~ ' ' ~ extra_classes %}
{% endif %}

{% if extra_attributes is defined and extra_attributes is not empty and extra_attributes is iterable %}
  {% for attr in extra_attributes %}
    {% set _extra_attributes = _extra_attributes ~ ' ' ~ attr.name ~ '="' ~ attr.value|e ~'"' %}
  {% endfor %}
{% endif %}

{# Print the result #}

<nav class="{{ _css_class }}" aria-label="{{ _menu_aria_label }}"{{ _extra_attributes|raw }}>
  <div class="ecl-container">
    <button class="ecl-navigation-menu__toggle ecl-navigation-menu__hamburger ecl-navigation-menu__hamburger--squeeze" aria-controls="nav-menu-expandable-root" aria-expanded="false">
      <span class="ecl-navigation-menu__hamburger-box">
        <span class="ecl-navigation-menu__hamburger-inner"></span>
      </span>
      <span class="ecl-navigation-menu__hamburger-label">{{ _menu_label }}</span>
    </button>
    <ul class="ecl-navigation-menu__root" id="nav-menu-expandable-root" aria-hidden="true">
      {% block navigation %}
        {% if _links is not empty and _links is iterable %}
          {% for _link in _links %}
            {% set _link_class_name = 'ecl-navigation-menu__item' ~ (_link.is_active ? ' ecl-navigation-menu__item--active' : '') %}
            <li class="{{ _link_class_name }}">
              {% if _link.children_links is not defined or _link.children_links is empty %}
                <a href="{{ _link.href }}" class="ecl-navigation-menu__link">{{ _link.label }}</a>
              {% else %}
                <a href="{{ _link.href }}" class="ecl-navigation-menu__link" aria-controls="nav-menu-expandable-group-{{ loop.index }}" aria-expanded="false" aria-haspopup="true">{{ _link.label }}</a>
                <div class="ecl-navigation-menu__group ecl-row" id="nav-menu-expandable-group-{{ loop.index }}">
                  {% for _column in _link.children_links %}
                    <div class="ecl-col">
                      {% if _column.title is defined and _column.title is not empty %}
                        <div class="ecl-navigation-menu__title">{{ _column.title }}</div>
                      {% endif %}
                      <ul class="ecl-navigation-menu__links ecl-list ecl-list--unstyled">
                        {% for _child_link in _column.links %}
                          {% set _child_link_class_name = 'ecl-navigation-menu__link' ~ (_child_link.is_active ? ' ecl-navigation-menu__link--active' : '') %}
                          <li class="ecl-navigation-menu__item">
                            <a href="{{ _child_link.href }}" class="{{ _child_link_class_name }}">{{ _child_link.label }}</a>
                          </li>
                        {% endfor %}
                      </ul>
                    </div>
                  {% endfor %}
                </div>
              {% endif %}
            </li>
          {% endfor %}
        {% endif %}
      {% endblock %}
    </ul>
  </div>
</nav>


        
            
            {
  "menu_label": "Menu",
  "menu_aria_label": "Main Navigation",
  "links": [
    {
      "label": "Home",
      "href": "../../example.html#home"
    },
    {
      "label": "Policy",
      "href": "../../example.html#item1",
      "is_active": true,
      "children_links": [
        {
          "links": [
            {
              "label": "Sub item 1",
              "href": "../../example.html#item1-1-1"
            },
            {
              "label": "Sub item 2 with a very very very (very) long label",
              "href": "../../example.html#item1-1-2"
            },
            {
              "label": "Sub item 3",
              "href": "../../example.html#item1-1-3"
            },
            {
              "label": "Sub item 4",
              "href": "../../example.html#item1-1-4",
              "is_active": true
            },
            {
              "label": "Sub item 5",
              "href": "../../example.html#item1-1-5"
            }
          ]
        },
        {
          "links": [
            {
              "label": "Sub item 1",
              "href": "../../example.html#item1-2-1"
            },
            {
              "label": "Sub item 2",
              "href": "../../example.html#item1-2-2"
            },
            {
              "label": "Sub item 3",
              "href": "../../example.html#item1-2-3"
            },
            {
              "label": "Sub item 4",
              "href": "../../example.html#item1-2-4"
            },
            {
              "label": "Sub item 5",
              "href": "../../example.html#item1-2-5"
            }
          ]
        },
        {
          "links": [
            {
              "label": "Sub item 1",
              "href": "../../example.html#item1-3-1"
            },
            {
              "label": "Sub item 2",
              "href": "../../example.html#item1-3-2"
            },
            {
              "label": "Sub item 3",
              "href": "../../example.html#item1-3-3"
            },
            {
              "label": "Sub item 4",
              "href": "../../example.html#item1-3-4"
            },
            {
              "label": "Sub item 5",
              "href": "../../example.html#item1-3-5"
            }
          ]
        },
        {
          "links": [
            {
              "label": "Sub item 1",
              "href": "../../example.html#item1-4-1"
            },
            {
              "label": "Sub item 2",
              "href": "../../example.html#item1-4-2"
            },
            {
              "label": "Sub item 3",
              "href": "../../example.html#item1-4-3"
            },
            {
              "label": "Sub item 4",
              "href": "../../example.html#item1-4-4"
            },
            {
              "label": "Sub item 5",
              "href": "../../example.html#item1-4-5"
            }
          ]
        }
      ]
    },
    {
      "label": "Advisor Bodies",
      "href": "../../example.html#item2",
      "children_links": [
        {
          "title": "Optional title 1",
          "links": [
            {
              "label": "Sub item 1",
              "href": "../../example.html#item2-1-1"
            },
            {
              "label": "Sub item 2 with a very very very (very) long label",
              "href": "../../example.html#item2-1-2"
            },
            {
              "label": "Sub item 3",
              "href": "../../example.html#item2-1-3"
            },
            {
              "label": "Sub item 4",
              "href": "../../example.html#item2-1-4"
            },
            {
              "label": "Sub item 5",
              "href": "../../example.html#item2-1-5"
            }
          ]
        },
        {
          "title": "Optional title 2",
          "links": [
            {
              "label": "Sub item 1",
              "href": "../../example.html#item2-2-1"
            },
            {
              "label": "Sub item 2",
              "href": "../../example.html#item2-2-2"
            },
            {
              "label": "Sub item 3",
              "href": "../../example.html#item2-2-3"
            },
            {
              "label": "Sub item 4",
              "href": "../../example.html#item2-2-4"
            },
            {
              "label": "Sub item 5",
              "href": "../../example.html#item2-2-5"
            }
          ]
        }
      ]
    },
    {
      "label": "News & Events",
      "href": "../../example.html#item3",
      "children_links": [
        {
          "title": "Optional title 1",
          "links": [
            {
              "label": "Sub item 1",
              "href": "../../example.html#item3-1-1"
            },
            {
              "label": "Sub item 2 with a very very very (very) long label",
              "href": "../../example.html#item3-1-2"
            },
            {
              "label": "Sub item 3",
              "href": "../../example.html#item3-1-3"
            },
            {
              "label": "Sub item 4",
              "href": "../../example.html#item3-1-4"
            },
            {
              "label": "Sub item 5",
              "href": "../../example.html#item3-1-5"
            }
          ]
        },
        {
          "title": "Optional title 2",
          "links": [
            {
              "label": "Sub item 1",
              "href": "../../example.html#item3-2-1"
            },
            {
              "label": "Sub item 2",
              "href": "../../example.html#item3-2-2"
            },
            {
              "label": "Sub item 3",
              "href": "../../example.html#item3-2-3"
            },
            {
              "label": "Sub item 4",
              "href": "../../example.html#item3-2-4"
            },
            {
              "label": "Sub item 5",
              "href": "../../example.html#item3-2-5"
            }
          ]
        },
        {
          "title": "Optional title 3",
          "links": [
            {
              "label": "Sub item 1",
              "href": "../../example.html#item3-3-1"
            },
            {
              "label": "Sub item 2",
              "href": "../../example.html#item3-3-2"
            },
            {
              "label": "Sub item 3",
              "href": "../../example.html#item3-3-3"
            },
            {
              "label": "Sub item 4",
              "href": "../../example.html#item3-3-4"
            },
            {
              "label": "Sub item 5",
              "href": "../../example.html#item3-3-5"
            }
          ]
        }
      ]
    },
    {
      "label": "Contracts and Fundings",
      "href": "../../example.html#item4",
      "children_links": [
        {
          "title": "Optional title 1",
          "links": [
            {
              "label": "Sub item 1",
              "href": "../../example.html#item4-1-1"
            },
            {
              "label": "Sub item 2 with a very very very (very) long label",
              "href": "../../example.html#item4-1-2"
            },
            {
              "label": "Sub item 3",
              "href": "../../example.html#item4-1-3"
            },
            {
              "label": "Sub item 4",
              "href": "../../example.html#item4-1-4"
            },
            {
              "label": "Sub item 5",
              "href": "../../example.html#item4-1-5"
            }
          ]
        },
        {
          "title": "Optional title 2",
          "links": [
            {
              "label": "Sub item 1",
              "href": "../../example.html#item4-2-1"
            },
            {
              "label": "Sub item 2",
              "href": "../../example.html#item4-2-2"
            },
            {
              "label": "Sub item 3",
              "href": "../../example.html#item4-2-3"
            },
            {
              "label": "Sub item 4",
              "href": "../../example.html#item4-2-4"
            },
            {
              "label": "Sub item 5",
              "href": "../../example.html#item4-2-5"
            }
          ]
        },
        {
          "title": "Optional title 3",
          "links": [
            {
              "label": "Sub item 1",
              "href": "../../example.html#item4-3-1"
            },
            {
              "label": "Sub item 2",
              "href": "../../example.html#item4-3-2"
            },
            {
              "label": "Sub item 3",
              "href": "../../example.html#item4-3-3"
            },
            {
              "label": "Sub item 4",
              "href": "../../example.html#item4-3-4"
            },
            {
              "label": "Sub item 5",
              "href": "../../example.html#item4-3-5"
            }
          ]
        },
        {
          "title": "Optional title 4",
          "links": [
            {
              "label": "Sub item 1",
              "href": "../../example.html#item4-4-1"
            },
            {
              "label": "Sub item 2",
              "href": "../../example.html#item4-4-2"
            },
            {
              "label": "Sub item 3",
              "href": "../../example.html#item4-4-3"
            },
            {
              "label": "Sub item 4",
              "href": "../../example.html#item4-4-4"
            },
            {
              "label": "Sub item 5",
              "href": "../../example.html#item4-4-5"
            }
          ]
        }
      ]
    }
  ],
  "_demo": {
    "scripts": "document.addEventListener('DOMContentLoaded', function () {\n      ECL.megamenu();\n    });"
  }
}


        
        <nav class="ecl-navigation-menu" aria-label="Main Navigation">
  <div class="ecl-container">
    <button class="ecl-navigation-menu__toggle ecl-navigation-menu__hamburger ecl-navigation-menu__hamburger--squeeze" aria-controls="nav-menu-expandable-root" aria-expanded="false">
      <span class="ecl-navigation-menu__hamburger-box">
        <span class="ecl-navigation-menu__hamburger-inner"></span>
      </span>
      <span class="ecl-navigation-menu__hamburger-label">Menu</span>
    </button>
    <ul class="ecl-navigation-menu__root" id="nav-menu-expandable-root" aria-hidden="true">
      <li class="ecl-navigation-menu__item">
        <a href="../../example.html#home" class="ecl-navigation-menu__link">Home</a>
      </li>
      <li class="ecl-navigation-menu__item ecl-navigation-menu__item--active">
        <a href="../../example.html#item1" class="ecl-navigation-menu__link" aria-controls="nav-menu-expandable-group-2" aria-expanded="false" aria-haspopup="true">Policy</a>
        <div class="ecl-navigation-menu__group ecl-row" id="nav-menu-expandable-group-2">
          <div class="ecl-col">
            <ul class="ecl-navigation-menu__links ecl-list ecl-list--unstyled">
              <li class="ecl-navigation-menu__item">
                <a href="../../example.html#item1-1-1" class="ecl-navigation-menu__link">Sub item 1</a>
              </li>
              <li class="ecl-navigation-menu__item">
                <a href="../../example.html#item1-1-2" class="ecl-navigation-menu__link">Sub item 2 with a very very very (very) long label</a>
              </li>
              <li class="ecl-navigation-menu__item">
                <a href="../../example.html#item1-1-3" class="ecl-navigation-menu__link">Sub item 3</a>
              </li>
              <li class="ecl-navigation-menu__item">
                <a href="../../example.html#item1-1-4" class="ecl-navigation-menu__link ecl-navigation-menu__link--active">Sub item 4</a>
              </li>
              <li class="ecl-navigation-menu__item">
                <a href="../../example.html#item1-1-5" class="ecl-navigation-menu__link">Sub item 5</a>
              </li>
            </ul>
          </div>
          <div class="ecl-col">
            <ul class="ecl-navigation-menu__links ecl-list ecl-list--unstyled">
              <li class="ecl-navigation-menu__item">
                <a href="../../example.html#item1-2-1" class="ecl-navigation-menu__link">Sub item 1</a>
              </li>
              <li class="ecl-navigation-menu__item">
                <a href="../../example.html#item1-2-2" class="ecl-navigation-menu__link">Sub item 2</a>
              </li>
              <li class="ecl-navigation-menu__item">
                <a href="../../example.html#item1-2-3" class="ecl-navigation-menu__link">Sub item 3</a>
              </li>
              <li class="ecl-navigation-menu__item">
                <a href="../../example.html#item1-2-4" class="ecl-navigation-menu__link">Sub item 4</a>
              </li>
              <li class="ecl-navigation-menu__item">
                <a href="../../example.html#item1-2-5" class="ecl-navigation-menu__link">Sub item 5</a>
              </li>
            </ul>
          </div>
          <div class="ecl-col">
            <ul class="ecl-navigation-menu__links ecl-list ecl-list--unstyled">
              <li class="ecl-navigation-menu__item">
                <a href="../../example.html#item1-3-1" class="ecl-navigation-menu__link">Sub item 1</a>
              </li>
              <li class="ecl-navigation-menu__item">
                <a href="../../example.html#item1-3-2" class="ecl-navigation-menu__link">Sub item 2</a>
              </li>
              <li class="ecl-navigation-menu__item">
                <a href="../../example.html#item1-3-3" class="ecl-navigation-menu__link">Sub item 3</a>
              </li>
              <li class="ecl-navigation-menu__item">
                <a href="../../example.html#item1-3-4" class="ecl-navigation-menu__link">Sub item 4</a>
              </li>
              <li class="ecl-navigation-menu__item">
                <a href="../../example.html#item1-3-5" class="ecl-navigation-menu__link">Sub item 5</a>
              </li>
            </ul>
          </div>
          <div class="ecl-col">
            <ul class="ecl-navigation-menu__links ecl-list ecl-list--unstyled">
              <li class="ecl-navigation-menu__item">
                <a href="../../example.html#item1-4-1" class="ecl-navigation-menu__link">Sub item 1</a>
              </li>
              <li class="ecl-navigation-menu__item">
                <a href="../../example.html#item1-4-2" class="ecl-navigation-menu__link">Sub item 2</a>
              </li>
              <li class="ecl-navigation-menu__item">
                <a href="../../example.html#item1-4-3" class="ecl-navigation-menu__link">Sub item 3</a>
              </li>
              <li class="ecl-navigation-menu__item">
                <a href="../../example.html#item1-4-4" class="ecl-navigation-menu__link">Sub item 4</a>
              </li>
              <li class="ecl-navigation-menu__item">
                <a href="../../example.html#item1-4-5" class="ecl-navigation-menu__link">Sub item 5</a>
              </li>
            </ul>
          </div>
        </div>
      </li>
      <li class="ecl-navigation-menu__item">
        <a href="../../example.html#item2" class="ecl-navigation-menu__link" aria-controls="nav-menu-expandable-group-3" aria-expanded="false" aria-haspopup="true">Advisor Bodies</a>
        <div class="ecl-navigation-menu__group ecl-row" id="nav-menu-expandable-group-3">
          <div class="ecl-col">
            <div class="ecl-navigation-menu__title">Optional title 1</div>
            <ul class="ecl-navigation-menu__links ecl-list ecl-list--unstyled">
              <li class="ecl-navigation-menu__item">
                <a href="../../example.html#item2-1-1" class="ecl-navigation-menu__link">Sub item 1</a>
              </li>
              <li class="ecl-navigation-menu__item">
                <a href="../../example.html#item2-1-2" class="ecl-navigation-menu__link">Sub item 2 with a very very very (very) long label</a>
              </li>
              <li class="ecl-navigation-menu__item">
                <a href="../../example.html#item2-1-3" class="ecl-navigation-menu__link">Sub item 3</a>
              </li>
              <li class="ecl-navigation-menu__item">
                <a href="../../example.html#item2-1-4" class="ecl-navigation-menu__link">Sub item 4</a>
              </li>
              <li class="ecl-navigation-menu__item">
                <a href="../../example.html#item2-1-5" class="ecl-navigation-menu__link">Sub item 5</a>
              </li>
            </ul>
          </div>
          <div class="ecl-col">
            <div class="ecl-navigation-menu__title">Optional title 2</div>
            <ul class="ecl-navigation-menu__links ecl-list ecl-list--unstyled">
              <li class="ecl-navigation-menu__item">
                <a href="../../example.html#item2-2-1" class="ecl-navigation-menu__link">Sub item 1</a>
              </li>
              <li class="ecl-navigation-menu__item">
                <a href="../../example.html#item2-2-2" class="ecl-navigation-menu__link">Sub item 2</a>
              </li>
              <li class="ecl-navigation-menu__item">
                <a href="../../example.html#item2-2-3" class="ecl-navigation-menu__link">Sub item 3</a>
              </li>
              <li class="ecl-navigation-menu__item">
                <a href="../../example.html#item2-2-4" class="ecl-navigation-menu__link">Sub item 4</a>
              </li>
              <li class="ecl-navigation-menu__item">
                <a href="../../example.html#item2-2-5" class="ecl-navigation-menu__link">Sub item 5</a>
              </li>
            </ul>
          </div>
        </div>
      </li>
      <li class="ecl-navigation-menu__item">
        <a href="../../example.html#item3" class="ecl-navigation-menu__link" aria-controls="nav-menu-expandable-group-4" aria-expanded="false" aria-haspopup="true">News & Events</a>
        <div class="ecl-navigation-menu__group ecl-row" id="nav-menu-expandable-group-4">
          <div class="ecl-col">
            <div class="ecl-navigation-menu__title">Optional title 1</div>
            <ul class="ecl-navigation-menu__links ecl-list ecl-list--unstyled">
              <li class="ecl-navigation-menu__item">
                <a href="../../example.html#item3-1-1" class="ecl-navigation-menu__link">Sub item 1</a>
              </li>
              <li class="ecl-navigation-menu__item">
                <a href="../../example.html#item3-1-2" class="ecl-navigation-menu__link">Sub item 2 with a very very very (very) long label</a>
              </li>
              <li class="ecl-navigation-menu__item">
                <a href="../../example.html#item3-1-3" class="ecl-navigation-menu__link">Sub item 3</a>
              </li>
              <li class="ecl-navigation-menu__item">
                <a href="../../example.html#item3-1-4" class="ecl-navigation-menu__link">Sub item 4</a>
              </li>
              <li class="ecl-navigation-menu__item">
                <a href="../../example.html#item3-1-5" class="ecl-navigation-menu__link">Sub item 5</a>
              </li>
            </ul>
          </div>
          <div class="ecl-col">
            <div class="ecl-navigation-menu__title">Optional title 2</div>
            <ul class="ecl-navigation-menu__links ecl-list ecl-list--unstyled">
              <li class="ecl-navigation-menu__item">
                <a href="../../example.html#item3-2-1" class="ecl-navigation-menu__link">Sub item 1</a>
              </li>
              <li class="ecl-navigation-menu__item">
                <a href="../../example.html#item3-2-2" class="ecl-navigation-menu__link">Sub item 2</a>
              </li>
              <li class="ecl-navigation-menu__item">
                <a href="../../example.html#item3-2-3" class="ecl-navigation-menu__link">Sub item 3</a>
              </li>
              <li class="ecl-navigation-menu__item">
                <a href="../../example.html#item3-2-4" class="ecl-navigation-menu__link">Sub item 4</a>
              </li>
              <li class="ecl-navigation-menu__item">
                <a href="../../example.html#item3-2-5" class="ecl-navigation-menu__link">Sub item 5</a>
              </li>
            </ul>
          </div>
          <div class="ecl-col">
            <div class="ecl-navigation-menu__title">Optional title 3</div>
            <ul class="ecl-navigation-menu__links ecl-list ecl-list--unstyled">
              <li class="ecl-navigation-menu__item">
                <a href="../../example.html#item3-3-1" class="ecl-navigation-menu__link">Sub item 1</a>
              </li>
              <li class="ecl-navigation-menu__item">
                <a href="../../example.html#item3-3-2" class="ecl-navigation-menu__link">Sub item 2</a>
              </li>
              <li class="ecl-navigation-menu__item">
                <a href="../../example.html#item3-3-3" class="ecl-navigation-menu__link">Sub item 3</a>
              </li>
              <li class="ecl-navigation-menu__item">
                <a href="../../example.html#item3-3-4" class="ecl-navigation-menu__link">Sub item 4</a>
              </li>
              <li class="ecl-navigation-menu__item">
                <a href="../../example.html#item3-3-5" class="ecl-navigation-menu__link">Sub item 5</a>
              </li>
            </ul>
          </div>
        </div>
      </li>
      <li class="ecl-navigation-menu__item">
        <a href="../../example.html#item4" class="ecl-navigation-menu__link" aria-controls="nav-menu-expandable-group-5" aria-expanded="false" aria-haspopup="true">Contracts and Fundings</a>
        <div class="ecl-navigation-menu__group ecl-row" id="nav-menu-expandable-group-5">
          <div class="ecl-col">
            <div class="ecl-navigation-menu__title">Optional title 1</div>
            <ul class="ecl-navigation-menu__links ecl-list ecl-list--unstyled">
              <li class="ecl-navigation-menu__item">
                <a href="../../example.html#item4-1-1" class="ecl-navigation-menu__link">Sub item 1</a>
              </li>
              <li class="ecl-navigation-menu__item">
                <a href="../../example.html#item4-1-2" class="ecl-navigation-menu__link">Sub item 2 with a very very very (very) long label</a>
              </li>
              <li class="ecl-navigation-menu__item">
                <a href="../../example.html#item4-1-3" class="ecl-navigation-menu__link">Sub item 3</a>
              </li>
              <li class="ecl-navigation-menu__item">
                <a href="../../example.html#item4-1-4" class="ecl-navigation-menu__link">Sub item 4</a>
              </li>
              <li class="ecl-navigation-menu__item">
                <a href="../../example.html#item4-1-5" class="ecl-navigation-menu__link">Sub item 5</a>
              </li>
            </ul>
          </div>
          <div class="ecl-col">
            <div class="ecl-navigation-menu__title">Optional title 2</div>
            <ul class="ecl-navigation-menu__links ecl-list ecl-list--unstyled">
              <li class="ecl-navigation-menu__item">
                <a href="../../example.html#item4-2-1" class="ecl-navigation-menu__link">Sub item 1</a>
              </li>
              <li class="ecl-navigation-menu__item">
                <a href="../../example.html#item4-2-2" class="ecl-navigation-menu__link">Sub item 2</a>
              </li>
              <li class="ecl-navigation-menu__item">
                <a href="../../example.html#item4-2-3" class="ecl-navigation-menu__link">Sub item 3</a>
              </li>
              <li class="ecl-navigation-menu__item">
                <a href="../../example.html#item4-2-4" class="ecl-navigation-menu__link">Sub item 4</a>
              </li>
              <li class="ecl-navigation-menu__item">
                <a href="../../example.html#item4-2-5" class="ecl-navigation-menu__link">Sub item 5</a>
              </li>
            </ul>
          </div>
          <div class="ecl-col">
            <div class="ecl-navigation-menu__title">Optional title 3</div>
            <ul class="ecl-navigation-menu__links ecl-list ecl-list--unstyled">
              <li class="ecl-navigation-menu__item">
                <a href="../../example.html#item4-3-1" class="ecl-navigation-menu__link">Sub item 1</a>
              </li>
              <li class="ecl-navigation-menu__item">
                <a href="../../example.html#item4-3-2" class="ecl-navigation-menu__link">Sub item 2</a>
              </li>
              <li class="ecl-navigation-menu__item">
                <a href="../../example.html#item4-3-3" class="ecl-navigation-menu__link">Sub item 3</a>
              </li>
              <li class="ecl-navigation-menu__item">
                <a href="../../example.html#item4-3-4" class="ecl-navigation-menu__link">Sub item 4</a>
              </li>
              <li class="ecl-navigation-menu__item">
                <a href="../../example.html#item4-3-5" class="ecl-navigation-menu__link">Sub item 5</a>
              </li>
            </ul>
          </div>
          <div class="ecl-col">
            <div class="ecl-navigation-menu__title">Optional title 4</div>
            <ul class="ecl-navigation-menu__links ecl-list ecl-list--unstyled">
              <li class="ecl-navigation-menu__item">
                <a href="../../example.html#item4-4-1" class="ecl-navigation-menu__link">Sub item 1</a>
              </li>
              <li class="ecl-navigation-menu__item">
                <a href="../../example.html#item4-4-2" class="ecl-navigation-menu__link">Sub item 2</a>
              </li>
              <li class="ecl-navigation-menu__item">
                <a href="../../example.html#item4-4-3" class="ecl-navigation-menu__link">Sub item 3</a>
              </li>
              <li class="ecl-navigation-menu__item">
                <a href="../../example.html#item4-4-4" class="ecl-navigation-menu__link">Sub item 4</a>
              </li>
              <li class="ecl-navigation-menu__item">
                <a href="../../example.html#item4-4-5" class="ecl-navigation-menu__link">Sub item 5</a>
              </li>
            </ul>
          </div>
        </div>
      </li>
    </ul>
  </div>
</nav>

File:

Content:


                                export * from '@ecl/generic-component-navigation-menu';

URL: /components/raw/ec-component-navigation-menu/ec-component-navigation-menu.js
Filesystem Path: ../../src/systems/ec/ec-component/ec-component-navigation/ec-component-navigation-menu/ec-component-navigation-menu.js
Size: 56 Bytes

Content:


                                /**
 * EC navigation menus
 * @define navigation-menu
 */

// Import base and generic
@import '@ecl/ec-base/ec-base';
@import '@ecl/generic-component-navigation-menu/generic-component-navigation-menu';

// Check if overridden dependencies are already loaded, if needed
@include check-imports(('ec-style-typography-list'));

// Use generic mixin
@include exports('ec-component-navigation-menu') {
  @include ecl-navigation-menu(
    $bar-bg-mobile: map-get($ecl-colors, 'blue-75'),
    $bar-bg-desktop: map-get($ecl-colors, 'blue-25'),
    $toggle-btn-color: #fff,
    $group-bg: map-get($ecl-colors, 'grey-5'),
    $separator-mobile: map-get($ecl-colors, 'blue-50'),
    $link-color: map-get($ecl-colors, 'blue-120'),
    $active-color: #fff,
    $active-bg: map-get($ecl-colors, 'blue-75')
  );
}

URL: /components/raw/ec-component-navigation-menu/ec-component-navigation-menu.scss
Filesystem Path: ../../src/systems/ec/ec-component/ec-component-navigation/ec-component-navigation-menu/ec-component-navigation-menu.scss
Size: 798 Bytes

Handle: @ecl/ec-component-navigation-menu
Tags: organism
Preview:
- With layout
- Component only
Filesystem Path: ../../src/systems/ec/ec-component/ec-component-navigation/ec-component-navigation-menu/ec-component-navigation-menu.twig