VOOZH about

URL: https://www.geeksforgeeks.org/bootstrap/bootstrap-5-scrollspy-via-data-attributes/

⇱ Bootstrap 5 Scrollspy Via data Attributes - GeeksforGeeks

  • Courses
  • Tutorials
  • Interview Prep

Bootstrap 5 Scrollspy Via data Attributes

Last Updated : 23 Jul, 2024

Bootstrap 5 Scrollspy Via data attributes facilitate adding the scrollspy behavior in the navigation. This will only work if we add the data-bs-spy attribute to the element that is to spy, along with including the data-bs-target attribute, specifying the id or class name of the parent element of the div container or the nav component.

Bootstrap 5 Scrollspy Via data attributes:

  • data-bs-spy: This attribute's job is to specify the element which will be spied on, i.e., the element which will be scrolled to.
  • data-bs-target: This attribute's job is to specify the id or class of the element the buttons or links on which will be clicked on to scroll.

Syntax:

<body data-bs-spy="scroll" 
 data-bs-target="selectorID/selectorCLASS">
 ...
</body>

Example 1: The below code example demonstrates how we can implement the Scrollspy using Data Attributes in a Navbar.

Output:

Example 2: This is another code example that demonstrates how we can implement the Scrollspy using Data Attributes in a Nested Side Navbar.

Output:

Reference: https://getbootstrap.com/docs/5.0/components/scrollspy/#via-data-attributes

Comment
Article Tags:

Explore