Bootstrap 5 Scrollspy with nested nav

Bootstrap 5 Scrollspy is one of the features which targets the navigation bar contents automatically on scrolling the area. The navigation highlights the navbar links as the user scrolls the page. Only nav or list groups may be utilized with Scrollspy. Scrollspy can work with a simple navbar and also a nested navbar. 

A nested navbar is one in which there is one whole navbar inside the already existing parent navbar. We can add the ms-*  class to the elements of the nested navbar to add a better experience and interface where * can take values from 1 to 9.

Syntax:

<nav id="navbarExample" class="navbar">
 <a class="navbar-brand" href="#cl-1">Navbar</a>
 <nav class="nav">
 <nav class="nav">
 ...
 </nav>
 </nav>
</nav>
<div data-bs-spy="scroll" data-bs-target="#navbarExample">
 <div id="cl-1">...</div>
 ... 
</div>

There is no usage of any distinct class or attribute for this, we just need to enclose one navbar inside another to make this happen.

Example 1: The code example below demonstrates how we can create a side navigation bar that has nested nav and options.

Output:

Example 2: The code example below demonstrates how we can add a nested nav inside a navbar that holds a toggler to hide or show the main nested nav.

Output:

Reference:https://getbootstrap.com/docs/5.0/components/scrollspy/#example-with-nested-nav