Inpage navigation - Navigation

Heading 1

Aliqua est id irure eiusmod est eiusmod aliquip veniam qui id. Dolor sint culpa aliqua aute sint ex minim pariatur ea fugiat Lorem sunt. Sit labore duis Lorem aliqua ad eu commodo nostrud consectetur sint. Ut adipisicing ut fugiat aute cupidatat irure magna magna adipisicing incididunt. Quis laborum consectetur veniam sint officia laboris nulla reprehenderit. Nisi qui aute consectetur quis labore magna nulla officia proident consectetur cillum excepteur velit tempor. Eu dolore reprehenderit esse cupidatat dolore. Tempor sunt qui anim magna. Culpa dolore eu pariatur voluptate aute consectetur. Cillum quis sit nulla id ea deserunt eiusmod minim consequat laborum. Voluptate consectetur ullamco sit deserunt est labore. Mollit elit in duis laborum pariatur Lorem veniam nisi tempor. Elit ipsum in ad in sit exercitation reprehenderit do. Do occaecat do magna aliqua. Excepteur sunt id ea aute amet aliquip consectetur sunt Lorem laborum. Ullamco sit velit veniam laboris commodo consectetur aute in consectetur eiusmod. Lorem ea fugiat id reprehenderit deserunt aliqua ex dolor elit eiusmod qui et. Duis consectetur eiusmod ut ex nulla. Ut fugiat culpa ex nulla cillum culpa duis laboris culpa. Nisi veniam mollit velit eiusmod. Duis ad sit quis eu dolore irure cillum sunt aliqua eu. Et enim culpa incididunt Lorem Lorem ex dolore nulla aute laboris id sint quis quis. Dolor id laborum non proident amet in amet magna adipisicing dolore ut. Amet amet eiusmod veniam aliqua ut. Sunt nulla nisi amet duis sint amet reprehenderit irure fugiat ea non enim laboris.

Heading 2

Heading 3

Heading 4

Fullscreen

<header class="ecl-site-header" data-ecl-site-header="true">
  <div class="ecl-site-header__container ecl-container">
    <div class="ecl-site-header__banner"><a class="ecl-link ecl-link--standalone" href="/example"
        aria-label="European Commission"><img alt="European Commission logo" title="European Commission"
          class="ecl-site-header__logo-image" src="/dist/media/logo--en.30b933cc.svg" /></a>
      <div class="ecl-site-header__selector"><a class="ecl-link ecl-link--standalone ecl-site-header__selector-link"
          href="/example" data-ecl-language-selector="true">English<span class="ecl-site-header__language-icon"><svg
              focusable="false" aria-hidden="true" class="ecl-icon ecl-icon--m">
              <use xlink:href="/dist/media/icons.1dbe9812.svg#general--language"></use>
            </svg><span class="ecl-site-header__language-code">en</span></span></a>
        <div hidden="" class="ecl-language-list ecl-language-list--overlay" aria-labelledby="ecl-language-list__title"
          role="dialog" data-ecl-language-list-overlay="true">
          <div class="ecl-language-list__container ecl-container">
            <div class="ecl-row">
              <div class="ecl-language-list__close ecl-col-12 ecl-col-lg-8 ecl-offset-lg-2"><button
                  data-ecl-language-list-close="true" type="submit"
                  class="ecl-language-list__close-button ecl-button ecl-button--ghost"><span
                    class="ecl-button__container"><span class="ecl-button__label" data-ecl-label="true">Close</span><svg
                      focusable="false" aria-hidden="true" data-ecl-icon="true"
                      class="ecl-button__icon ecl-button__icon--after ecl-icon ecl-icon--s">
                      <use xlink:href="/dist/media/icons.1dbe9812.svg#ui--close"></use>
                    </svg></span></button></div>
              <div class="ecl-language-list__title ecl-col-12 ecl-col-lg-8 ecl-offset-lg-2"
                id="ecl-language-list__title"><svg focusable="false" aria-hidden="true"
                  class="ecl-language-list__title-icon ecl-icon ecl-icon--m">
                  <use xlink:href="/dist/media/icons.1dbe9812.svg#general--generic-lang"></use>
                </svg>Select your language</div>
            </div>
            <div class="ecl-row">
              <div class="ecl-language-list__column ecl-col-12 ecl-col-lg-4 ecl-offset-lg-2">
                <ul class="ecl-language-list__list">
                  <li class="ecl-language-list__item "><a lang="bg" hrefLang="bg" rel="alternate"
                      href="/example#language_bg"
                      class="ecl-language-list__link ecl-link ecl-link--standalone">български</a></li>
                  <li class="ecl-language-list__item "><a lang="es" hrefLang="es" rel="alternate"
                      href="/example#language_es"
                      class="ecl-language-list__link ecl-link ecl-link--standalone">español</a></li>
                  <li class="ecl-language-list__item "><a lang="cs" hrefLang="cs" rel="alternate"
                      href="/example#language_cs"
                      class="ecl-language-list__link ecl-link ecl-link--standalone">čeština</a></li>
                  <li class="ecl-language-list__item "><a lang="da" hrefLang="da" rel="alternate"
                      href="/example#language_da"
                      class="ecl-language-list__link ecl-link ecl-link--standalone">dansk</a></li>
                  <li class="ecl-language-list__item "><a lang="de" hrefLang="de" rel="alternate"
                      href="/example#language_de"
                      class="ecl-language-list__link ecl-link ecl-link--standalone">Deutsch</a></li>
                  <li class="ecl-language-list__item "><a lang="et" hrefLang="et" rel="alternate"
                      href="/example#language_et"
                      class="ecl-language-list__link ecl-link ecl-link--standalone">eesti</a></li>
                  <li class="ecl-language-list__item "><a lang="el" hrefLang="el" rel="alternate"
                      href="/example#language_el"
                      class="ecl-language-list__link ecl-link ecl-link--standalone">ελληνικά</a></li>
                  <li class="ecl-language-list__item ecl-language-list__item--is-active"><a lang="en" hrefLang="en"
                      rel="alternate" href="/example#language_en"
                      class="ecl-language-list__link ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-after"><span
                        class="ecl-link__label">English</span> <svg focusable="false" aria-hidden="true"
                        class="ecl-link__icon ecl-icon ecl-icon--xs">
                        <use xlink:href="/dist/media/icons.1dbe9812.svg#ui--check"></use>
                      </svg></a></li>
                  <li class="ecl-language-list__item "><a lang="fr" hrefLang="fr" rel="alternate"
                      href="/example#language_fr"
                      class="ecl-language-list__link ecl-link ecl-link--standalone">français</a></li>
                  <li class="ecl-language-list__item "><a lang="ga" hrefLang="ga" rel="alternate"
                      href="/example#language_ga"
                      class="ecl-language-list__link ecl-link ecl-link--standalone">Gaeilge</a></li>
                  <li class="ecl-language-list__item "><a lang="hr" hrefLang="hr" rel="alternate"
                      href="/example#language_hr"
                      class="ecl-language-list__link ecl-link ecl-link--standalone">hrvatski</a></li>
                  <li class="ecl-language-list__item "><a lang="it" hrefLang="it" rel="alternate"
                      href="/example#language_it"
                      class="ecl-language-list__link ecl-link ecl-link--standalone">italiano</a></li>
                </ul>
              </div>
              <div class="ecl-language-list__column ecl-col-12 ecl-col-lg-4">
                <ul class="ecl-language-list__list">
                  <li class="ecl-language-list__item "><a lang="lv" hrefLang="lv" rel="alternate"
                      href="/example#language_lv"
                      class="ecl-language-list__link ecl-link ecl-link--standalone">latviešu</a></li>
                  <li class="ecl-language-list__item "><a lang="lt" hrefLang="lt" rel="alternate"
                      href="/example#language_lt"
                      class="ecl-language-list__link ecl-link ecl-link--standalone">lietuvių</a></li>
                  <li class="ecl-language-list__item "><a lang="hu" hrefLang="hu" rel="alternate"
                      href="/example#language_hu"
                      class="ecl-language-list__link ecl-link ecl-link--standalone">magyar</a></li>
                  <li class="ecl-language-list__item "><a lang="mt" hrefLang="mt" rel="alternate"
                      href="/example#language_mt"
                      class="ecl-language-list__link ecl-link ecl-link--standalone">Malti</a></li>
                  <li class="ecl-language-list__item "><a lang="nl" hrefLang="nl" rel="alternate"
                      href="/example#language_nl"
                      class="ecl-language-list__link ecl-link ecl-link--standalone">Nederlands</a></li>
                  <li class="ecl-language-list__item "><a lang="pl" hrefLang="pl" rel="alternate"
                      href="/example#language_pl"
                      class="ecl-language-list__link ecl-link ecl-link--standalone">polski</a></li>
                  <li class="ecl-language-list__item "><a lang="pt" hrefLang="pt" rel="alternate"
                      href="/example#language_pt"
                      class="ecl-language-list__link ecl-link ecl-link--standalone">português</a></li>
                  <li class="ecl-language-list__item "><a lang="ro" hrefLang="ro" rel="alternate"
                      href="/example#language_ro"
                      class="ecl-language-list__link ecl-link ecl-link--standalone">română</a></li>
                  <li class="ecl-language-list__item "><a lang="sk" hrefLang="sk" rel="alternate"
                      href="/example#language_sk"
                      class="ecl-language-list__link ecl-link ecl-link--standalone">slovenčina</a></li>
                  <li class="ecl-language-list__item "><a lang="sl" hrefLang="sl" rel="alternate"
                      href="/example#language_sl"
                      class="ecl-language-list__link ecl-link ecl-link--standalone">slovenščina</a></li>
                  <li class="ecl-language-list__item "><a lang="fi" hrefLang="fi" rel="alternate"
                      href="/example#language_fi"
                      class="ecl-language-list__link ecl-link ecl-link--standalone">suomi</a></li>
                  <li class="ecl-language-list__item "><a lang="sv" hrefLang="sv" rel="alternate"
                      href="/example#language_sv"
                      class="ecl-language-list__link ecl-link ecl-link--standalone">svenska</a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <form class="ecl-site-header__search ecl-search-form" role="search">
      <div class="ecl-form-group ecl-form-group--text-input"><label class="ecl-search-form__label ecl-form-label"
          for="search-form">Search</label><input type="search" id="search-form"
          class="ecl-search-form__text-input ecl-text-input" /></div><button aria-label="Search" type="submit"
        class="ecl-search-form__button ecl-button ecl-button--search"><span class="ecl-button__container"><span
            class="ecl-button__label" data-ecl-label="true">Search</span><svg focusable="false" aria-hidden="true"
            data-ecl-icon="true" class="ecl-button__icon ecl-button__icon--after ecl-icon ecl-icon--xs">
            <use xlink:href="/dist/media/icons.1dbe9812.svg#general--search"></use>
          </svg></span></button>
    </form>
  </div>
</header>
<div class="ecl-page-header">
  <div class="ecl-container">
    <nav class="ecl-page-header__breadcrumb ecl-breadcrumb" aria-label="You are here:" data-ecl-breadcrumb="true">
      <ol class="ecl-breadcrumb__container">
        <li class="ecl-breadcrumb__segment" data-ecl-breadcrumb-item="static" aria-hidden="false"><a href="/example"
            class="ecl-breadcrumb__link ecl-link ecl-link--standalone">Home</a><svg focusable="false" aria-hidden="true"
            role="presentation" class="ecl-breadcrumb__icon ecl-icon ecl-icon--xs ecl-icon--rotate-90">
            <use xlink:href="/dist/media/icons.1dbe9812.svg#ui--corner-arrow"></use>
          </svg></li>
        <li class="ecl-breadcrumb__segment" data-ecl-breadcrumb-item="static" aria-hidden="false"><a href="/example"
            class="ecl-breadcrumb__link ecl-link ecl-link--standalone">About the European Commission</a><svg
            focusable="false" aria-hidden="true" role="presentation"
            class="ecl-breadcrumb__icon ecl-icon ecl-icon--xs ecl-icon--rotate-90">
            <use xlink:href="/dist/media/icons.1dbe9812.svg#ui--corner-arrow"></use>
          </svg></li>
        <li class="ecl-breadcrumb__segment ecl-breadcrumb__current-page" aria-current="page"
          data-ecl-breadcrumb-item="static" aria-hidden="false">News</li>
      </ol>
    </nav>
    <h1 class="ecl-page-header__title">A demo page</h1>
  </div>
</div>
<div class="ecl-container">
  <div class="ecl-row ecl-u-mt-l">
    <div class="ecl-col-lg-3">
      <nav class="ecl-inpage-navigation" data-ecl-inpage-navigation="true">
        <div class="ecl-inpage-navigation__title">Page contents</div>
        <div class="ecl-inpage-navigation__body"><button type="button" class="ecl-inpage-navigation__trigger"
            id="ecl-inpage-navigation-trigger" data-ecl-inpage-navigation-trigger="true"
            aria-controls="ecl-inpage-navigation-list" aria-expanded="false"><span
              class="ecl-inpage-navigation__trigger-current"
              data-ecl-inpage-navigation-trigger-current="true"> </span><svg focusable="false" aria-hidden="true"
              class="ecl-inpage-navigation__trigger-icon ecl-icon ecl-icon--s ecl-icon--rotate-180">
              <use xlink:href="/dist/media/icons.1dbe9812.svg#ui--corner-arrow"></use>
            </svg></button>
          <ul class="ecl-inpage-navigation__list" hidden="" aria-labelledby="ecl-inpage-navigation-trigger"
            data-ecl-inpage-navigation-list="true" id="ecl-inpage-navigation-list">
            <li class="ecl-inpage-navigation__item"><a data-ecl-inpage-navigation-link="true" href="#inline-nav-1"
                class="ecl-inpage-navigation__link ecl-link ecl-link--standalone">Heading 1</a></li>
            <li class="ecl-inpage-navigation__item"><a data-ecl-inpage-navigation-link="true" href="#inline-nav-2"
                class="ecl-inpage-navigation__link ecl-link ecl-link--standalone">Heading 2</a></li>
            <li class="ecl-inpage-navigation__item"><a data-ecl-inpage-navigation-link="true" href="#inline-nav-3"
                class="ecl-inpage-navigation__link ecl-link ecl-link--standalone">Heading 3</a></li>
            <li class="ecl-inpage-navigation__item"><a data-ecl-inpage-navigation-link="true" href="#inline-nav-4"
                class="ecl-inpage-navigation__link ecl-link ecl-link--standalone">Heading 4</a></li>
          </ul>
        </div>
      </nav>
    </div>
    <div class="ecl-col-lg-9">
      <h2 class="ecl-u-type-heading-2" id="inline-nav-1">Heading 1</h2>
      <p class="ecl-u-type-paragraph-m">Esse ut minim elit reprehenderit ipsum ea commodo. Enim duis id ut cillum sit
        est adipisicing tempor. Est magna nostrud reprehenderit laborum fugiat et voluptate mollit amet velit ipsum
        Lorem. Tempor occaecat ut in nisi minim. Exercitation excepteur aliquip elit anim nostrud veniam et qui nisi
        aliquip nisi nulla magna adipisicing. Reprehenderit eiusmod non pariatur aute aliqua enim irure aliqua elit enim
        eiusmod ex esse. Sint anim nostrud duis eu proident. Duis incididunt est officia aliquip elit cillum ad est
        velit excepteur. Duis excepteur culpa commodo dolore minim enim irure non tempor. Elit sint dolore aute proident
        ipsum aliqua labore eiusmod velit et cupidatat velit enim. Fugiat reprehenderit commodo ad deserunt voluptate
        veniam anim ea incididunt commodo commodo incididunt. Duis consectetur minim velit aliquip ut et elit nisi
        eiusmod amet exercitation quis ullamco quis. Fugiat commodo eiusmod qui ut officia proident esse non enim
        voluptate aliquip aliqua. Officia minim reprehenderit amet proident enim minim adipisicing. Ut dolore mollit eu
        sunt aliquip in tempor et commodo duis exercitation fugiat cillum ad. Ullamco consectetur elit nulla in ex
        nostrud. Aliquip officia laboris enim ad ipsum officia ut proident. Cillum qui reprehenderit aliquip ad ex dolor
        duis deserunt reprehenderit. Laboris velit do nisi aute do nisi amet. Dolore est adipisicing minim sunt aute
        mollit fugiat incididunt mollit est minim. Cillum proident eiusmod culpa nisi. Deserunt ullamco officia
        incididunt irure aliquip voluptate. Ad magna voluptate magna sint exercitation ullamco commodo ut est aliqua
        sint mollit officia. Aliqua voluptate do culpa Lorem. Irure quis ut velit eu culpa duis eiusmod ea irure
        voluptate ex ea.</p>
      <h2 class="ecl-u-type-heading-2" id="inline-nav-2">Heading 2</h2>
      <p class="ecl-u-type-paragraph-m">Esse ut minim elit reprehenderit ipsum ea commodo. Enim duis id ut cillum sit
        est adipisicing tempor. Est magna nostrud reprehenderit laborum fugiat et voluptate mollit amet velit ipsum
        Lorem. Tempor occaecat ut in nisi minim. Exercitation excepteur aliquip elit anim nostrud veniam et qui nisi
        aliquip nisi nulla magna adipisicing. Reprehenderit eiusmod non pariatur aute aliqua enim irure aliqua elit enim
        eiusmod ex esse. Sint anim nostrud duis eu proident. Duis incididunt est officia aliquip elit cillum ad est
        velit excepteur. Duis excepteur culpa commodo dolore minim enim irure non tempor. Elit sint dolore aute proident
        ipsum aliqua labore eiusmod velit et cupidatat velit enim. Fugiat reprehenderit commodo ad deserunt voluptate
        veniam anim ea incididunt commodo commodo incididunt. Duis consectetur minim velit aliquip ut et elit nisi
        eiusmod amet exercitation quis ullamco quis. Fugiat commodo eiusmod qui ut officia proident esse non enim
        voluptate aliquip aliqua. Officia minim reprehenderit amet proident enim minim adipisicing. Ut dolore mollit eu
        sunt aliquip in tempor et commodo duis exercitation fugiat cillum ad. Ullamco consectetur elit nulla in ex
        nostrud. Aliquip officia laboris enim ad ipsum officia ut proident. Cillum qui reprehenderit aliquip ad ex dolor
        duis deserunt reprehenderit. Laboris velit do nisi aute do nisi amet. Dolore est adipisicing minim sunt aute
        mollit fugiat incididunt mollit est minim. Cillum proident eiusmod culpa nisi. Deserunt ullamco officia
        incididunt irure aliquip voluptate. Ad magna voluptate magna sint exercitation ullamco commodo ut est aliqua
        sint mollit officia. Aliqua voluptate do culpa Lorem. Irure quis ut velit eu culpa duis eiusmod ea irure
        voluptate ex ea.</p>
      <h2 class="ecl-u-type-heading-2" id="inline-nav-3">Heading 3</h2>
      <p class="ecl-u-type-paragraph-m">Esse ut minim elit reprehenderit ipsum ea commodo. Enim duis id ut cillum sit
        est adipisicing tempor. Est magna nostrud reprehenderit laborum fugiat et voluptate mollit amet velit ipsum
        Lorem. Tempor occaecat ut in nisi minim. Exercitation excepteur aliquip elit anim nostrud veniam et qui nisi
        aliquip nisi nulla magna adipisicing. Reprehenderit eiusmod non pariatur aute aliqua enim irure aliqua elit enim
        eiusmod ex esse. Sint anim nostrud duis eu proident. Duis incididunt est officia aliquip elit cillum ad est
        velit excepteur. Duis excepteur culpa commodo dolore minim enim irure non tempor. Elit sint dolore aute proident
        ipsum aliqua labore eiusmod velit et cupidatat velit enim. Fugiat reprehenderit commodo ad deserunt voluptate
        veniam anim ea incididunt commodo commodo incididunt. Duis consectetur minim velit aliquip ut et elit nisi
        eiusmod amet exercitation quis ullamco quis. Fugiat commodo eiusmod qui ut officia proident esse non enim
        voluptate aliquip aliqua. Officia minim reprehenderit amet proident enim minim adipisicing. Ut dolore mollit eu
        sunt aliquip in tempor et commodo duis exercitation fugiat cillum ad. Ullamco consectetur elit nulla in ex
        nostrud. Aliquip officia laboris enim ad ipsum officia ut proident. Cillum qui reprehenderit aliquip ad ex dolor
        duis deserunt reprehenderit. Laboris velit do nisi aute do nisi amet. Dolore est adipisicing minim sunt aute
        mollit fugiat incididunt mollit est minim. Cillum proident eiusmod culpa nisi. Deserunt ullamco officia
        incididunt irure aliquip voluptate. Ad magna voluptate magna sint exercitation ullamco commodo ut est aliqua
        sint mollit officia. Aliqua voluptate do culpa Lorem. Irure quis ut velit eu culpa duis eiusmod ea irure
        voluptate ex ea.</p>
      <h2 class="ecl-u-type-heading-2" id="inline-nav-4">Heading 4</h2>
      <p class="ecl-u-type-paragraph-m">Esse ut minim elit reprehenderit ipsum ea commodo. Enim duis id ut cillum sit
        est adipisicing tempor. Est magna nostrud reprehenderit laborum fugiat et voluptate mollit amet velit ipsum
        Lorem. Tempor occaecat ut in nisi minim. Exercitation excepteur aliquip elit anim nostrud veniam et qui nisi
        aliquip nisi nulla magna adipisicing. Reprehenderit eiusmod non pariatur aute aliqua enim irure aliqua elit enim
        eiusmod ex esse. Sint anim nostrud duis eu proident. Duis incididunt est officia aliquip elit cillum ad est
        velit excepteur. Duis excepteur culpa commodo dolore minim enim irure non tempor. Elit sint dolore aute proident
        ipsum aliqua labore eiusmod velit et cupidatat velit enim. Fugiat reprehenderit commodo ad deserunt voluptate
        veniam anim ea incididunt commodo commodo incididunt. Duis consectetur minim velit aliquip ut et elit nisi
        eiusmod amet exercitation quis ullamco quis. Fugiat commodo eiusmod qui ut officia proident esse non enim
        voluptate aliquip aliqua. Officia minim reprehenderit amet proident enim minim adipisicing. Ut dolore mollit eu
        sunt aliquip in tempor et commodo duis exercitation fugiat cillum ad. Ullamco consectetur elit nulla in ex
        nostrud. Aliquip officia laboris enim ad ipsum officia ut proident. Cillum qui reprehenderit aliquip ad ex dolor
        duis deserunt reprehenderit. Laboris velit do nisi aute do nisi amet. Dolore est adipisicing minim sunt aute
        mollit fugiat incididunt mollit est minim. Cillum proident eiusmod culpa nisi. Deserunt ullamco officia
        incididunt irure aliquip voluptate. Ad magna voluptate magna sint exercitation ullamco commodo ut est aliqua
        sint mollit officia. Aliqua voluptate do culpa Lorem. Irure quis ut velit eu culpa duis eiusmod ea irure
        voluptate ex ea.</p>
    </div>
  </div>
</div>
<footer class="ecl-footer">
  <div class="ecl-footer__sections">
    <div class="ecl-container">
      <div class="ecl-row">
        <section class="ecl-footer__section ecl-col-12 ecl-col-md-4">
          <h1 class="ecl-footer__section-title">European Commission</h1>
          <ul class="ecl-footer__section-list">
            <li class="ecl-footer__section-item"><a href="/example"
                class="ecl-footer__section-link ecl-link ecl-link--standalone">European Commission website</a></li>
          </ul>
        </section>
        <section class="ecl-footer__section ecl-col-12 ecl-col-md-4">
          <h1 class="ecl-footer__section-title">Follow the European Commission</h1>
          <ul class="ecl-footer__section-list ecl-footer__section-list--inline">
            <li class="ecl-footer__section-item"><a href="/example"
                class="ecl-footer__section-link ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-before"><svg
                  focusable="false" aria-hidden="true" class="ecl-link__icon ecl-icon ecl-icon--xs">
                  <use xlink:href="/dist/media/icons.1dbe9812.svg#branded--facebook"></use>
                </svg> <span class="ecl-link__label">Facebook</span></a></li>
            <li class="ecl-footer__section-item"><a href="/example"
                class="ecl-footer__section-link ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-before"><svg
                  focusable="false" aria-hidden="true" class="ecl-link__icon ecl-icon ecl-icon--xs">
                  <use xlink:href="/dist/media/icons.1dbe9812.svg#branded--twitter"></use>
                </svg> <span class="ecl-link__label">Twitter</span></a></li>
            <li class="ecl-footer__section-item"><a href="/example"
                class="ecl-footer__section-link ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-after"><span
                  class="ecl-link__label">Other social networks</span> <svg focusable="false" aria-hidden="true"
                  class="ecl-link__icon ecl-icon ecl-icon--xs">
                  <use xlink:href="/dist/media/icons.1dbe9812.svg#ui--external"></use>
                </svg></a></li>
          </ul>
        </section>
        <section class="ecl-footer__section ecl-col-12 ecl-col-md-4">
          <h1 class="ecl-footer__section-title">European Union</h1>
          <ul class="ecl-footer__section-list">
            <li class="ecl-footer__section-item"><a href="/example"
                class="ecl-footer__section-link ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-after"><span
                  class="ecl-link__label">European Union</span> <svg focusable="false" aria-hidden="true"
                  class="ecl-link__icon ecl-icon ecl-icon--xs">
                  <use xlink:href="/dist/media/icons.1dbe9812.svg#ui--external"></use>
                </svg></a></li>
            <li class="ecl-footer__section-item"><a href="/example"
                class="ecl-footer__section-link ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-after"><span
                  class="ecl-link__label">EU institutions</span> <svg focusable="false" aria-hidden="true"
                  class="ecl-link__icon ecl-icon ecl-icon--xs">
                  <use xlink:href="/dist/media/icons.1dbe9812.svg#ui--external"></use>
                </svg></a></li>
          </ul>
        </section>
      </div>
    </div>
  </div>
  <div class="ecl-footer__common">
    <div class="ecl-container ecl-footer__common-container"><a href="/example"
        class="ecl-footer__common-link ecl-link ecl-link--standalone">About the Commission&#x27;s new web presence</a><a
        href="/example" class="ecl-footer__common-link ecl-link ecl-link--standalone">Language policy</a><a
        href="/example" class="ecl-footer__common-link ecl-link ecl-link--standalone">Resources for partners</a><a
        href="/example" class="ecl-footer__common-link ecl-link ecl-link--standalone">Cookies</a><a href="/example"
        class="ecl-footer__common-link ecl-link ecl-link--standalone">Privacy policy</a><a href="/example"
        class="ecl-footer__common-link ecl-link ecl-link--standalone">Legal notice</a><a href="/example"
        class="ecl-footer__common-link ecl-link ecl-link--standalone">Contact</a></div>
  </div>
</footer>

Try it yourself on the playground

Playground

JS behaviour

Auto initialisation

In order to automatically initalise the JS behaviour, add data-ecl-auto-init="InpageNavigation" to your component's markup:

<nav
  class="ecl-inpage-navigation"
  data-ecl-inpage-navigation
  data-ecl-auto-init="InpageNavigation"
>
  ...
</nav>

Don't forget to call ECL.autoInit() when your page is ready!

Manual initialisation

When the document is ready, query the element. For example, you can use document.querySelector('[data-ecl-inpage-navigation]') if you only have 1 inpage navigation in the page.

Then, instantiate the InpageNavigation component and call init():

var elt = document.querySelector('[data-ecl-inpage-navigation]');
var inpageNavigation = new ECL.InpageNavigation(elt);
inpageNavigation.init();