Europa Component Library

Navigation lists

Documentation • Demo

Navigation lists

Default

The default navigation pattern.

Tabs

Tabbed navigation.

Small

Smaller navigation list

{#
  - title (string): the title of the navigation (default: 'Navigation')
  - variant (string): the variant. Can be 'default' or 'tabs' (default: 'default')
  - links (array): [
    - "href" (string): target of the link
    - "label" (string): label of the link
    - "is_active" (boolean): set active link
  ]
  - "extra_classes" (string): extra CSS classes to be added
  - "extra_attributes" (array): extra attributes classes (optional, format: [{ 'name': 'name_of_the_attribute', 'value': 'value_of_the_attribute'}])
#}

{# Internal properties #}

{% set _css_class = 'ecl-navigation-list-wrapper' %}
{% set _extra_attributes = '' %}

{# Internal logic - Process properties #}

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

{% if extra_attributes is defined %}
  {% for attr in extra_attributes %}
    {% set _extra_attributes = _extra_attributes ~ ' ' ~ attr.name ~ '="' ~ attr.value ~ '"' %}
  {% endfor %}
{% endif %}

{# Print result #}

<nav class="{{ _css_class }}" {{ _extra_attributes|raw }}>
  <h2 class="ecl-u-sr-only">{{ title|default('Navigation') }}</h2>
  <ul class="ecl-navigation-list ecl-navigation-list--{{ variant|default('default') }}">
    {% for link in links %}
      {% set _active_class = link.is_active is defined and link.is_active == true ? ' ecl-navigation-list__link--active' : '' %}
      <li class="ecl-navigation-list__item">
        {% include '@ec-europa/ecl-links' with {
          'extra_classes': 'ecl-navigation-list__link' ~ _active_class,
          }|merge(link)
        %}
      </li>
    {% endfor %}
  </ul>
</nav>
 
/* Default */
{
  "variant": "default",
  "title": "Default Navigation Menu",
  "links": [
    {
      "href": "#",
      "label": "Home"
    },
    {
      "href": "#",
      "label": "About Us",
      "is_active": true
    },
    {
      "href": "#",
      "label": "More Information"
    },
    {
      "href": "#",
      "label": "Contact Us"
    }
  ]
}


/* Tabs */
{
  "variant": "tabs",
  "title": "Tabs Navigation Menu",
  "links": [
    {
      "href": "#",
      "label": "Home"
    },
    {
      "href": "#",
      "label": "About Us",
      "is_active": true
    },
    {
      "href": "#",
      "label": "More Information"
    },
    {
      "href": "#",
      "label": "Contact Us"
    }
  ]
}


/* Small */
{
  "variant": "small",
  "title": "Small Navigation Menu",
  "links": [
    {
      "href": "#",
      "label": "Home"
    },
    {
      "href": "#",
      "label": "About Us",
      "is_active": true
    },
    {
      "href": "#",
      "label": "More Information"
    },
    {
      "href": "#",
      "label": "Contact Us"
    }
  ]
}


<!-- Default -->
<nav class="ecl-navigation-list-wrapper">
  <h2 class="ecl-u-sr-only">Default Navigation Menu</h2>
  <ul class="ecl-navigation-list ecl-navigation-list--default">
    <li class="ecl-navigation-list__item">

      <a class="ecl-link ecl-link--default ecl-navigation-list__link" href="#">Home</a>
    </li>
    <li class="ecl-navigation-list__item">

      <a class="ecl-link ecl-link--default ecl-navigation-list__link ecl-navigation-list__link--active" href="#">About Us</a>
    </li>
    <li class="ecl-navigation-list__item">

      <a class="ecl-link ecl-link--default ecl-navigation-list__link" href="#">More Information</a>
    </li>
    <li class="ecl-navigation-list__item">

      <a class="ecl-link ecl-link--default ecl-navigation-list__link" href="#">Contact Us</a>
    </li>
  </ul>
</nav>


<!-- Tabs -->
<nav class="ecl-navigation-list-wrapper">
  <h2 class="ecl-u-sr-only">Tabs Navigation Menu</h2>
  <ul class="ecl-navigation-list ecl-navigation-list--tabs">
    <li class="ecl-navigation-list__item">

      <a class="ecl-link ecl-link--tabs ecl-navigation-list__link" href="#">Home</a>
    </li>
    <li class="ecl-navigation-list__item">

      <a class="ecl-link ecl-link--tabs ecl-navigation-list__link ecl-navigation-list__link--active" href="#">About Us</a>
    </li>
    <li class="ecl-navigation-list__item">

      <a class="ecl-link ecl-link--tabs ecl-navigation-list__link" href="#">More Information</a>
    </li>
    <li class="ecl-navigation-list__item">

      <a class="ecl-link ecl-link--tabs ecl-navigation-list__link" href="#">Contact Us</a>
    </li>
  </ul>
</nav>


<!-- Small -->
<nav class="ecl-navigation-list-wrapper">
  <h2 class="ecl-u-sr-only">Small Navigation Menu</h2>
  <ul class="ecl-navigation-list ecl-navigation-list--small">
    <li class="ecl-navigation-list__item">

      <a class="ecl-link ecl-link--small ecl-navigation-list__link" href="#">Home</a>
    </li>
    <li class="ecl-navigation-list__item">

      <a class="ecl-link ecl-link--small ecl-navigation-list__link ecl-navigation-list__link--active" href="#">About Us</a>
    </li>
    <li class="ecl-navigation-list__item">

      <a class="ecl-link ecl-link--small ecl-navigation-list__link" href="#">More Information</a>
    </li>
    <li class="ecl-navigation-list__item">

      <a class="ecl-link ecl-link--small ecl-navigation-list__link" href="#">Contact Us</a>
    </li>
  </ul>
</nav>
  • Content: 
    /**
 * ECL Navigation
 * @define navigation-list
 */

$ecl-navigation-border-width: 2px !default;

.ecl-navigation-list {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.ecl-navigation-list__item {
  flex-shrink: 0;
}

.ecl-navigation-list__link {
  border-bottom: $ecl-navigation-border-width solid transparent;
  display: block;
  font-weight: bold;
  padding: map-get($ecl-spacing, 'xs') map-get($ecl-spacing, 's');
  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }

  &:focus {
    background-color: $ecl-color-secondary;
    border-bottom-color: $ecl-color-secondary;
  }
}

.ecl-navigation-list__link--active,
.ecl-navigation-list__link[aria-selected='true'] {
  color: $ecl-color-shade;

  &:hover {
    text-decoration: none;
  }
}

/**
 * Variants
 */

// Tabs

.ecl-navigation-list--tabs {
  border-bottom: $ecl-navigation-border-width solid
    map-get($ecl-colors, 'grey-50');
}

.ecl-navigation-list--tabs .ecl-navigation-list__item {
  margin-bottom: -$ecl-navigation-border-width;
}

.ecl-navigation-list--tabs .ecl-navigation-list__link--active,
.ecl-navigation-list--tabs .ecl-navigation-list__link[aria-selected='true'] {
  border: $ecl-navigation-border-width solid map-get($ecl-colors, 'grey-50');
  border-bottom-color: #fff;
  text-decoration: none;

  &:focus {
    border-bottom-color: transparent;
  }
}

// Small

.ecl-navigation-list--small .ecl-navigation-list__link {
  border-bottom-width: 0;
  font-size: map-get($ecl-font-size, 's');
  font-weight: normal;
  line-height: 1.3;
  padding: map-get($ecl-spacing, 'xxs');
}
  • URL: /components/raw/ecl-navigation-lists/_navigation.scss
  • Filesystem Path: framework/components/ecl-navigation/ecl-navigation-lists/_navigation.scss
  • Size: 1.6 KB
  • Handle: @ec-europa/ecl-navigation-lists
  • Tags: organism
  • Preview:
  • Filesystem Path: framework/components/ecl-navigation/ecl-navigation-lists/ecl-navigation-lists.twig