FEC Pattern Library

Inpage navigation

A vertical navigation on the left side that helps users scan the contents of a page and jump between different sections. On desktop, the navigation sticks to remain in view as the user navigates.

When to use

  • Users need to navigate up and down longer sections of content on a single page
  • Users need a way to scan the contents of a long page

When to consider something else

  • If a page is very long or has multiple levels of hierarchy, consider breaking the content into multiple pages and using a side navigation component to navigate between the pages
<div class="main">
    <div class="container">
        <div class="sidebar-container sidebar-container--left">
            <nav class="sidebar sidebar--neutral sidebar--left side-nav">
                <ul class="sidebar__content">
                    <li class="side-nav__item"><a class="side-nav__link is-active" href="#">How to file (active)</a></li>
                    <li class="side-nav__item"><a class="side-nav__link" href="#">What to file</a></li>
                    <li class="side-nav__item"><a class="side-nav__link" href="#">Troubleshooting</a></li>
                    <li class="is-disabled side-nav__item"><span class="side-nav__link" href="#">Reporting examples (disabled)</span></li>
                </ul>
            </nav>
        </div>
    </div>
</div>
 
<div class="main">
  <div class="container">
    <div class="sidebar-container sidebar-container--left">
      <nav class="sidebar sidebar--neutral sidebar--left side-nav">
        <ul class="sidebar__content">
          <li class="side-nav__item"><a class="side-nav__link is-active" href="#">How to file (active)</a></li>
          <li class="side-nav__item"><a class="side-nav__link" href="#">What to file</a></li>
          <li class="side-nav__item"><a class="side-nav__link" href="#">Troubleshooting</a></li>
          <li class="is-disabled side-nav__item"><span class="side-nav__link" href="#">Reporting examples (disabled)</span></li>
        </ul>
      </nav>
    </div>
  </div>
</div>
 
/* No context defined. */
  • Handle: @inpage-navigation
  • Preview:
  • Filesystem Path: components/02-components/secondary-navigation/02-inpage-navigation/inpage-navigation.html