Bootstrap 5 Scrollspy

Welcome to The Coding College! In this guide, we’ll explore Bootstrap 5 Scrollspy, a dynamic feature that highlights navigation links as you scroll through sections of a page. It’s perfect for single-page websites or long-form content with multiple sections.

Scrollspy automatically updates the active state of navigation links, helping users keep track of their position within the page.

Features of Bootstrap 5 Scrollspy

  • Dynamic Navigation Highlighting: Automatically highlights active links in the navigation.
  • Smooth Scrolling: Works seamlessly with anchors for a better user experience.
  • Customizable Offsets: Adjusts based on your layout and design.
  • Lightweight and Flexible: Requires minimal setup and resources.

Getting Started with Bootstrap 5 Scrollspy

1. Include Bootstrap

Before using Scrollspy, ensure Bootstrap’s CSS and JavaScript files are included in your project. Use the Bootstrap CDN for quick integration:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap 5 Scrollspy Example</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Basic Scrollspy Example

Here’s how to create a basic Scrollspy-enabled layout with a fixed navigation bar and content sections:

HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Scrollspy Example</title>
  <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-example" data-bs-offset="50" tabindex="0">
  <!-- Navigation -->
  <nav id="navbar-example" class="navbar navbar-light bg-light fixed-top">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Scrollspy</a>
      <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>
    </div>
  </nav>

  <!-- Content Sections -->
  <div class="container" style="margin-top: 100px;">
    <section id="section1" style="height: 600px; background-color: #f8f9fa;">
      <h1>Section 1</h1>
      <p>Content for Section 1.</p>
    </section>
    <section id="section2" style="height: 600px; background-color: #e9ecef;">
      <h1>Section 2</h1>
      <p>Content for Section 2.</p>
    </section>
    <section id="section3" style="height: 600px; background-color: #f8f9fa;">
      <h1>Section 3</h1>
      <p>Content for Section 3.</p>
    </section>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Explanation

  1. data-bs-spy="scroll": Enables Scrollspy functionality on the <body> element.
  2. data-bs-target="#navbar-example": Links Scrollspy to the specified navigation container.
  3. data-bs-offset="50": Adjusts the active link detection based on the offset (e.g., accounting for fixed headers).
  4. tabindex="0": Ensures focus for proper scrolling behavior.

Customizing Scrollspy

1. Adjusting the Offset

The data-bs-offset attribute ensures that Scrollspy works with your layout, especially if you have fixed headers. Adjust the value as needed:

<body data-bs-spy="scroll" data-bs-target="#navbar-example" data-bs-offset="75">

2. Using Smooth Scrolling

For a better user experience, enable smooth scrolling with CSS:

html {
  scroll-behavior: smooth;
}

3. Adding Active Styles

Customize the appearance of the active link by overriding the .active class:

.nav-link.active {
  font-weight: bold;
  color: #007bff;
}

4. Nested Navigation

Scrollspy also supports nested navigation. Here’s an example:

<nav id="navbar-example2" class="navbar navbar-light bg-light fixed-top">
  <ul class="nav nav-pills">
    <li class="nav-item"><a class="nav-link" href="#item-1">Item 1</a></li>
    <li class="nav-item">
      <a class="nav-link" href="#item-2">Item 2</a>
      <ul class="nav">
        <li class="nav-item"><a class="nav-link" href="#item-2-1">Item 2-1</a></li>
        <li class="nav-item"><a class="nav-link" href="#item-2-2">Item 2-2</a></li>
      </ul>
    </li>
  </ul>
</nav>

<div class="content">
  <section id="item-1" style="height: 600px; background-color: #f8f9fa;">Item 1 Content</section>
  <section id="item-2" style="height: 600px; background-color: #e9ecef;">
    <h2>Item 2</h2>
    <div id="item-2-1" style="height: 300px; background-color: #f8f9fa;">Item 2-1 Content</div>
    <div id="item-2-2" style="height: 300px; background-color: #e9ecef;">Item 2-2 Content</div>
  </section>
</div>

5. JavaScript Initialization

If you prefer JavaScript initialization over data attributes:

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

FAQs About Bootstrap 5 Scrollspy

1. Why isn’t Scrollspy working?

Ensure you:

  • Include data-bs-spy="scroll" and link to the correct data-bs-target.
  • Add id attributes to your target sections.
  • Verify that Bootstrap JavaScript is correctly loaded.

2. How can I highlight nested links?

Use nested navigation and ensure each sub-section has an id and a corresponding anchor link.

3. Can I use Scrollspy with dynamically loaded content?

Yes, reinitialize Scrollspy with JavaScript after content is loaded:

scrollSpy.refresh();

Conclusion

Bootstrap 5 Scrollspy is an excellent tool for creating dynamic, user-friendly navigation for single-page websites or long-scrolling content. It enhances the user experience by keeping navigation intuitive and accessible.

Leave a Comment