Open In App

Bootstrap 5 Navbar Scrolling

Last Updated : 03 Apr, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

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=
        rel="stylesheet">
    <script src=
    </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=
        rel="stylesheet">
    <script src=
    </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 



Like Article
Suggest improvement
Previous
Next
Share your thoughts in the comments

Similar Reads