VOOZH about

URL: https://www.geeksforgeeks.org/bootstrap/bootstrap-5-scrollspy-in-navbar/

⇱ Bootstrap 5 Scrollspy in Navbar - GeeksforGeeks

  • Courses
  • Tutorials
  • Interview Prep

Bootstrap 5 Scrollspy in Navbar

Last Updated : 1 Aug, 2024

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.

Output:

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

Output:

Comment

Explore