Europa Component Library

Side Navigation

Documentation • Demo

Side Navigation

The navigation bar supporting the mainmenu is a common graphical element shared by all EMA and Telematics websites

{#
  Accepts:
    - extra_classes (string): additional classes to add to the component
    - extra_attributes (array of { name: '', value: '' })
    - list: the sub-tree generated by the server (array of { label: '', link: '', list: [] })
    - active: this is the current page, link is active (boolean, default(false))
#}

{# Internal properties #}
{% set _css_class = 'ema-side-navigation' %}
{% set _extra_attributes = '' %}
{% set _list = list %}

{% 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 %}
  {% for attr in extra_attributes %}
    {% set _extra_attributes = _extra_attributes ~ ' ' ~ attr.name ~ '="' ~ attr.value ~ '"' %}
  {% endfor %}
{% endif %}

{# Print result #}
{% macro menu_links(list, depth, parent_index) %}
  {% import _self as macros %}
  {% for item in list %}
    {% set _current_index = parent_index ? parent_index ~ "-" ~ loop.index : loop.index %}
    {% set _depth = (depth|default(0)) + 1 %}
    {% set _active = item.active|default(false) %}
    {% set _class = "ecl-expandable__button ema-side-navigation__link ema-side-navigation__link--depth-" ~ _depth ~ (_active ? ' ema-side-navigation__link--active') %}
    <li>
      {% if item.list is defined and item.list is not empty %}
        <a
          class="{{ _class }} ema-side-navigation__link--has-list"
          href="{{ item.link }}"
          aria-expanded="false">
          {{ item.label }}
        </a>
        <ul
          class="ecl-listing ecl-list--unstyled">
          {{ macros.menu_links(item.list, _depth, _current_index) }}
        </ul>
      {% else %}
        <a
          class="{{ _class }}"
          href="{{ item.link }}">
          {{ item.label }}
        </a>
      {% endif %}
    </li>
  {% endfor %}
{% endmacro %}

{% import _self as macros %}
<div class="{{ _css_class }}"{{ _extra_attributes }}>
  <ul class="ecl-listing ecl-list--unstyled">
    {{ macros.menu_links(_list) }}
  </ul>
</div>
 
{
  "list": [
    {
      "label": "Link 1",
      "link": "#",
      "list": [
        {
          "label": "Link 1-1",
          "link": "#"
        },
        {
          "label": "Link 1-2",
          "link": "#"
        },
        {
          "label": "Link 1-3",
          "link": "#",
          "list": [
            {
              "label": "Link 1-3-1",
              "link": "#",
              "list": [
                {
                  "label": "Link 1-3-1-1",
                  "link": "#",
                  "active": true
                },
                {
                  "label": "Link 1-3-1-2",
                  "link": "#"
                }
              ]
            },
            {
              "label": "Link 1-3-2",
              "link": "#"
            },
            {
              "label": "Link 1-3-3",
              "link": "#"
            }
          ]
        }
      ]
    },
    {
      "label": "Link 2",
      "link": "#"
    },
    {
      "label": "Link 3",
      "link": "#"
    },
    {
      "label": "Link 4",
      "link": "#"
    }
  ]
}
 
<div class="ema-side-navigation">
  <ul class="ecl-listing ecl-list--unstyled">
    <li>
      <a class="ecl-expandable__button ema-side-navigation__link ema-side-navigation__link--depth-1 ema-side-navigation__link--has-list" href="#" aria-expanded="false">
          Link 1
        </a>
      <ul class="ecl-listing ecl-list--unstyled">
        <li>
          <a class="ecl-expandable__button ema-side-navigation__link ema-side-navigation__link--depth-2" href="#">
          Link 1-1
        </a>
        </li>
        <li>
          <a class="ecl-expandable__button ema-side-navigation__link ema-side-navigation__link--depth-2" href="#">
          Link 1-2
        </a>
        </li>
        <li>
          <a class="ecl-expandable__button ema-side-navigation__link ema-side-navigation__link--depth-2 ema-side-navigation__link--has-list" href="#" aria-expanded="false">
          Link 1-3
        </a>
          <ul class="ecl-listing ecl-list--unstyled">
            <li>
              <a class="ecl-expandable__button ema-side-navigation__link ema-side-navigation__link--depth-3 ema-side-navigation__link--has-list" href="#" aria-expanded="false">
          Link 1-3-1
        </a>
              <ul class="ecl-listing ecl-list--unstyled">
                <li>
                  <a class="ecl-expandable__button ema-side-navigation__link ema-side-navigation__link--depth-4 ema-side-navigation__link--active" href="#">
          Link 1-3-1-1
        </a>
                </li>
                <li>
                  <a class="ecl-expandable__button ema-side-navigation__link ema-side-navigation__link--depth-4" href="#">
          Link 1-3-1-2
        </a>
                </li>

              </ul>
            </li>
            <li>
              <a class="ecl-expandable__button ema-side-navigation__link ema-side-navigation__link--depth-3" href="#">
          Link 1-3-2
        </a>
            </li>
            <li>
              <a class="ecl-expandable__button ema-side-navigation__link ema-side-navigation__link--depth-3" href="#">
          Link 1-3-3
        </a>
            </li>

          </ul>
        </li>

      </ul>
    </li>
    <li>
      <a class="ecl-expandable__button ema-side-navigation__link ema-side-navigation__link--depth-1" href="#">
          Link 2
        </a>
    </li>
    <li>
      <a class="ecl-expandable__button ema-side-navigation__link ema-side-navigation__link--depth-1" href="#">
          Link 3
        </a>
    </li>
    <li>
      <a class="ecl-expandable__button ema-side-navigation__link ema-side-navigation__link--depth-1" href="#">
          Link 4
        </a>
    </li>

  </ul>
</div>
  • Content: 
    /**
* EMA Side Navigation
*/

.ema-side-navigation {
  margin: 0;
}

.ema-side-navigation__link {
  background-color: map-get($ema-colors, 'primary');
  color: #fff;
  display: block;
  padding: map-get($ecl-spacing, 's');
  text-decoration: none;

  &:hover {
    background-color: #fff;
    box-shadow: inset 0 0 0 1px map-get($ema-colors, 'primary');
    color: map-get($ema-colors, 'primary');
    text-decoration: underline;
  }

  &::after {
    float: right;
    line-height: map-get($ecl-font-size, 'l');
    text-decoration: none;
  }
}

.ema-side-navigation__link--depth-1 {
  background-color: map-get($ema-colors, 'primary');
}

.ema-side-navigation__link--depth-2 {
  background-color: map-get($ema-colors, 'blue-1');
  padding-left: map-get($ecl-spacing, 'm');
}

.ema-side-navigation__link--depth-3 {
  background-color: map-get($ema-colors, 'blue-2');
  padding-left: map-get($ecl-spacing, 'l');
}

.ema-side-navigation__link--depth-4 {
  background-color: map-get($ema-colors, 'blue-3');
  padding-left: map-get($ecl-spacing, 'xl');
}

.ema-side-navigation__link--active {
  background-color: #fff;
  box-shadow: inset 0 0 0 1px map-get($ema-colors, 'primary');
  color: map-get($ema-colors, 'primary');
  text-decoration: underline;
}
  • URL: /components/raw/ema-side-navigation/ema-side-navigation.scss
  • Filesystem Path: framework/components/ema-side-navigation/ema-side-navigation.scss
  • Size: 1.3 KB
  • Handle: @ec-europa/ema-side-navigation
  • Preview:
  • Filesystem Path: framework/components/ema-side-navigation/ema-side-navigation.twig