Core Code
Core Code Modern Dev Handbook

Nested Scrollspy

Highlight nested navigation items 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>

<div class="container py-5">

<nav id="nestedNav" class="nav flex-column">

<a class="nav-link" href="#topic1">Topic 1</a>

<nav class="nav flex-column ms-3">
<a class="nav-link" href="#sub1">Sub 1</a>
<a class="nav-link" href="#sub2">Sub 2</a>
</nav>

</nav>

<div data-bs-spy="scroll"
data-bs-target="#nestedNav"
style="height:300px; overflow:auto;"
class="mt-3">

<h4 id="topic1">Topic 1</h4>
<p style="height:200px"></p>

<h5 id="sub1">Sub Topic 1</h5>
<p style="height:200px"></p>

<h5 id="sub2">Sub Topic 2</h5>
<p style="height:200px"></p>

</div>

</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)

example Basic Scrollspy open example example Sidebar Scrollspy open example example Navbar Scrollspy open example example Scrollspy with Nav Pills open example example Scrollspy Offset open example example Documentation Layout open example example Scrollspy with Smooth Layout open example