On Page Nav (Scroll Spy)
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.
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.