Bootstrap

Bootstrap JS Scrollspy

Boost Navigation UX with Bootstrap JS Scrollspy

Want to automatically update your navigation links to highlight which section of the page is currently visible? Bootstrap’s Scrollspy component makes it easy!

It listens to page scroll events and adds an active class to your navigation links based on the scroll position, improving usability on long pages like documentation, portfolios, or landing pages.

Step 1: Include Bootstrap

Make sure you have Bootstrap CSS and JS loaded (Scrollspy depends on Bootstrap’s JavaScript):

html
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

Step 2: Setup HTML Structure

You need:

  • A nav menu with links referencing section IDs.

  • Content sections with matching IDs.

  • A container to spy on (usually <body> or a scrollable div).

Example:

html
<body data-bs-spy="scroll" data-bs-target="#navbar-example" data-bs-offset="100" tabindex="0">

<!-- Navigation -->
<nav id="navbar-example" class="navbar navbar-light bg-light flex-column position-fixed" style="top: 0; left: 0; height: 100vh; width: 200px; overflow-y: auto;">
<nav class="nav nav-pills flex-column">
<a class="nav-link" href="#section1">Section 1</a>
<a class="nav-link" href="#section2">Section 2</a>
<a class="nav-link" href="#section3">Section 3</a>
</nav>
</nav>

<!-- Content -->
<div class="container" style="margin-left:220px; padding-top: 20px;">
<section id="section1" style="height:600px;">Content for Section 1</section>
<section id="section2" style="height:600px;">Content for Section 2</section>
<section id="section3" style="height:600px;">Content for Section 3</section>
</div>

</body>

⚙️ Key Attributes Explained

  • data-bs-spy="scroll" activates Scrollspy on the container (here the whole <body>).

  • data-bs-target="#navbar-example" tells Scrollspy which nav to update.

  • data-bs-offset="100" offsets the scroll position for activating links (adjust based on header height).

  • tabindex="0" is required for Scrollspy to work on <body> for keyboard accessibility.

Programmatic Initialization

You can also initialize Scrollspy with JavaScript:

javascript
const scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbar-example',
offset: 100
});

Tips & Best Practices

  • Use smooth scrolling in CSS for nicer navigation:

css
html {
scroll-behavior: smooth;
}

  • Ensure sections have enough height to be scrollable.

  • Adjust data-bs-offset if you have fixed headers.

  • Scrollspy works with any scrollable container, just target it correctly.

✅ Use Cases

  • Documentation pages with side nav

  • One-page landing sites with section nav

  • Long-form articles or portfolios

Final Thoughts

Bootstrap’s Scrollspy is a lightweight, easy way to enhance navigation and improve UX on content-heavy pages. Set up is straightforward, and it automatically handles active states on your nav links as users scroll.

Helpful Links

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *