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.
HTML
<!doctype html><html lang="en"> <head> <link href= rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <script src= integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"> </script> <script> $(function(){ $('#work').on('activate.bs.scrollspy') }); </script> <style> body { position: relative; } </style></head> <body class="m-2"> <h1 class="ms-5 text-success"> GeeksforGeeks </h1> <h4 class="ms-5">Bootstrap 5 Scrollspy with nested nav </h4> <nav class="container-fluid navbar navbar-expand-sm navbar-light bg-light" id="scrollspy"> <a class="nav-link active" href="#dataStructs"> Data Structures</a> <a class="nav-link" href="#algo"> Algorithms</a> <nav class="navbar" id="scrollspy"> <div class="dropdown"> <button class="btn btn-primary dropdown-toggle ms-4 my-1" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false" href="#other"> Other Navbar </button> <ul class="dropdown-menu bg-dark" aria-labelledby="dropdownMenuButton1"> <nav class="navbar navbar-expand-sm navbar-dark bg-dark" id="scrollspy"> <a class="nav-link ms-3 my-1" href="#bootstrap"> Bootstrap</a> <a class="nav-link ms-3 my-1" href="#cpp"> C++</a> </nav> </ul> </div> </nav> </nav> <div class="container-fluid p-5 pt-2" data-spy="scroll" data-target="#scrollspy" data-offset="50"> <div class=""> <div id="dataStructs"> <h2>Data Structures</h2> <p> A data structure is a group of data elements that provides the easiest way to store and perform different actions on the data of the computer. A data structure is a particular way of organizing data in a computer so that it can be used effectively. </p> </div> <div id="algo"> <h2>Algorithms</h2> <p> The word Algorithm means ” A set of finite rules or instructions to be followed in calculations or other problem-solving operations ” Or ” A procedure for solving a mathematical problem in a finite number of steps that frequently involves recursive operations”..</p> </div> <div id="other"> <h1>Others</h1> </div> <div id="bootstrap"> <h2>Bootstrap</h2> <p> Bootstrap is a free and open-source collection of CSS and JavaScript/jQuery code used for creating dynamic websites layout and web applications. </p> </div> <div id="cpp"> <h2>C++</h2> <p> C++ is a general-purpose programming language and is widely used nowadays for competitive programming. It has imperative, object-oriented and generic programming features. </p> </div> </div> </div> </body> </html> |
Output:
Bootstrap 5 Scrollspy with nested nav
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.
HTML
<!doctype html><html lang="en"> <head> <link href= rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <script src= integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"> </script> <script> $(function(){ $('#work').on('activate.bs.scrollspy') }); </script> <style> body { position: relative; } </style></head> <body class="m-2"> <h1 class="ms-5 text-success"> GeeksforGeeks </h1> <h4 class="ms-5 ">Bootstrap 5 Scrollspy with nested nav </h4> <nav class="navbar navbar-dark bg-dark"> <div class="container-fluid"> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".nav-col" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <nav class="collapse container-fluid navbar navbar-expand-sm navbar-dark bg-dark nav-col" id="scrollspy"> <a class="nav-link active" href="#dataStructs"> Data Structures</a> <a class="nav-link" href="#algo"> Algorithms</a> <nav class="navbar" id="scrollspy"> <div class="dropdown"> <button class="btn btn-primary dropdown-toggle ms-4 my-1" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false" href="#other"> Nested Navbar </button> <ul class="dropdown-menu bg-dark" aria-labelledby="dropdownMenuButton1"> <nav class="navbar navbar-expand-sm navbar-dark bg-dark" id="scrollspy"> <a class="nav-link ms-3 my-1" href="#bootstrap"> Bootstrap</a> <a class="nav-link ms-3 my-1" href="#cpp"> C++</a> </nav> </ul> </div> </nav> </nav> </div> </nav> <div class="container-fluid p-5 pt-2" data-spy="scroll" data-target="#scrollspy" data-offset="50"> <div class=""> <div id="dataStructs"> <h2>Data Structures</h2> <p> A data structure is a group of data elements that provides the easiest way to store and perform different actions on the data of the computer. A data structure is a particular way of organizing data in a computer so that it can be used effectively. </p> </div> <div id="algo"> <h2>Algorithms</h2> <p> The word Algorithm means ” A set of finite rules or instructions to be followed in calculations or other problem-solving operations ” Or ” A procedure for solving a mathematical problem in a finite number of steps that frequently involves recursive operations”..</p> </div> <div id="other"> <h1>Others</h1> </div> <div id="bootstrap"> <h2>Bootstrap</h2> <p> Bootstrap is a free and open-source collection of CSS and JavaScript/jQuery code used for creating dynamic websites layout and web applications. </p> </div> <div id="cpp"> <h2>C++</h2> <p> C++ is a general-purpose programming language and is widely used nowadays for competitive programming. It has imperative, object-oriented and generic programming features. </p> </div> </div> </div></body> </html> |
Output:
Bootstrap 5 Scrollspy with nested nav
Reference: https://getbootstrap.com/docs/5.0/components/scrollspy/#example-with-nested-nav
Please Login to comment...