Documentation Layout

Example documentation page layout using scrollspy and sidebar navigation.

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">

<div class="row">

<div class="col-md-3">

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

<a class="nav-link" href="#intro">Intro</a>
<a class="nav-link" href="#install">Install</a>
<a class="nav-link" href="#usage">Usage</a>

</nav>

</div>

<div class="col-md-9"
data-bs-spy="scroll"
data-bs-target="#docNav"
style="height:350px; overflow:auto;">

<h4 id="intro">Introduction</h4>
<p style="height:250px"></p>

<h4 id="install">Installation</h4>
<p style="height:250px"></p>

<h4 id="usage">Usage</h4>
<p style="height:250px"></p>

</div>

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

Scrollspy with Nav Pills

Scrollspy Offset

Scrollspy with Smooth Layout

← Scrollspy Offset

Scrollspy with Smooth Layout →