Bootstrap 5 Navbar Scrolling

Bootstrap 5 Navbar Scrolling enables vertical navigation scrolling within the toggleable contents. Vertical scrolling implies the smooth scrolling of the contents from their toggleable options.

Bootstrap 5 Navbar Scrolling Classes:

• navbar: This class is used to mention the whole navbar component.
• navbar-nav-scroll: This class is used to specify that the navbar supports scrolling.

Syntax:

<nav class="navbar">
 <div class="" id="navbarScroll">
 <ul class="navbar-nav navbar-nav-scroll" 
 style="--bs-scroll-height: 100px;">
 <li class="nav-item">
 <a class="nav-link" href="#">Home</a>
 </li>
 ...
 </ul>
 </div>
</nav>

Example 1: The code below demonstrates how the navbar scroll can be implemented in basic navbar scrolling.

Output:

Example 2: The code example demonstrates how to implement this navbar scrolling inside a responsive nested navbar.

Output:

Reference:https://getbootstrap.com/docs/5.0/components/navbar/#scrolling