Upgrade to Pro
Get access to all features
- Advanced Analytics
- Team Collaboration
- API Access
Scrollspy
Scrollspy is an intelligent navigation enhancement that automatically updates navigation or list group components based on scroll position. It provides visual feedback about the current viewport section, improving user orientation and content navigation experience.
Examples
Navbar
The navbar scrollspy implementation creates an interactive navigation experience using
Bootstrap's data-bs-spy="scroll" feature. The navigation automatically highlights
the current section as users scroll, with smooth transitions and precise targeting through
data-bs-root-margin. This example includes a dropdown menu for additional
navigation options.
Nested Navigation
Nested navigation demonstrates a hierarchical menu structure with primary and secondary
navigation levels. The nav-pills layout creates a clear visual hierarchy, while the
flex-column arrangement ensures proper vertical alignment. This pattern is
particularly useful for documentation sites or complex content structures.
List Group
The list group variant offers a clean, structured navigation approach using Bootstrap's
list-group component. Each list-group-item-action provides clear
interactive states and smooth scrolling to corresponding content sections, ideal for single-page
navigation.
Simple Anchors
Simple anchors provide a minimalist approach to scrollspy navigation using basic
a elements in a flex container. The gap-2 utility ensures consistent
spacing, while data-bs-smooth-scroll="true" enables smooth scrolling behavior. This
pattern is perfect for straightforward, linear content navigation.