##### Amara Evans

amara@example.com

Pro

### Upgrade to Pro

Get access to all features

- Advanced Analytics
- Team Collaboration
- API Access

Upgrade Now
Upgrade to Pro
Log Out

# 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.

Navbar Scrollspy
Loading...
Navbar Scrollspy
Loading...

### 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.

Nested Navigation Scrollspy
Loading...
Nested Navigation Scrollspy
Loading...

### 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.

List Group Scrollspy
Loading...
List Group Scrollspy
Loading...

### 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.

Simple Anchors Scrollspy
Loading...
Simple Anchors Scrollspy
Loading...
`ESC`

###### Quick Links

###### Dashboard

Analytics Overview

###### Profile

View your profile

###### Settings

Manage preferences

###### Help Center

Get support

###### Recent Searches

Analytics Dashboard User Settings Email Templates