Europa Component Library

Navigation menus

Documentation • Demo

EMA navigation menu

{% embed '@ec-europa/ecl-navigation-menus' %}
  {% block navigation %}
  {% 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 or _link.is_active %}
        <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" id="nav-menu-expandable-group-{{ loop.index }}">
        {% include '@ec-europa/ema-context-banners' with {
          links: _link.children_links,
          title: _link.title,
          description: _link.description,
        }%}
        </div>
      {% endif %}
    </li>
  {% endfor %}
  {% endblock %}
{% endembed %}
 
{
  "menu_label": "Menu",
  "menu_aria_label": "Main Navigation",
  "extra_classes": "ecl-navigation-menu--ema",
  "links": [
    {
      "label": "Home",
      "href": "#home"
    },
    {
      "label": "Human regulatory",
      "href": "#item1",
      "title": "Human regulatory",
      "description": "This section of the website provides information on the regulation of medicines for human use in the European Union (EU). It particularly concerns the centralised procedure, where the European Medicines Agency (EMA) plays a key role.",
      "is_active": true,
      "children_links": [
        {
          "label": "Overview",
          "href": "#item1-1"
        },
        {
          "label": "Marketing authorisation",
          "href": "#item1-4"
        },
        {
          "label": "Research and development",
          "href": "#item1-2",
          "is_active": true
        },
        {
          "label": "Post authorisation",
          "href": "#item1-5"
        },
        {
          "label": "Herbal products",
          "href": "#item1-3"
        }
      ]
    },
    {
      "label": "Item 2",
      "href": "#item2",
      "title": "Section title",
      "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque efficitur cursus varius. Ut id leo sed libero placerat feugiat eu eget mi. In hac habitasse platea dictumst. Etiam eleifend justo nec ex lacinia blandit. Aenean pellentesque mauris ut malesuada ultricies. Vestibulum blandit arcu et metus semper porta.",
      "children_links": [
        {
          "label": "Item 2.1",
          "href": "#item2-1"
        },
        {
          "label": "Item 2.2",
          "href": "#item2-2"
        },
        {
          "label": "Item 2.3",
          "href": "#item2-3"
        },
        {
          "label": "Item 2.4",
          "href": "#item2-4"
        },
        {
          "label": "Item 2.5",
          "href": "#item2-5"
        },
        {
          "label": "Item 2.6",
          "href": "#item2-6"
        }
      ]
    },
    {
      "label": "Item 3",
      "href": "#item3"
    }
  ],
  "_demo": {
    "scripts": "document.addEventListener('DOMContentLoaded', function () {\n        ECL.megamenu();\n      });"
  }
}
 
<nav class="ecl-navigation-menu ecl-navigation-menu--ema" 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="#home" class="ecl-navigation-menu__link">Home</a>
      </li>
      <li class="ecl-navigation-menu__item ecl-navigation-menu__item--active">
        <a href="#item1" class="ecl-navigation-menu__link">Human regulatory</a>
      </li>
      <li class="ecl-navigation-menu__item">
        <a href="#item2" class="ecl-navigation-menu__link" aria-controls="nav-menu-expandable-group-3" aria-expanded="false" aria-haspopup="true">Item 2</a>

        <div class="ecl-navigation-menu__group" id="nav-menu-expandable-group-3">

          <div class="ema-context-banner">
            <div class="ecl-container">
              <div class="ema-context-banner__wrapper">
                <a href="#" class="ema-context-banner__title">Section title</a>

                <p class="ecl-paragraph ecl-paragraph--ema ecl-paragraph--l">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque efficitur cursus varius. Ut id leo sed libero placerat feugiat eu eget mi. In hac habitasse platea dictumst. Etiam eleifend justo nec ex lacinia blandit. Aenean pellentesque
                  mauris ut malesuada ultricies. Vestibulum blandit arcu et metus semper porta.</p>

                <ul class="ema-context-banner__links">
                  <li class="ema-context-banner__item">
                    <a href="#item2-1" class="ema-context-banner__link">Item 2.1</a>
                  </li>
                  <li class="ema-context-banner__item">
                    <a href="#item2-2" class="ema-context-banner__link">Item 2.2</a>
                  </li>
                  <li class="ema-context-banner__item">
                    <a href="#item2-3" class="ema-context-banner__link">Item 2.3</a>
                  </li>
                  <li class="ema-context-banner__item">
                    <a href="#item2-4" class="ema-context-banner__link">Item 2.4</a>
                  </li>
                  <li class="ema-context-banner__item">
                    <a href="#item2-5" class="ema-context-banner__link">Item 2.5</a>
                  </li>
                  <li class="ema-context-banner__item">
                    <a href="#item2-6" class="ema-context-banner__link">Item 2.6</a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </li>
      <li class="ecl-navigation-menu__item">
        <a href="#item3" class="ecl-navigation-menu__link">Item 3</a>
      </li>
    </ul>
  </div>
</nav>
  • Content: 
    /**
* EMA Navigation menu component
*/

.ecl-navigation-menu--ema {
  background-color: map-get($ema-colors, 'primary');

  .ecl-navigation-menu__group {
    flex-direction: column;
    padding: 0;
  }

  .ecl-navigation-menu__group::before {
    background-color: transparent;
    content: none;
    width: auto;
  }

  .ecl-navigation-menu__link {
    background-color: map-get($ema-colors, 'primary');
    color: #fff;
    font-size: map-get($ecl-font-size, 's');
    font-weight: normal;
  }

  .ecl-navigation-menu__item--active {
    background-color: map-get($ema-colors, 'primary');
  }

  .ecl-navigation-menu__item--active .ecl-navigation-menu__link::before {
    background-color: #fff;
    bottom: 0;
    content: '';
    display: block;
    height: 4px;
    left: 0;
    margin: 0;
    position: absolute;
    width: 100%;
  }

  .ecl-navigation-menu__link[aria-expanded='true'] {
    background-color: map-get($ema-colors, 'primary');
    color: #fff;
  }

  .ecl-navigation-menu__toggle {
    background-color: map-get($ema-colors, 'primary');
  }

  .ecl-navigation-menu__root::before,
  .ecl-navigation-menu__item--active::before {
    background-color: transparent;
  }

  .ema-context-banner {
    box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3);
    margin-left: -(map-get($ecl-spacing, 's'));
  }
}
  • URL: /components/raw/ema-navigation-menus/ema-navigation-menus.scss
  • Filesystem Path: framework/components/ema-navigation-menus/ema-navigation-menus.scss
  • Size: 1.3 KB
  • Handle: @ec-europa/ema-navigation-menus
  • Tags: organism
  • Preview:
  • Filesystem Path: framework/components/ema-navigation-menus/ema-navigation-menus.twig