In-Page Navigation

When you have particularly long pages of content, it can often be helpful to provide a user the ability to jump quickly to a section of the page. This in-page navigation is useful when users probably won't want to read all of the page, and skimming through scrolling could be overly cumbersome. In-page navigation is typically handled one of two ways: A list of links at the top of the page, or a list of links in the side bar. We've created an easy method to implement a sidebar in-page navigation that scrolls with the user as they scroll and provides feedback to the user as to where they are in relation to the entire page.

Implementation

The in-page nav utilizes some specific classes make it stick to the side of the page as the user scrolls and a data-attribute to animate the scrolling to the in-page anchor. The class nav-onpage-[sm/md/lg/xl]-sticky can make the navigation "sticky" only at specific breakpoints. The basic code setup is as follows:

<div class="nav-onpage nav-onpage-lg-sticky">
  <h2 class="h4 text-bold">On This Page</h2>
  <ul class="nav flex-column">
    <li class="nav-item">
      <a data-scrolling="yes" href="#overview" class="nav-link">Overview</a>
    </li>
  </ul>
</div>

Scrolling Animation

The scrolling animation functions independently of the sticky nav. Adding the a data-scrolling="yes" attribute to any link will make the link scroll the page to the anchors location and take into account the fix navigation bar. If you have in-page links and don't use that property, the page will jump to a spot too far down and possibly confuse the user.

When to use in-page navigation

In-page navigation is an excellent option when you may be considering useing collapsed or hidden content. It provides the user an optional way to jump to the content without forcing them to click anything. It also allows them to still easily scroll and scan content better than accordions. If you will have nested levels of in-page navigation, we suggest using the class text-shrink-1 on the lower levels to help differentiate to the user between the levels if that is important.

On This Page