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.
HTML
<!doctype html> < html lang = "en" > < 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 > </ head > < body > < nav class="navbar navbar-expand-lg navbar-light bg-light"> < div class = "container-fluid" > < a class = "navbar-brand" href = "#" > Navbar </ a > < div class = "collapse navbar-collapse" id = "navbarScroll" > < ul class = "navbar-nav me-auto my-2 my-lg-0" style = "--bs-scroll-height:100px;" > < li class = "nav-item" > < a class = "nav-link" aria-current = "page" href = "#ds" > DS </ a > </ li > < li class = "nav-item" > < a class = "nav-link" href = "#algo" > Algorithms </ a > </ li > < li class = "nav-item" > < a class = "nav-link" href = "#cpp" > C++ </ a > </ li > < li class = "nav-item" > < a class = "nav-link" href = "#bs5" > Bootstrap 5 </ a > </ li > </ ul > </ div > </ div > </ nav > < h1 class = "m-4 text-success" > w3wiki </ h1 > < h4 class = "m-4" > Bootstrap 5 Navbar Scrolling </ h4 > < div class = "container mt-5" tabindex = "0" > < h4 id = "ds" > Data Structures </ h4 > < 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. The idea is to reduce the space and time complexities of different tasks. The choice of a good data structure makes it possible to perform a variety of critical operations effectively. An efficient data structure also uses minimum memory space and execution time to process the structure </ p > < h4 id = "algo" > Algorithms </ h4 > < 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”. It can be understood by taking the example of cooking a new recipe. To cook a new recipe, one reads the instructions and steps and executes them one by one, in the given sequence. The result thus obtained is the new dish is cooked perfectly. Every time you use your phone, computer, laptop, or calculator you are using Algorithms. </ p > < h4 id = "cpp" > C++ </ h4 > < 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. C++ runs on lots of platforms like Windows, Linux, Unix, Mac etc.C++ is a general-purpose programming language that was developed as an enhancement of the C language to include object-oriented paradigms. It is an imperative and compiled language. C++ is a middle-level language rendering it the advantage of programming low-level (drivers, kernels) and even higher-level applications (games, GUI, desktop apps etc.). The basic syntax and code structure of both C and C++ are the same. </ p > < h4 id = "bs5" > BootStrap 5 </ h4 > < p > Bootstrap is a free and open-source collection of CSS and JavaScript/jQuery code used for creating dynamic websites layout and web applications. Bootstrap is one of the most popular front-end frameworks which has really a nice set of predefined CSS codes. Bootstrap uses different types of classes to make responsive websites. Bootstrap 5 was officially released on 16 June 2020 after several months of redefining its features. Bootstrap is a framework that is suitable for mobile-friendly web development. it means the code and the template available on bootstrap are applicable to various screen sizes. It is responsive for every screen size. </ p > </ div > </ body > </ html > |
Output:
Example 2: The code example demonstrates how to implement this navbar scrolling inside a responsive nested navbar.
HTML
<!doctype html> < html lang = "en" > < 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 > </ head > < body > < nav class="navbar navbar-expand-lg navbar-light bg-light"> < div class = "container-fluid" > < a class = "navbar-brand" href = "#" > Navbar </ a > < button class = "navbar-toggler" type = "button" data-bs-toggle = "collapse" data-bs-target = "#navbarScroll" aria-controls = "navbarScroll" aria-expanded = "false" aria-label = "Toggle navigation" > < span class = "navbar-toggler-icon" ></ span > </ button > < div class = "collapse navbar-collapse" id = "navbarScroll" > < ul class="navbar-nav me-auto my-2 my-lg-0 navbar-nav-scroll" style = "--bs-scroll-height: 200px;" > < li class = "nav-item" > < a class = "nav-link" aria-current = "page" href = "#ds" > DS </ a > </ li > < li class = "nav-item" > < a class = "nav-link" href = "#algo" > Algorithms </ a > </ li > < nav class = "navbar-nav navbar-nav-scroll" id = "navbarScroll" > < 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 = "#" > More options </ button > < ul class = "dropdown-menu" style = "--bs-scroll-height:100px;" > < nav class = "navbar navbar-expand-sm" id = "scrollspy" > < a class = "nav-link ms-3 my-1" href = "#bs5" > Bootstrap </ a > < a class = "nav-link ms-3 my-1" href = "#cpp" > C++ </ a > </ nav > </ ul > </ div > </ nav > </ ul > </ div > </ div > </ nav > < h1 class = "m-4 text-success" > w3wiki </ h1 > < h4 class = "m-4" > Bootstrap 5 Navbar Scrolling </ h4 > < div class = "container mt-5" tabindex = "0" > < h4 id = "ds" > Data Structures </ h4 > < 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. The idea is to reduce the space and time complexities of different tasks. The choice of a good data structure makes it possible to perform a variety of critical operations effectively. An efficient data structure also uses minimum memory space and execution time to process the structure </ p > < h4 id = "algo" > Algorithms </ h4 > < 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”. It can be understood by taking the example of cooking a new recipe. To cook a new recipe, one reads the instructions and steps and executes them one by one, in the given sequence. The result thus obtained is the new dish is cooked perfectly. Every time you use your phone, computer, laptop, or calculator you are using Algorithms. </ p > < h4 id = "cpp" > C++ </ h4 > < 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. C++ runs on lots of platforms like Windows, Linux, Unix, Mac etc.C++ is a general-purpose programming language that was developed as an enhancement of the C language to include object-oriented paradigm. It is an imperative and a compiled language. C++ is a middle-level language rendering it the advantage of programming low-level (drivers, kernels) and even higher-level applications (games, GUI, desktop apps etc.). The basic syntax and code structure of both C and C++ are the same. </ p > < h4 id = "bs5" > BootStrap 5 </ h4 > < p > Bootstrap is a free and open-source collection of CSS and JavaScript/jQuery code used for creating dynamic websites layout and web applications. Bootstrap is one of the most popular front-end frameworks which has really a nice set of predefined CSS codes. Bootstrap uses different types of classes to make responsive websites. Bootstrap 5 was officially released on 16 June 2020 after several months of redefining its features.Bootstrap is a framework that is suitable for mobile-friendly web development. it means the code and the template available on bootstrap are applicable to various screen sizes. It is responsive for every screen size. </ p > </ div > </ body > </ html > |
Output:
Reference: https://getbootstrap.com/docs/5.0/components/navbar/#scrolling
Contact Us