Bootstrap 5 Scrollspy in Navbar

Last Updated : 22 Feb, 2023

Bootstrap 5 Scrollspy in Navbar is used to apply the Scrollspy on the Navbar. If you want to shift your active navbar item throughout the scrolling then this will be helpful.

Things to remember to create Scrollspy in Navbar:

It is used on the navbar component.
The position of the scrollspy must be relative.
Anchor tags are required and must point to an element with the same id

Pre-requisite: Bootstrap-5 Scrollspy and Bootstrap-5 Navbar.

Bootstrap 5 Scrollspy in Navbar Class: There is no predefined class for all the things you need to create Scrollspy in Navbar is covered Scrollspy & Navbar components.

Required attribute to create Scrollspy in Navbar:

data-bs-spy=”scroll”: It should be of scroll type.
data-bs-target=”.target-element”: It should be applied to a navbar or list items.

Syntax :

<body data-bs-spy="scroll" data-bs-target="#..">
<nav class="navbar">
    <ul class="navbar-nav">
        <li class="nav-item">
            <a class="nav-link" href="#GFG">GFG1</a>
        </li> . . .
    </ul> 
</nav>
...
</body>

Example 1: Below example is about scrollspy and how the active classes change when we scroll the content.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"
          rel="stylesheet">
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js">
    </script>
</head>
 
<body data-bs-spy="scroll" data-bs-target=".navbar">
    <br><br><br>
    <div class="text-center">
        <h1 class="text-success">GeeksforGeeks</h1>
        <h2>Bootstrap 5 Scrollspy in navbar</h2>
    </div>
    <nav class="navbar navbar-expand-sm bg-secondary fixed-top">
        <div class="container-fluid">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link"
                        href="#scrollspyHeading1">DSA</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link"
                        href="#scrollspyHeading2">Data Structures</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link"
                        href="#scrollspyHeading3">Algorithms</a>
                </li>
 
            </ul>
        </div>
    </nav>
    <div class="scrollspy-example container">
        <h4 id="scrollspyHeading1">DSA</h4>
        <p>
            The term DSA stands for Data Structures and Algorithms. 
            As the name itself suggests, it is a combination of two
            separate yet interrelated topics - Data Structure and Algorithms.
        </p>
        <br>
        <h4 id="scrollspyHeading2">Data Structures</h4>
        <p>
            A data structure is not only used for organizing the data. It is also
            used for processing, retrieving, and storing data. There are different 
            basic and advanced types of data structures that are used in almost every
            program or software system that has been developed. So we must have good 
            knowledge about data structures.
        </p><br>
        <h4 id="scrollspyHeading3">Algorithms</h4>
        <p>
            The word Algorithm means ” A set of rules to be followed in calculations 
            or other problem-solving operations
            ” Or
            ” A procedure for solving a mathematical problem in a finite number of 
            steps that frequently by recursive
            operations “. 
        </p>
    </div>
</body>
 
</html>

Output:

Bootstrap 5 Scrollspy in Navbar

Example 2: In the below example we have implemented scrollspy using a scrollable container.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"
          rel="stylesheet">
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js">
    </script>
</head>
 
<body data-bs-spy="scroll" data-bs-target=".navbar">
  <br><br><br>
  <div class="text-center">
    <h1 class="text-success">GeeksforGeeks</h1>
    <h2>Bootstrap 5 Scrollspy in navbar</h2>
  </div>
  <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
    <div class="container-fluid">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="#section1">C++</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#section2">Java</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#section3">Python</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#section4">Javascript</a>
        </li>
      </ul>
    </div>
  </nav>
  <br><br>
  <div class="w-50" style="height: 300px; overflow-y: scroll;">
    <div id="section1" class="container-fluid bg-success ">
      <h4>C++</h4>
      <p>
          C++ is a general-purpose programming language and is widely used
          nowadays for competitive programming. It has imperative, object-oriented
          and generic programming features. C++ runs on lots of platforms like Windows,
          Linux, Unix, Mac etc.
      </p>
    </div>
 
    <div id="section2" class="container-fluid bg-secondary">
      <h4>Java</h4>
      <p>
          Java has been one of the most popular programming languages for many years. 
          Java is Object Oriented. However, it is not considered as pure object-oriented
          as it provides support for primitive data types (like int, char, etc)
      </p>
    </div>
 
    <div id="section3" class="container-fluid bg-success">
      <h4>Python</h4>
      <p>
          Python is a high-level, general-purpose and a very popular programming language.
          Python programming language (latest Python 3) is being used in web development, 
          Machine Learning applications, along with all cutting edge technology in Software
          Industry. 
      </p>
    </div>
    <div id="section4" class="container-fluid bg-secondary">
      <h4>Javascript</h4>
      <p>
          JavaScript (JS) is the world's most popular lightweight, interpreted compiled
          programming language. It is also known as a scripting language for web pages. 
          It can be used for Client-side as well as Server-side developments.
      </p>
    </div>
  </div>
</body>
 
</html>

Output:

Bootstrap 5 Scrollspy in Navbar

Reference: https://getbootstrap.com/docs/5.0/components/scrollspy/#example-in-navbar

Suggest improvement

Bootstrap 5 Scrollspy dispose() Method

Bootstrap 5 Scrollspy getOrCreateInstance() Method

Share your thoughts in the comments

Accordion Component

Badges Component

Breadcrumb Component

Button group Component

Close button Component

Collapse Component

Offcanvas Component

Progress Component

Scrollspy Component

Spinners Component

Bootstrap 5 Scrollspy in Navbar

Syntax :

HTML

HTML

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?