Estimated reading: 4 minutes 12 views

🧭 Bootstrap 5 – Scrollspy: Highlight Active Sections on Scroll

🧲 Introduction – What Is Scrollspy in Bootstrap 5?

Scrollspy in Bootstrap 5 is a JavaScript component that automatically updates navigation links based on the scroll position of the page. It’s perfect for single-page layouts, documentation, or long landing pages where you want to keep users aware of their current section.

🎯 In this guide, you’ll learn:

How to use Scrollspy with navigation
Setup requirements for data-bs-spy, data-bs-target, and ids
Integrate with Bootstrap nav, navbar, and sidebars
Best practices for scroll tracking and UX

✅ Example – Scrollspy with Navbar

<body data-bs-spy="scroll" data-bs-target="#navbar-example" data-bs-offset="70" tabindex="0">
  <nav id="navbar-example" class="navbar navbar-light bg-light fixed-top">
    <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 style="height: 800px;" id="section1" class="container-fluid pt-5 mt-5">
    <h4>Section 1</h4>
    <p>Content for section 1.</p>
  </div>

  <div style="height: 800px;" id="section2" class="container-fluid pt-5">
    <h4>Section 2</h4>
    <p>Content for section 2.</p>
  </div>
</body>

🔍 Code Explanation:

Attribute/Class	Description
`data-bs-spy="scroll"`	Activates Scrollspy on the element (usually `<body>`)
`data-bs-target="#id"`	Links Scrollspy to a nav (must have corresponding `href`s)
`data-bs-offset="70"`	Adjusts offset (e.g., height of fixed navbar)
`tabindex="0"`	Enables keyboard focus (required for Scrollspy on body)
`id="section1"`, `#section2`	Each target section must have a unique ID

✅ Scrollspy Initialization via JavaScript (Optional)

You can also enable Scrollspy via JavaScript if not using data-* attributes:

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

✅ Scrollspy with Vertical Sidebar Nav

<div class="row">
  <div class="col-3">
    <nav id="sidebarMenu" class="nav flex-column nav-pills">
      <a class="nav-link" href="#intro">Intro</a>
      <a class="nav-link" href="#features">Features</a>
    </nav>
  </div>

  <div class="col-9" data-bs-spy="scroll" data-bs-target="#sidebarMenu" data-bs-offset="0" tabindex="0">
    <h4 id="intro">Introduction</h4>
    <p>Intro content...</p>
    <h4 id="features">Features</h4>
    <p>Features content...</p>
  </div>
</div>

🛠️ Best Practices for Scrollspy Implementation

Best Practice	Why It Matters
Use unique IDs for each section	Ensures nav links can target scrollable sections
Match nav href with section ID	Keeps Scrollspy tracking accurate
Add `position: relative` to parent	Required for scroll tracking to work
Always set `tabindex="0"`	Enables Scrollspy tracking inside scrollable divs
Adjust `data-bs-offset` for fixed navbars	Prevents highlight mismatch due to navbar height

📌 Summary – Track Scroll Position with Scrollspy

Bootstrap 5 Scrollspy gives your pages dynamic navigation by automatically highlighting nav links as the user scrolls. It’s essential for long-form content, documentation, or sticky side menus.

🔍 Key Takeaways:

Use data-bs-spy="scroll" with data-bs-target="#navID"
Ensure target sections have matching ids
Compatible with both horizontal navs and vertical sidebars
Can be initialized via HTML or JavaScript

⚙️ Ideal for documentation pages, single-page websites, and UI dashboards.

❓ FAQs – Bootstrap 5 Scrollspy

❓ What is the purpose of data-bs-offset in Scrollspy?
✅ It compensates for fixed headers like navbars to avoid incorrect link highlighting.

❓ Can Scrollspy work inside a div, not just body?
✅ Yes. Ensure the div has position: relative, a fixed height, and overflow: auto.

❓ Is JavaScript required for Scrollspy to work?
✅ Yes. Even if you use data-* attributes, Bootstrap’s JS must be loaded.

❓ Why aren’t my nav links updating while scrolling?
✅ Common issues include:

Missing tabindex="0" on the scrollable container
Incorrect href targets
Missing or misaligned section ids

📈 SEO Metadata Block (Plain Text Format)

SEO Title: Bootstrap 5 Scrollspy – Highlight Nav Links Based on Scroll
Meta Title: Bootstrap Scrollspy Guide – Setup, Examples, and Best Practices
Meta Description: Learn how to use Bootstrap 5 Scrollspy to auto-update nav links as you scroll. Includes HTML and JS methods, nav + sidebar demos, and accessibility tips.
URL Slug: bootstrap-5-scrollspy
Primary Keyword:
Secondary Keywords:

Would you like to proceed with Bootstrap 5 Modals, Tooltips, or Carousels next?

« Previous Next »

Share Now :