EU System

Context navigations

Documentation • Demo

Context Navigations

Why and how to use this component

Users need a way to navigate and explore the context of the information on the current page.

When to use this component

Context navigation is placed:

  • near the top of the page, below the title. It is placed there in case the context is crucial to interpret the page content.
  • near the bottom of the page. That way it serves as a next step, for example as a next step to other content within the same context.
{#
  Parameters:
    - "label" (string)  (default: ''): label displayed before the list
    - "items" (array): array of contexts of "@ecl/eu-component-link"
    - "limit" (integer) (default: 5): max number of items to display (0 = display all)
    - "more_label" (string) (default: "More"): label of the "see more items" button
    - "extra_classes" (string) (default: '')
    - "extra_attributes" (array) (default: []): format: [
        {
          "name" (string) (default: ''),
          "value" (string) (default: '')
        },
        ...
      ]
    - "system" (string) (default: "generic")
#}

{% include '@ecl/generic-component-context-nav' with { system: 'eu' } %}
 
{
  "_demo": {
    "scripts": "document.addEventListener('DOMContentLoaded', function () { ECL.contextualNavs(); });"
  },
  "label": "Label for context nav",
  "items": [
    {
      "href": "../../example.html#",
      "label": "Item one"
    },
    {
      "href": "../../example.html#",
      "label": "Item two"
    },
    {
      "href": "../../example.html#",
      "label": "Item three"
    },
    {
      "href": "../../example.html#",
      "label": "Item four"
    },
    {
      "href": "../../example.html#",
      "label": "Item five"
    },
    {
      "href": "../../example.html#",
      "label": "Item six"
    },
    {
      "href": "../../example.html#",
      "label": "Item seven"
    }
  ]
}
 
<div class="ecl-context-nav">
  <span class="ecl-context-nav__label">Label for context nav</span>
  <ul class="ecl-context-nav__list">
    <li class="ecl-context-nav__item">

      <a class="ecl-link ecl-link--standalone" href="../../example.html#">Item one</a>
    </li>
    <li class="ecl-context-nav__item">

      <a class="ecl-link ecl-link--standalone" href="../../example.html#">Item two</a>
    </li>
    <li class="ecl-context-nav__item">

      <a class="ecl-link ecl-link--standalone" href="../../example.html#">Item three</a>
    </li>
    <li class="ecl-context-nav__item">

      <a class="ecl-link ecl-link--standalone" href="../../example.html#">Item four</a>
    </li>
    <li class="ecl-context-nav__item ecl-context-nav__item--over-limit">

      <a class="ecl-link ecl-link--standalone" href="../../example.html#">Item five</a>
    </li>
    <li class="ecl-context-nav__item ecl-context-nav__item--over-limit">

      <a class="ecl-link ecl-link--standalone" href="../../example.html#">Item six</a>
    </li>
    <li class="ecl-context-nav__item ecl-context-nav__item--over-limit">

      <a class="ecl-link ecl-link--standalone" href="../../example.html#">Item seven</a>
    </li>
    <li class="ecl-context-nav__item ecl-context-nav__more">

      <button type="submit" class="ecl-button ecl-button--none ecl-button--caret-right ecl-context-nav__button ecl-link ecl-link--standalone">More</button>
    </li>
  </ul>
</div>
  • Content: 
    /**
 * Context navigation scripts
 */

import { queryAll } from '@ecl/eu-base/helpers/dom';

const expandContextualNav = (
  contextualNav,
  button,
  {
    classToRemove = 'ecl-context-nav__item--over-limit',
    hiddenElementsSelector = '.ecl-context-nav__item--over-limit',
    context = document,
  } = {}
) => {
  if (!contextualNav) {
    return;
  }

  const hiddenElements = queryAll(hiddenElementsSelector, context);

  // Remove extra class
  hiddenElements.forEach(element => {
    element.classList.remove(classToRemove);
  });

  // Remove buttton
  button.parentNode.removeChild(button);
};

// Helper method to automatically attach the event listener to all the expandables on page load
export const contextualNavs = ({
  selector = '.ecl-context-nav',
  buttonSelector = '.ecl-context-nav__more',
  hiddenElementsSelector = '.ecl-context-nav__item--over-limit',
  classToRemove = 'ecl-context-nav__item--over-limit',
  context = document,
} = {}) => {
  const nodesArray = queryAll(selector, context);

  nodesArray.forEach(node => {
    const button = context.querySelector(buttonSelector);

    if (button) {
      button.addEventListener('click', () =>
        expandContextualNav(node, button, {
          classToRemove,
          hiddenElementsSelector,
        })
      );
    }
  });
};

export default contextualNavs;
  • URL: /components/raw/eu-component-context-nav/eu-component-context-nav.js
  • Filesystem Path: ../../src/systems/eu/eu-component/eu-component-context-nav/eu-component-context-nav.js
  • Size: 1.3 KB
  • Content: 
    /*
 * Context navigation
 * @define context-nav
 */

// Import base and generic
@import '@ecl/eu-base/eu-base';
@import '@ecl/generic-component-context-nav/generic-component-context-nav';

// Check if overridden dependencies are already loaded, if needed
@include check-imports(('eu-component-button', 'eu-component-link'));

// Use generic mixin
@include exports('eu-component-context-nav') {
  @include ecl-context-nav();
}
  • URL: /components/raw/eu-component-context-nav/eu-component-context-nav.scss
  • Filesystem Path: ../../src/systems/eu/eu-component/eu-component-context-nav/eu-component-context-nav.scss
  • Size: 426 Bytes
  • Handle: @ecl/eu-component-context-nav
  • Tags: atom
  • Preview:
  • Filesystem Path: ../../src/systems/eu/eu-component/eu-component-context-nav/eu-component-context-nav.twig