Bootstrap 5 Navbar Scrolling
Last Updated :
01 Aug, 2024
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
Similar Reads
Bootstrap 5 Navbar Supported Content Bootstrap 5 Navbar Supported content contains Navbar which supports various sub-components like .navbar-brand, .navbar-nav, .navbar-text, .navbar-toggler, and .navbar-scroll. Brand: It is a company, project, or product name. We add .navbar-brand to various components like a heading or a link. We can
2 min read
Bootstrap 5 Navbar Brand Bootstrap 5 Navbar brand is applied to the typical branding logo that sees in the top navigation bar. It may contain an image logo or text, etc. A Navbar helps readers in selecting topics, links, or sub-topics of their interest. Bootstrap 5 Navbar Brand: Text: The text in the user interface is added
3 min read
Bootstrap 5 Navbar Brand Text A navigation bar is used in every website to make it more user-friendly so that the navigation through the website becomes easy and the user can directly search for the topic of their interest. Navbar Brand Text is used to add text in place of the brand logo. We can write text or links using the nav
2 min read
Bootstrap Navbar Brand Image Bootstrap Navbar Brand Image is used to put the image inside of a navbar, a navigation bar component in the Bootstrap framework. It typically appears at the top of a webpage, serving as a visual identifier for the website or application and linking back to the homepage. Pre-requisite: To use images
2 min read
Bootstrap 5 Navbar Brand Image and Text Bootstrap 5 Navbar Brand Image and text are used to create a navbar that holds the image and text within it. A navbar can have only text, only image or both a few times you can see buttons on navbar to navigate things. Bootstrap 5 Navbar Brand Image and text used classes: There are no specific class
2 min read
Bootstrap 5 Navbar Nav Bootstrap 5 Navbar Nav simplifies navigation creation by grouping navigation links within a container element with the nav class. Use nav-item for each link and nav-link for styling. Customize with optional classes like "active" for the current page. Bootstrap 5 Navbar Nav class: There is no specifi
2 min read
Bootstrap 5 Navbar Forms Bootstrap 5 Navbar Forms are used to create the components like a search bar, or login within a navbar. Bootstrap 5 Navbar Forms Classes: No special classes are used in Navbar Forms. You can customize the form using Navbar and Form classes Syntax: <nav class="navbar"> <form> <input cl
2 min read
Bootstrap 5 Navbar Text Navbar Text is used to put some text on the navbar. To do so Bootstrap 5 brings the Bootstrap 5 Navbar Text features. Creating a navbar is obvious when we are creating a website, and putting text on the navbar is required to guide the visitors to the right destination. Navbar Text Class: navbar-text
2 min read
Bootstrap 5 Navbar Color Schemes Bootstrap 5 Navbar Color schemes is used to customize a navbar using navbar light and dark themes, along with background color utilities. Bootstrap 5 Navbar Color schemes Classes: No special classes are used in Navbar Color schemes. We have an article on the Background colors that can be used to giv
2 min read
Bootstrap 5 Navbar Containers The container layout can define the main frame of the page using header, content, sidebar, and footer components. We can also add a navbar at the top of the webpage using the container navbar component. This is not that important but you can wrap up the nav bar in a container to center it on a page
2 min read