Bootstrap5

To identify which link is activated currently in the viewport, use the ScrollSpy component of Boostrap. Specifically, ScrollSpy can only be used within the nav component and list group. ScrollSpy can only be added with the anchor tag holding that particular element using an id, 

 

<nav id="navbar-example1" class="navbar navbar-light bg-light px-3">

  <a class="navbar-brand" href="#">Navbar brand</a>

  <ul class="nav nav-pills">

    <li class="nav-item">

      <a class="nav-link" href="#scrollspyHeading2">Second</a>

    </li>

     <li class="nav-item dropdown">

      <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown list</a>

      <ul class="dropdown-menu">

        <li><a class="dropdown-item" href="#scrollspyHeading3">one</a></li>

        <li><a class="dropdown-item" href="#scrollspyHeading4">two</a></li>

        <li><hr class="dropdown-divider"></li>

        <li><a class="dropdown-item" href="#scrollspyHeading5">three</a></li>

      </ul>

    </li>

  </ul>

</nav>


 

ScrollSpy can also be added in a nested nav format and list group format as well

Subscribe For Daily Updates

c beginner programs