Page navigation

Set out key sections of page, allowing a user to traverse long pages quickly and easily.

<!-- COMPONENT: Page navigation -->
<nav class="in-page-nav pull-right bg-mint-75-light">
    <header>
        <div class="row column">
            <h1>On this page</h1>
        </div>
    </header>
    <ul>
        <li><a href="#section-a">Section A</a></li>
        <li><a href="#section-b">Section B</a></li>
        <li><a href="#section-c">Section C</a></li>
        <li><a href="#section-d">Section D</a></li>
        <li><a href="#section-e">Section E</a></li>
        <li><a href="#section-f">Section F</a></li>
        <li><a href="#section-g">Section G</a></li>
        <li><a href="#section-h">Section H</a></li>
        <li><a href="#section-i">Section I</a></li>
        <li><a href="#section-j">Section J</a></li>
    </ul>
</nav>
<!-- End component: Page navigation -->
  • Handle: @page-navigation
  • Preview:
  • Filesystem Path: components/common-components/navigation/page-navigation/page-navigation.hbs
  • Referenced by (1): @page-nav