In-Page Navigation Stable

In-Page Navigation is needed when there is extensive content on one page. The user can navigate to each chapter easily and the currently viewed chapter is highlighted in the in-page navigation.

Responsive In-Page Navigation

<div class="inpage-navigation js-inpage-navigation">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col col-md-10">
        <div class="inpage-navigation__panel">
          <div class="inpage-navigation__container">
            <div class="selectbox inpage-navigation__selectbox">
              <select class="selectbox__select inpage-navigation__select">
                <option value="#Chapter_1">Chapter 01</option>
                <option value="#Chapter_2">Chapter 02</option>
                <option value="#Chapter_3">Chapter 03</option>
              </select>
            </div>
            <ul class="inpage-navigation__list">
              <li class="inpage-navigation__item">
                <a href="#Chapter_1" class="inpage-navigation__link" data-link-id="tab__header}">
                  Chapter 01
                </a>
              </li>
              <li class="inpage-navigation__item">
                <a href="#Chapter_2" class="inpage-navigation__link" data-link-id="tab__header}">
                  Chapter 02
                </a>
              </li>
              <li class="inpage-navigation__item">
                <a href="#Chapter_3" class="inpage-navigation__link" data-link-id="tab__header}">
                  Chapter 03
                </a>
              </li>
            </ul>
          </div>
          <a data-link-id="cta_main" class="button button--primary inpage-navigation__cta" href="#">Call-to-Action</a>
        </div>
      </div>
    </div>
  </div>
</div>