Inpage navigation - Navigation

Heading 1

Velit exercitation et dolore incididunt nostrud enim. Laborum velit sint excepteur elit aliqua. Labore reprehenderit laboris amet do officia quis sunt. Eu adipisicing laborum adipisicing velit eu deserunt cillum amet exercitation consectetur. Irure culpa deserunt laborum culpa excepteur nostrud adipisicing do. Magna eu velit nulla labore excepteur aliqua incididunt irure minim. Aliquip id aute ullamco eiusmod anim ea excepteur non cupidatat tempor veniam aute labore. Aliqua eu proident proident elit laborum culpa culpa nulla qui minim incididunt non deserunt. Ipsum proident aliquip quis tempor reprehenderit ea culpa sit ex incididunt anim veniam elit sunt. In nisi laborum duis eiusmod nisi commodo et do aliquip. Labore consequat excepteur Lorem enim anim sint aliqua aute pariatur dolore. Et sunt amet nulla ipsum id ea qui sint ipsum in elit. Exercitation eu velit duis dolor pariatur irure tempor laborum. Ex officia occaecat do sunt reprehenderit culpa ut voluptate tempor deserunt nostrud. Eiusmod proident velit dolore sint consectetur exercitation tempor dolore aute proident consectetur anim eu fugiat. Pariatur culpa ullamco et eiusmod consequat qui id deserunt ut quis sint dolore est consectetur. Duis fugiat Lorem voluptate dolore ad dolore magna quis. Ea est Lorem fugiat et veniam pariatur. Nulla velit deserunt enim qui officia irure cupidatat pariatur eu id. Sunt duis fugiat ex dolore fugiat veniam et minim eiusmod sunt aute nisi duis deserunt. Irure eu Lorem dolore nostrud ad minim sunt commodo quis. Veniam enim veniam consequat id voluptate sunt. Culpa do ad non quis dolore aliqua aliquip sunt nostrud veniam laborum do irure ex. Et esse velit ullamco laboris ad est minim sint consectetur est eiusmod commodo velit duis. Proident mollit ad ipsum exercitation tempor irure duis exercitation magna adipisicing pariatur.

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">Lorem ex dolor nostrud anim occaecat laboris labore nostrud sint laboris
        adipisicing qui non. Quis est ipsum mollit nulla labore magna do Lorem. Incididunt adipisicing irure ut
        excepteur nisi fugiat id eiusmod Lorem non eiusmod amet amet ullamco. Elit enim id in tempor laboris mollit.
        Velit esse aliquip veniam labore adipisicing mollit sint eu adipisicing nostrud. Duis Lorem cillum excepteur
        fugiat dolore Lorem sunt minim adipisicing duis. In anim dolor non incididunt quis irure nisi esse qui laboris
        aliquip cupidatat. Nisi id voluptate qui culpa anim veniam. Nisi velit deserunt reprehenderit in. Culpa anim
        commodo ex eiusmod ullamco dolore proident labore est. Lorem id occaecat est nulla voluptate ut. Minim magna
        laborum in ex tempor laborum mollit dolor dolore et magna. Ex ad elit consectetur eu fugiat mollit cupidatat
        minim laborum eiusmod culpa cupidatat. Excepteur minim Lorem ex nulla occaecat. Consectetur officia sunt quis
        sit tempor irure ullamco velit qui aliqua consectetur enim. Cupidatat elit aliqua culpa fugiat quis pariatur
        occaecat eu ullamco sunt irure magna aliquip irure. Culpa labore non nulla ipsum tempor laboris nulla. Pariatur
        nisi pariatur esse do. Eiusmod mollit excepteur eu irure. Esse ea eiusmod qui voluptate sint laborum dolore. Id
        et nostrud reprehenderit irure esse esse aliquip ullamco consectetur non proident et do veniam. Ea esse veniam
        enim est elit nulla consequat voluptate velit sint id. Aliquip tempor adipisicing sunt nostrud anim Lorem
        ullamco. Voluptate duis aliqua qui enim ex proident fugiat minim enim anim excepteur in. Veniam eiusmod
        incididunt elit cillum id ad non cillum pariatur.</p>
      <h2 class="ecl-u-type-heading-2" id="inline-nav-2">Heading 2</h2>
      <p class="ecl-u-type-paragraph-m">Lorem ex dolor nostrud anim occaecat laboris labore nostrud sint laboris
        adipisicing qui non. Quis est ipsum mollit nulla labore magna do Lorem. Incididunt adipisicing irure ut
        excepteur nisi fugiat id eiusmod Lorem non eiusmod amet amet ullamco. Elit enim id in tempor laboris mollit.
        Velit esse aliquip veniam labore adipisicing mollit sint eu adipisicing nostrud. Duis Lorem cillum excepteur
        fugiat dolore Lorem sunt minim adipisicing duis. In anim dolor non incididunt quis irure nisi esse qui laboris
        aliquip cupidatat. Nisi id voluptate qui culpa anim veniam. Nisi velit deserunt reprehenderit in. Culpa anim
        commodo ex eiusmod ullamco dolore proident labore est. Lorem id occaecat est nulla voluptate ut. Minim magna
        laborum in ex tempor laborum mollit dolor dolore et magna. Ex ad elit consectetur eu fugiat mollit cupidatat
        minim laborum eiusmod culpa cupidatat. Excepteur minim Lorem ex nulla occaecat. Consectetur officia sunt quis
        sit tempor irure ullamco velit qui aliqua consectetur enim. Cupidatat elit aliqua culpa fugiat quis pariatur
        occaecat eu ullamco sunt irure magna aliquip irure. Culpa labore non nulla ipsum tempor laboris nulla. Pariatur
        nisi pariatur esse do. Eiusmod mollit excepteur eu irure. Esse ea eiusmod qui voluptate sint laborum dolore. Id
        et nostrud reprehenderit irure esse esse aliquip ullamco consectetur non proident et do veniam. Ea esse veniam
        enim est elit nulla consequat voluptate velit sint id. Aliquip tempor adipisicing sunt nostrud anim Lorem
        ullamco. Voluptate duis aliqua qui enim ex proident fugiat minim enim anim excepteur in. Veniam eiusmod
        incididunt elit cillum id ad non cillum pariatur.</p>
      <h2 class="ecl-u-type-heading-2" id="inline-nav-3">Heading 3</h2>
      <p class="ecl-u-type-paragraph-m">Lorem ex dolor nostrud anim occaecat laboris labore nostrud sint laboris
        adipisicing qui non. Quis est ipsum mollit nulla labore magna do Lorem. Incididunt adipisicing irure ut
        excepteur nisi fugiat id eiusmod Lorem non eiusmod amet amet ullamco. Elit enim id in tempor laboris mollit.
        Velit esse aliquip veniam labore adipisicing mollit sint eu adipisicing nostrud. Duis Lorem cillum excepteur
        fugiat dolore Lorem sunt minim adipisicing duis. In anim dolor non incididunt quis irure nisi esse qui laboris
        aliquip cupidatat. Nisi id voluptate qui culpa anim veniam. Nisi velit deserunt reprehenderit in. Culpa anim
        commodo ex eiusmod ullamco dolore proident labore est. Lorem id occaecat est nulla voluptate ut. Minim magna
        laborum in ex tempor laborum mollit dolor dolore et magna. Ex ad elit consectetur eu fugiat mollit cupidatat
        minim laborum eiusmod culpa cupidatat. Excepteur minim Lorem ex nulla occaecat. Consectetur officia sunt quis
        sit tempor irure ullamco velit qui aliqua consectetur enim. Cupidatat elit aliqua culpa fugiat quis pariatur
        occaecat eu ullamco sunt irure magna aliquip irure. Culpa labore non nulla ipsum tempor laboris nulla. Pariatur
        nisi pariatur esse do. Eiusmod mollit excepteur eu irure. Esse ea eiusmod qui voluptate sint laborum dolore. Id
        et nostrud reprehenderit irure esse esse aliquip ullamco consectetur non proident et do veniam. Ea esse veniam
        enim est elit nulla consequat voluptate velit sint id. Aliquip tempor adipisicing sunt nostrud anim Lorem
        ullamco. Voluptate duis aliqua qui enim ex proident fugiat minim enim anim excepteur in. Veniam eiusmod
        incididunt elit cillum id ad non cillum pariatur.</p>
      <h2 class="ecl-u-type-heading-2" id="inline-nav-4">Heading 4</h2>
      <p class="ecl-u-type-paragraph-m">Lorem ex dolor nostrud anim occaecat laboris labore nostrud sint laboris
        adipisicing qui non. Quis est ipsum mollit nulla labore magna do Lorem. Incididunt adipisicing irure ut
        excepteur nisi fugiat id eiusmod Lorem non eiusmod amet amet ullamco. Elit enim id in tempor laboris mollit.
        Velit esse aliquip veniam labore adipisicing mollit sint eu adipisicing nostrud. Duis Lorem cillum excepteur
        fugiat dolore Lorem sunt minim adipisicing duis. In anim dolor non incididunt quis irure nisi esse qui laboris
        aliquip cupidatat. Nisi id voluptate qui culpa anim veniam. Nisi velit deserunt reprehenderit in. Culpa anim
        commodo ex eiusmod ullamco dolore proident labore est. Lorem id occaecat est nulla voluptate ut. Minim magna
        laborum in ex tempor laborum mollit dolor dolore et magna. Ex ad elit consectetur eu fugiat mollit cupidatat
        minim laborum eiusmod culpa cupidatat. Excepteur minim Lorem ex nulla occaecat. Consectetur officia sunt quis
        sit tempor irure ullamco velit qui aliqua consectetur enim. Cupidatat elit aliqua culpa fugiat quis pariatur
        occaecat eu ullamco sunt irure magna aliquip irure. Culpa labore non nulla ipsum tempor laboris nulla. Pariatur
        nisi pariatur esse do. Eiusmod mollit excepteur eu irure. Esse ea eiusmod qui voluptate sint laborum dolore. Id
        et nostrud reprehenderit irure esse esse aliquip ullamco consectetur non proident et do veniam. Ea esse veniam
        enim est elit nulla consequat voluptate velit sint id. Aliquip tempor adipisicing sunt nostrud anim Lorem
        ullamco. Voluptate duis aliqua qui enim ex proident fugiat minim enim anim excepteur in. Veniam eiusmod
        incididunt elit cillum id ad non cillum pariatur.</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();