|
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/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/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">
GeeksforGeeks
</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/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/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">
GeeksforGeeks
</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
|
