An example of Scrollspy using Bootstrap 5

Bootstrap 5 Demo

Bootstrap 5 Code		Output
<html> <head> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script> <style> body { position: relative; } .cust1{ padding:100px 20px; } </style> </head> <body data-bs-spy="scroll" data-bs-target=".navbar" data-bs-offset="50"> <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top"> <div class="container-fluid " > <ul class="navbar-nav ms-auto mb-2 mb-lg-0"> <li class="nav-item"> <a class="nav-link" href="#comp1">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#comp2">Products</a> </li> <li class="nav-item"> <a class="nav-link" href="#comp3">Specials</a> </li> <li class="nav-item"> <a class="nav-link" href="#comp4">Price</a> </li> <li class="nav-item"> <a class="nav-link" href="#comp5">Contact</a> </li> <li class="nav-item"> <a class="nav-link" href="#comp6">About</a> </li> </ul> </div> </nav> <div id="comp1" class="container-fluid bg-secondary text-white cust1" > <h1>Home</h1> <p>Content like Carousel goes here</p> <p>Add more content here</p> </div> <div id="comp2" class="container-fluid bg-primary text-white cust1"> <h1>Products</h1> <p>List of Products</p> </div> <div id="comp3" class="container-fluid bg-info text-white cust1" > <h1>Specials</h1> <p>Special Products Information Go here</p> <p>Add some images etc.</p> </div> <div id="comp4" class="container-fluid bg-warning cust1" > <h1>Price</h1> <p>Price Table / Cards </p> </div> <div id="comp5" class="container-fluid bg-danger text-white cust1" > <h1>Contact</h1> <p>Contact Form here</p> </div> <div id="comp6" class="container-fluid bg-success text-white cust1" > <h1>About</h1> <p>About Company/Product/Services</p> <p>Link1</p> <p>Link2</p> </div> </body> </html>		Home Products Specials Price Contact About Home Content like Carousel goes here Add more content here Products List of Products Specials Special Products Information Go here Add some images etc. Price Price Table / Cards Contact Contact Form here About About Company/Product/Services Link1 Link2