Basic Scrollspy

Highlight navigation items automatically while scrolling.

Preview

Code

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body data-bs-spy="scroll" data-bs-target="#navbarExample" tabindex="0">

<nav id="navbarExample" class="navbar navbar-light bg-light px-3">

<a class="navbar-brand" href="#">Sections</a>

<ul class="nav nav-pills">

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

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

</ul>

</nav>

<div class="container py-5">

<h4 id="section1">Section 1</h4>
<p style="height:400px">Scroll content...</p>

<h4 id="section2">Section 2</h4>
<p style="height:400px">More scroll content...</p>

</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

</body>
</html>

More BS5 Scrollspy Examples (7)

Sidebar Scrollspy

Navbar Scrollspy

Nested Scrollspy

Scrollspy with Nav Pills

Scrollspy Offset

Documentation Layout

Scrollspy with Smooth Layout

Sidebar Scrollspy →