Bootstrap 5 Scrollspy
Automatically update navigation based on scroll position
🎯 What is Bootstrap Scrollspy?
Scrollspy automatically updates navigation links based on scroll position. It highlights the current section in your navigation menu as users scroll through the page, providing clear visual feedback about their location.
<!-- Basic Scrollspy Example -->
<body data-bs-spy="scroll" data-bs-target="#navbar">
<nav id="navbar">
<a href="#section1">Section 1</a>
<a href="#section2">Section 2</a>
</nav>
</body>
Key Scrollspy Features
Auto-Update
Navigation links automatically highlight as you scroll through different page sections, providing real-time feedback about current position without any manual interaction or JavaScript code required from developers.
Navigation Aid
Helps users understand their current location on long pages with multiple sections. Perfect for documentation, landing pages, and single-page applications where clear navigation context is essential for user experience.
Configurable
Customize scroll offset, target navigation, and smooth scrolling behavior to match your design needs. Works with any navigation structure including vertical sidebars, horizontal top bars, and nested navigation menus for complex layouts.
Responsive
Works seamlessly on all devices and screen sizes, automatically adjusting to mobile, tablet, and desktop viewports. Maintains functionality with touch scrolling and provides consistent user experience across all platforms and browsers.
🔹 Basic Scrollspy Setup
Navigation links highlight dynamically as you scroll through different page sections, improving content discoverability. This visual cue helps users understand their current location within lengthy documents, making it easier to navigate between topics or return to specific sections. Scrollspy is particularly useful for tutorials, documentation sites, and landing pages with multiple content blocks, enhancing both usability and engagement.
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body data-bs-spy="scroll" data-bs-target="#navbar" data-bs-offset="70">
<!-- Navigation -->
<nav id="navbar" class="navbar navbar-light bg-light">
<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>
<li class="nav-item">
<a class="nav-link" href="#section3">Section 3</a>
</li>
</ul>
</nav>
<!-- Content Sections -->
<div id="section1" style="height: 500px;">
<h2>Section 1</h2>
<p>Content for section 1...</p>
</div>
<div id="section2" style="height: 500px;">
<h2>Section 2</h2>
<p>Content for section 2...</p>
</div>
<div id="section3" style="height: 500px;">
<h2>Section 3</h2>
<p>Content for section 3...</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Output:
Navigation links highlight as you scroll through sections
🔹 Scrollspy with Sidebar
Sidebar navigation with active link highlighting provides a stable reference point during scrolling. This pattern reduces cognitive load by keeping the navigation structure always in view, allowing users to jump between sections effortlessly. It’s ideal for content-heavy websites, knowledge bases, or academic publications where quick section access and clear location tracking are essential for a positive user experience.
<div class="container-fluid">
<div class="row">
<!-- Sidebar Navigation -->
<nav id="sidebar" class="col-md-3 col-lg-2 d-md-block bg-light sidebar">
<div class="position-sticky">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="#intro">Introduction</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#features">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#examples">Examples</a>
</li>
</ul>
</div>
</nav>
<!-- Main Content -->
<main class="col-md-9 ms-sm-auto col-lg-10"
data-bs-spy="scroll"
data-bs-target="#sidebar">
<div id="intro"><h2>Introduction</h2></div>
<div id="features"><h2>Features</h2></div>
<div id="examples"><h2>Examples</h2></div>
</main>
</div>
</div>Output:
Sidebar navigation with active link highlighting
🔹 Nested Scrollspy Navigation
Multi-level navigation with parent and child highlighting offers granular tracking within complex documents. This approach enhances usability in deep content trees by showing active states across hierarchy levels, making it easier to navigate between main sections and their subsections. It’s especially valuable for technical documentation, API references, or educational content where clear structural visibility is key to user comprehension.
<nav id="navbar" class="navbar">
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link" href="#item-1">Item 1</a>
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link ms-3" href="#item-1-1">Item 1-1</a>
</li>
<li class="nav-item">
<a class="nav-link ms-3" href="#item-1-2">Item 1-2</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#item-2">Item 2</a>
</li>
</ul>
</nav>
<div data-bs-spy="scroll" data-bs-target="#navbar">
<div id="item-1"><h2>Item 1</h2></div>
<div id="item-1-1"><h3>Item 1-1</h3></div>
<div id="item-1-2"><h3>Item 1-2</h3></div>
<div id="item-2"><h2>Item 2</h2></div>
</div>Output:
Multi-level navigation with parent and child highlighting
🔹 Scrollspy Offset Configuration
Navigation activates with a custom offset from the top, accommodating fixed headers or other layout elements. This configuration prevents premature or delayed highlighting, ensuring the active navigation item always corresponds correctly to the visible content area. It’s essential for pages with sticky menus, hero sections, or announcement bars, maintaining precise scroll tracking and a polished user interaction.
<!-- Offset of 100 pixels -->
<body data-bs-spy="scroll"
data-bs-target="#navbar"
data-bs-offset="100">
<!-- Content -->
</body>
<!-- Offset of 50 pixels -->
<div data-bs-spy="scroll"
data-bs-target="#navbar"
data-bs-offset="50">
<!-- Content -->
</div>Output:
Navigation activates with custom offset from top
🔹 Smooth Scrolling with Scrollspy
Clicking navigation links triggers smooth, animated scrolling to the corresponding sections, improving navigational flow. This effect reduces disorientation and creates a more engaging, app-like experience. Smooth scrolling is particularly effective on single-page applications, portfolio sites, or interactive reports where seamless section transitions contribute to a cohesive and modern user journey.
<!-- Add smooth scrolling with CSS -->
<style>
html {
scroll-behavior: smooth;
}
</style>
<body data-bs-spy="scroll" data-bs-target="#navbar">
<nav id="navbar">
<a href="#section1">Section 1</a>
<a href="#section2">Section 2</a>
</nav>
<div id="section1">Content 1</div>
<div id="section2">Content 2</div>
</body>Output:
Clicking navigation links scrolls smoothly to sections