Inpage navigation - Navigation

Heading 1

Ut fugiat duis magna officia magna exercitation ea occaecat incididunt esse. Fugiat quis minim culpa tempor exercitation velit aliqua laboris mollit duis nostrud. Mollit enim fugiat ullamco reprehenderit occaecat in nulla consequat nulla laborum esse ex irure. Exercitation est mollit Lorem nulla amet ex ipsum dolor aliqua. Anim sit commodo consectetur exercitation in ullamco officia elit qui magna voluptate consectetur laborum fugiat. Dolore esse ad deserunt nostrud ad pariatur nisi proident consectetur dolor id sunt culpa. Esse anim consectetur tempor in veniam laboris aliquip. Ea laborum esse magna nisi fugiat irure. Amet minim occaecat consequat nulla. Eiusmod ullamco aliquip nulla quis aliqua veniam incididunt anim excepteur elit ut aliqua anim. Laborum id nostrud veniam nostrud magna culpa elit est id non adipisicing qui. Officia laborum occaecat nostrud amet excepteur minim duis et proident. Culpa amet anim elit culpa velit pariatur ullamco fugiat fugiat excepteur. Deserunt laborum aute quis aute sit qui sint quis sit. Velit nostrud ullamco pariatur labore adipisicing commodo reprehenderit sit excepteur ut consectetur duis. Est nostrud Lorem Lorem est. Consequat ex in do ad consequat cillum. Cillum consectetur mollit reprehenderit minim velit tempor labore ex velit proident fugiat non. Est et consequat ad adipisicing deserunt est do tempor dolore ad voluptate. Exercitation magna magna minim incididunt sint voluptate tempor nulla culpa officia incididunt Lorem. Labore dolor amet incididunt ullamco deserunt cillum duis proident. Lorem incididunt eiusmod elit ea excepteur nisi nisi. Officia duis ea sit ex adipisicing mollit. Id ut aliquip excepteur non esse nostrud proident minim. Eiusmod incididunt reprehenderit cillum duis quis nisi.

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.db866e2e.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.db866e2e.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.db866e2e.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.db866e2e.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.db866e2e.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.db866e2e.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.db866e2e.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.db866e2e.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">Irure mollit aliqua nulla cupidatat nulla sunt id quis nulla ad aute. Cupidatat
        aliquip do velit veniam duis ad est pariatur. Ad officia laboris tempor ullamco id commodo esse. Aute esse aute
        ullamco tempor nostrud ut laborum id mollit laborum quis non. Nisi commodo irure ex reprehenderit nisi labore
        laborum eiusmod duis ea. Quis ex laboris amet excepteur exercitation ea. Cillum veniam enim incididunt in
        consequat mollit tempor irure aute aute. Laborum pariatur ex sit sit quis deserunt eu Lorem in est est non ipsum
        elit. Ullamco adipisicing irure commodo aliquip et dolore aliquip eiusmod nisi sunt laborum dolore ut. Pariatur
        aliquip fugiat aute reprehenderit reprehenderit amet labore laborum. Consectetur tempor Lorem proident nostrud
        ut. Cupidatat sunt id id deserunt ea velit dolore. Aliqua aliqua esse dolore nulla deserunt. Fugiat ad amet
        velit in voluptate deserunt amet dolore in in excepteur culpa occaecat. Laboris magna ullamco pariatur dolor.
        Velit aliqua cillum commodo et esse nulla ut Lorem exercitation irure ullamco id esse ea. Dolor laborum aliquip
        laboris aliqua excepteur irure. Deserunt eiusmod voluptate tempor duis consequat sit amet officia consequat qui
        nostrud veniam amet. Tempor adipisicing elit occaecat incididunt nulla consectetur nostrud reprehenderit enim
        sint est exercitation. Sit nostrud nisi cillum sint Lorem eu ullamco irure officia minim aute. Proident eiusmod
        elit enim exercitation nisi adipisicing aliqua minim do deserunt sit. Enim ea labore voluptate ut non dolor
        irure. Consectetur fugiat adipisicing officia pariatur incididunt. Officia irure eu tempor ipsum sit. Non dolor
        amet officia cupidatat aute adipisicing.</p>
      <h2 class="ecl-u-type-heading-2" id="inline-nav-2">Heading 2</h2>
      <p class="ecl-u-type-paragraph-m">Irure mollit aliqua nulla cupidatat nulla sunt id quis nulla ad aute. Cupidatat
        aliquip do velit veniam duis ad est pariatur. Ad officia laboris tempor ullamco id commodo esse. Aute esse aute
        ullamco tempor nostrud ut laborum id mollit laborum quis non. Nisi commodo irure ex reprehenderit nisi labore
        laborum eiusmod duis ea. Quis ex laboris amet excepteur exercitation ea. Cillum veniam enim incididunt in
        consequat mollit tempor irure aute aute. Laborum pariatur ex sit sit quis deserunt eu Lorem in est est non ipsum
        elit. Ullamco adipisicing irure commodo aliquip et dolore aliquip eiusmod nisi sunt laborum dolore ut. Pariatur
        aliquip fugiat aute reprehenderit reprehenderit amet labore laborum. Consectetur tempor Lorem proident nostrud
        ut. Cupidatat sunt id id deserunt ea velit dolore. Aliqua aliqua esse dolore nulla deserunt. Fugiat ad amet
        velit in voluptate deserunt amet dolore in in excepteur culpa occaecat. Laboris magna ullamco pariatur dolor.
        Velit aliqua cillum commodo et esse nulla ut Lorem exercitation irure ullamco id esse ea. Dolor laborum aliquip
        laboris aliqua excepteur irure. Deserunt eiusmod voluptate tempor duis consequat sit amet officia consequat qui
        nostrud veniam amet. Tempor adipisicing elit occaecat incididunt nulla consectetur nostrud reprehenderit enim
        sint est exercitation. Sit nostrud nisi cillum sint Lorem eu ullamco irure officia minim aute. Proident eiusmod
        elit enim exercitation nisi adipisicing aliqua minim do deserunt sit. Enim ea labore voluptate ut non dolor
        irure. Consectetur fugiat adipisicing officia pariatur incididunt. Officia irure eu tempor ipsum sit. Non dolor
        amet officia cupidatat aute adipisicing.</p>
      <h2 class="ecl-u-type-heading-2" id="inline-nav-3">Heading 3</h2>
      <p class="ecl-u-type-paragraph-m">Irure mollit aliqua nulla cupidatat nulla sunt id quis nulla ad aute. Cupidatat
        aliquip do velit veniam duis ad est pariatur. Ad officia laboris tempor ullamco id commodo esse. Aute esse aute
        ullamco tempor nostrud ut laborum id mollit laborum quis non. Nisi commodo irure ex reprehenderit nisi labore
        laborum eiusmod duis ea. Quis ex laboris amet excepteur exercitation ea. Cillum veniam enim incididunt in
        consequat mollit tempor irure aute aute. Laborum pariatur ex sit sit quis deserunt eu Lorem in est est non ipsum
        elit. Ullamco adipisicing irure commodo aliquip et dolore aliquip eiusmod nisi sunt laborum dolore ut. Pariatur
        aliquip fugiat aute reprehenderit reprehenderit amet labore laborum. Consectetur tempor Lorem proident nostrud
        ut. Cupidatat sunt id id deserunt ea velit dolore. Aliqua aliqua esse dolore nulla deserunt. Fugiat ad amet
        velit in voluptate deserunt amet dolore in in excepteur culpa occaecat. Laboris magna ullamco pariatur dolor.
        Velit aliqua cillum commodo et esse nulla ut Lorem exercitation irure ullamco id esse ea. Dolor laborum aliquip
        laboris aliqua excepteur irure. Deserunt eiusmod voluptate tempor duis consequat sit amet officia consequat qui
        nostrud veniam amet. Tempor adipisicing elit occaecat incididunt nulla consectetur nostrud reprehenderit enim
        sint est exercitation. Sit nostrud nisi cillum sint Lorem eu ullamco irure officia minim aute. Proident eiusmod
        elit enim exercitation nisi adipisicing aliqua minim do deserunt sit. Enim ea labore voluptate ut non dolor
        irure. Consectetur fugiat adipisicing officia pariatur incididunt. Officia irure eu tempor ipsum sit. Non dolor
        amet officia cupidatat aute adipisicing.</p>
      <h2 class="ecl-u-type-heading-2" id="inline-nav-4">Heading 4</h2>
      <p class="ecl-u-type-paragraph-m">Irure mollit aliqua nulla cupidatat nulla sunt id quis nulla ad aute. Cupidatat
        aliquip do velit veniam duis ad est pariatur. Ad officia laboris tempor ullamco id commodo esse. Aute esse aute
        ullamco tempor nostrud ut laborum id mollit laborum quis non. Nisi commodo irure ex reprehenderit nisi labore
        laborum eiusmod duis ea. Quis ex laboris amet excepteur exercitation ea. Cillum veniam enim incididunt in
        consequat mollit tempor irure aute aute. Laborum pariatur ex sit sit quis deserunt eu Lorem in est est non ipsum
        elit. Ullamco adipisicing irure commodo aliquip et dolore aliquip eiusmod nisi sunt laborum dolore ut. Pariatur
        aliquip fugiat aute reprehenderit reprehenderit amet labore laborum. Consectetur tempor Lorem proident nostrud
        ut. Cupidatat sunt id id deserunt ea velit dolore. Aliqua aliqua esse dolore nulla deserunt. Fugiat ad amet
        velit in voluptate deserunt amet dolore in in excepteur culpa occaecat. Laboris magna ullamco pariatur dolor.
        Velit aliqua cillum commodo et esse nulla ut Lorem exercitation irure ullamco id esse ea. Dolor laborum aliquip
        laboris aliqua excepteur irure. Deserunt eiusmod voluptate tempor duis consequat sit amet officia consequat qui
        nostrud veniam amet. Tempor adipisicing elit occaecat incididunt nulla consectetur nostrud reprehenderit enim
        sint est exercitation. Sit nostrud nisi cillum sint Lorem eu ullamco irure officia minim aute. Proident eiusmod
        elit enim exercitation nisi adipisicing aliqua minim do deserunt sit. Enim ea labore voluptate ut non dolor
        irure. Consectetur fugiat adipisicing officia pariatur incididunt. Officia irure eu tempor ipsum sit. Non dolor
        amet officia cupidatat aute adipisicing.</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.db866e2e.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.db866e2e.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.db866e2e.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.db866e2e.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.db866e2e.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();