Bootstrap 5 is in alpha when this is written and it’s subject to change.
Bootstrap is a popular UI library for any JavaScript apps.
In this article, we’ll look at how to add scrollspys with Bootstrap 5.
Scrollspy
Scrollspy lets us highlight links given that the content container has the same ID assigned to it.
It must be used with a Bootstrap nav component or list group.
Scrollspy needs to be position: relative on the element, we’re spying on.
If we spy on anything other than the body, we’ve to set the overflow-y to scroll .
For example, we can write:
<nav id="navbar-example" class="navbar navbar-light bg-light px-3">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link" href="#foo">foo</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#bar">bar</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu dropdown-menu-right">
<li><a class="dropdown-item" href="#one">one</a></li>
<li><a class="dropdown-item" href="#two">two</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#three">three</a></li>
</ul>
</li>
</ul>
</nav>
<div data-spy="scroll" data-target="#navbar-example" data-offset="0" style='max-height: 100px; overflow: auto'>
<h4 id="foo">@foo</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tempus turpis augue, aliquam egestas nunc semper sit amet. Vivamus vel euismod eros. Fusce aliquam vitae nisi quis suscipit. Nullam rutrum convallis dui, a pharetra nulla dapibus eget. In diam justo, finibus in commodo fermentum, maximus sit amet tellus. Vestibulum metus mi, tempus ut sapien at, vestibulum blandit orci.
</p>
<h4 id="bar">@bar</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tempus turpis augue, aliquam egestas nunc semper sit amet. Vivamus vel euismod eros. Fusce aliquam vitae nisi quis suscipit. Nullam rutrum convallis dui, a pharetra nulla dapibus eget. In diam justo, finibus in commodo fermentum, maximus sit amet tellus. Vestibulum metus mi, tempus ut sapien at, vestibulum blandit orci.
</p>
<h4 id="one">one</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tempus turpis augue, aliquam egestas nunc semper sit amet. Vivamus vel euismod eros. Fusce aliquam vitae nisi quis suscipit. Nullam rutrum convallis dui, a pharetra nulla dapibus eget. In diam justo, finibus in commodo fermentum, maximus sit amet tellus. Vestibulum metus mi, tempus ut sapien at, vestibulum blandit orci.
</p>
<h4 id="two">two</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tempus turpis augue, aliquam egestas nunc semper sit amet. Vivamus vel euismod eros. Fusce aliquam vitae nisi quis suscipit. Nullam rutrum convallis dui, a pharetra nulla dapibus eget. In diam justo, finibus in commodo fermentum, maximus sit amet tellus. Vestibulum metus mi, tempus ut sapien at, vestibulum blandit orci.
</p>
<h4 id="three">three</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tempus turpis augue, aliquam egestas nunc semper sit amet. Vivamus vel euismod eros. Fusce aliquam vitae nisi quis suscipit. Nullam rutrum convallis dui, a pharetra nulla dapibus eget. In diam justo, finibus in commodo fermentum, maximus sit amet tellus. Vestibulum metus mi, tempus ut sapien at, vestibulum blandit orci.
</p>
</div>
We have a navbar with the content.
And we styled it as usual.
What we added is the href to the links and the IDs to the div.
If they match, then we can scroll to the item.
Also, we set the max-height to 100px and overflow to auto so that we see overflow content.
To add the scrollspy, we have the data-spy='scroll' attribute in our container div for the content.
With Nested Nav
We can use the scrollspy with nested navs.
For example, we can write:
<div class='row'>
<div class='col-3'>
<nav id="navbar-example" class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link" href="#item-1">Item 1</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ml-3 my-1" href="#item-1-1">Item 1-1</a>
<a class="nav-link ml-3 my-1" href="#item-1-2">Item 1-2</a>
</nav>
<a class="nav-link" href="#item-2">Item 2</a>
<a class="nav-link" href="#item-3">Item 3</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ml-3 my-1" href="#item-3-1">Item 3-1</a>
<a class="nav-link ml-3 my-1" href="#item-3-2">Item 3-2</a>
</nav>
</nav>
</nav>
</div>
<div data-spy="scroll" data-target="#navbar-example" data-offset="0" class='col-9' style='max-height: 300px; overflow-y: scroll'>
<h4 id="item-1">Item 1</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tempus turpis augue, aliquam egestas nunc semper sit amet. Vivamus vel euismod eros. Fusce aliquam vitae nisi quis suscipit. Nullam rutrum convallis dui, a pharetra nulla dapibus eget. In diam justo, finibus in commodo fermentum, maximus sit amet tellus. Vestibulum metus mi, tempus ut sapien at, vestibulum blandit orci. Sed iaculis diam sit amet massa pulvinar, dictum viverra felis interdum. </p>
<h5 id="item-1-1">Item 1-1</h5>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tempus turpis augue, aliquam egestas nunc semper sit amet. Vivamus vel euismod eros. Fusce aliquam vitae nisi quis suscipit. Nullam rutrum convallis dui, a pharetra nulla dapibus eget. In diam justo, finibus in commodo fermentum, maximus sit amet tellus. Vestibulum metus mi, tempus ut sapien at, vestibulum blandit orci. Sed iaculis diam sit amet massa pulvinar, dictum viverra felis interdum. </p>
<h5 id="item-1-2">Item 1-2</h5>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tempus turpis augue, aliquam egestas nunc semper sit amet. Vivamus vel euismod eros. Fusce aliquam vitae nisi quis suscipit. Nullam rutrum convallis dui, a pharetra nulla dapibus eget. In diam justo, finibus in commodo fermentum, maximus sit amet tellus. Vestibulum metus mi, tempus ut sapien at, vestibulum blandit orci. Sed iaculis diam sit amet massa pulvinar, dictum viverra felis interdum. </p>
<h4 id="item-2">Item 2</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tempus turpis augue, aliquam egestas nunc semper sit amet. Vivamus vel euismod eros. Fusce aliquam vitae nisi quis suscipit. Nullam rutrum convallis dui, a pharetra nulla dapibus eget. In diam justo, finibus in commodo fermentum, maximus sit amet tellus. Vestibulum metus mi, tempus ut sapien at, vestibulum blandit orci. Sed iaculis diam sit amet massa pulvinar, dictum viverra felis interdum. </p>
<h4 id="item-3">Item 3</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tempus turpis augue, aliquam egestas nunc semper sit amet. Vivamus vel euismod eros. Fusce aliquam vitae nisi quis suscipit. Nullam rutrum convallis dui, a pharetra nulla dapibus eget. In diam justo, finibus in commodo fermentum, maximus sit amet tellus. Vestibulum metus mi, tempus ut sapien at, vestibulum blandit orci. Sed iaculis diam sit amet massa pulvinar, dictum viverra felis interdum. </p>
<h5 id="item-3-1">Item 3-1</h5>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tempus turpis augue, aliquam egestas nunc semper sit amet. Vivamus vel euismod eros. Fusce aliquam vitae nisi quis suscipit. Nullam rutrum convallis dui, a pharetra nulla dapibus eget. In diam justo, finibus in commodo fermentum, maximus sit amet tellus. Vestibulum metus mi, tempus ut sapien at, vestibulum blandit orci. Sed iaculis diam sit amet massa pulvinar, dictum viverra felis interdum. </p>
<h5 id="item-3-2">Item 3-2</h5>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tempus turpis augue, aliquam egestas nunc semper sit amet. Vivamus vel euismod eros. Fusce aliquam vitae nisi quis suscipit. Nullam rutrum convallis dui, a pharetra nulla dapibus eget. In diam justo, finibus in commodo fermentum, maximus sit amet tellus. Vestibulum metus mi, tempus ut sapien at, vestibulum blandit orci. Sed iaculis diam sit amet massa pulvinar, dictum viverra felis interdum. </p>
</div>
</div>
We have the nav that’s vertical.
Also, we have navs inside some of the navs.
Like the previous example, we have the data-spy='scroll' and the href in the navs matching the IDs of the divs.
overflow-y has to be set to scroll so that we scroll.
Conclusion
We can add scrollspys with the data-spy='scroll' attribute and set the overflow on the content we’re scrolling.
