Bootstrap 5 Scrollspy – 2 Examples with navbar and List Group

Scrollspy in Bootstrap 5

As the user scrolls through your website, scrollspy component automatically updates the links in the navigation list.

This might particularly be useful for long pages with different sections. For example, your website has header navigation with the following links:

Home, Offers, Price, Contact, About

Your home page contains all this information on a single page.

Users may click on any link to directly navigate to that particular section. Alternatively, as they scroll down and reach to particular section – e.g. Offers to Contact section – in that case, the scrollspy component makes the Contact link active on header navigation.

You can see a demo here:

Scrollspy Demo

An example of Scrollspy using Bootstrap 5

In this example, we have a top-right menu that is fixed. As you scroll down, you can see the active content’s link is highlighted.

Have a look at the output below along with the code and it is explained after how it worked:

See online demo and code

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

<html>

<head>

<style>

body {

position: relative;

}

.cust1{

padding:100px 20px;

}

</style>

</head>

</li>

<a class="nav-link" href="#comp2">Products</a>

</li>

<a class="nav-link" href="#comp3">Specials</a>

</li>

<a class="nav-link" href="#comp4">Price</a>

</li>

<a class="nav-link" href="#comp5">Contact</a>

</li>

<a class="nav-link" href="#comp6">About</a>

</li>

</ul>

</div>

</nav>

<p>Content like Carousel goes here</p>

<p>Add more content here</p>

</div>

<h1>Products</h1>

<p>List of Products</p>

</div>

<h1>Specials</h1>

<p>Special Products Information Go here</p>

<p>Add some images etc.</p>

</div>

<h1>Price</h1>

<p>Price Table / Cards </p>

</div>

<h1>Contact</h1>

<p>Contact Form here</p>

</div>

<h1>About</h1>

<p>About Company/Product/Services</p>

</div>

</body>

</html>

How does it work?

You may use scrollspy component with the nav or list group.
In the example above and below, notice the <style> section under the <head> tag. There, position: relative; is used, which is required. We used it at <body> level.
<a> tags are used in both examples, which are also required. They point to an element by id.

The example of using List group

Scrollspy component can also be used with the list group to show which content part the user is on.

In the example below, we have six list items. Scroll down the page and you will see list group items highlight:

See online demo and code

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

<html>

<head>

<style>

body{

position: relative;

}

.list-group{

position: sticky;

top: 15px;

}

</style>

</head>

<h2 class="text-success">A Demo of Scrollspy with List Group</h2><br>

<a class="list-group-item list-group-item-action" href="#section2">Python</a>

<a class="list-group-item list-group-item-action" href="#section4">Kotlin</a>

<a class="list-group-item list-group-item-action" href="#section5">GoLang</a>

</div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ligula mauris, mollis et massa non, sodales varius dolor. Aenean pulvinar nibh nisi, id fringilla nunc mollis et. Aenean sit amet nulla consequat lacus fermentum accumsan vel id nunc. Donec rhoncus nunc sit amet augue elementum, vel ultricies turpis gravida. Aenean ut convallis elit. Vestibulum id dolor purus. Ut tincidunt, enim ut tincidunt cursus, arcu est tempor orci, eget vulputate tortor erat eget lorem. Morbi convallis nibh quis risus vestibulum viverra. Etiam suscipit eleifend congue. Quisque gravida felis vulputate arcu accumsan tempus. Aliquam pulvinar nisi a condimentum aliquam. Nulla eget magna ac felis auctor blandit eget nec leo. Suspendisse sapien nunc, consectetur in nulla quis, pellentesque mollis risus. In lacinia lectus et augue molestie, id maximus eros viverra. Mauris laoreet convallis dictum.</p>

</div>

<hr>

<h2>Python</h2>

</div>

<hr>