Bootstrap 5 Scrollspy: A Complete Guide

Scrollspy in Bootstrap 5 is used to automatically update navigation links based on scroll position. It works with navigation components like .nav or .list-group, and it's often used to highlight the active link in a sidebar or navbar as you scroll through a page.

Scrollspy:

A scrollable container (or the body) with the data-bs-spy="scroll" attribute.
A target navigation using the data-bs-target attribute to specify which navigation to update.

Example

<a class="nav-link" href="#section1">Section 1</a>

</li>

<a class="nav-link" href="#section2">Section 2</a>

</li>

<a class="nav-link" href="#section3">Section 3</a>

</li>

</ul>

</div>

</nav>

<h1>Section 1</h1>

<p>Try to scroll this section and look how the section is navigate while scrolling! Try to scroll this section and look how the section is navigate while scrolling!</p>

</div>

<h1>Section 2</h1>

<p>Try to scroll this section and look how the section is navigate while scrolling! Try to scroll this section and look how the section is navigate while scrolling!</p>

</div>

<h1>Section 3</h1>

<p>Try to scroll this section and look how the section is navigate while scrolling! Try to scroll this section and look how the section is navigate while scrolling!</p>

</div>

</body>

Try it yourself

Key Attributes

data-bs-spy="scroll": Enables scrollspy functionality.

data-bs-target="#id": Specifies the navigation element to update.

data-bs-offset="number": Adjusts the scroll offset for updating the active link (default is 10).

❮ Previous

Next ❯

Whereisstuff is simple learing platform for beginer to advance level to improve there skills in technologies.we will provide all material free of cost.you can write a code in runkit workspace and we provide some extrac features also, you agree to have read and accepted our terms of use, cookie and privacy policy.