Open In App

How to use Top Navigation with Left Navigation Bar using Bootstrap?

Last Updated : 19 Sep, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

Using Top Navigation with Left Navigation Bar in Bootstrap means creating a layout with a responsive top navigation bar (typically for global site navigation) and a left sidebar for additional links or menus. This combines Bootstrap’s grid system, navbar classes, and custom CSS for layout management.

Here are some common approaches:

Table of Content

Approach 1: Using Bootstrap's Grid System for Layout

Bootstrap's grid system to structure the layout. The page is divided into columns, with the sidebar occupying one column (e.g., col-2) and the main content occupying another (e.g., col-10), ensuring responsiveness and easy alignment.

Example 1: This example sets up a top navbar using Bootstrap's predefined classes and a left sidebar in a full-height container with custom CSS, combining responsive Bootstrap links and additional sidebar navigation links.

HTML 
<!DOCTYPE html>
<html>
  
<head>
    <!-- import bootstrap cdn-->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
        integrity=
"sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" 
        crossorigin="anonymous">
    <!-- import jquery cdn -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
        integrity=
"sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" 
        crossorigin="anonymous">
    </script>
    <!-- import popper.js cdn -->
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
        integrity=
"sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" 
        crossorigin="anonymous">
    </script>
    <!-- import javascript cdn -->
    <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
        integrity=
"sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" 
        crossorigin="anonymous">
    </script>
    <!-- CSS stylesheet -->
    <style type="text/css">
        html,
        body {
            height: 100%;
        }
        #green {
            height: 100%;
            background: green;
            text-align: center;
            color: black;
        }
    </style>
</head>
  
<body>
    <!-- top navbar -->
    <nav class="navbar navbar-expand-lg
            navbar-light bg-primary">
        <a class="navbar-brand" href="#">Navbar</a>
        <!-- hamburger button that toggles the navbar-->
        <button class="navbar-toggler" type="button" 
            data-toggle="collapse" data-target="#navbarNavAltMarkup"
            aria-controls="navbarNavAltMarkup" aria-expanded="false" 
            aria-label="Toggle navigation">
            <span class="navbar-toggler-icon">
            </span>
        </button>
        <!-- navbar links -->
        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
            <div class="navbar-nav">
                <a class="nav-item nav-link
                    active" href="#">
                  Home
                  </a>
                <a class="nav-item nav-link" href="#">Features</a>
                <a class="nav-item nav-link" href="#">Price</a>
                <a class="nav-item nav-link" href="#">About</a>
            </div>
        </div>
    </nav>
    <!-- This container contains the sidebar
            and main content of the page -->
    <!-- h-100 takes the full height of the body-->
    <div class="container-fluid h-100">
        <div class="row h-100">
            <div class="col-2" id="green">
                <h4>Sidebar</h4>
                <!-- Navigation links in sidebar-->
                <a href="#">Link 1</a>
                <br/>
                <br/>
                <a href="#">Link 2</a>
                <br/>
                <br/>
                <a href="#">Link 3</a>
                <br/>
                <br/>
                <a href="#">Link 4</a>
                <br/>
                <br/>
            </div>
            <!--Contains the main content
                    of the webpage-->
            <div class="col-10" style="text-align: justify;">
                Bootstrap is a free and open-source
                tool collection for creating responsive
                websites and web applications. It
                is the most popular HTML, CSS, and
                JavaScript framework for developing
                responsive, mobile-first web sites.
            </div>
        </div>
    </div>
</body>
  
</html>

Output:

Approach 2: Using Custom CSS for Fixed Sidebar Layout

The Custom CSS for Fixed Sidebar Layout approach uses custom CSS to create a fixed-position sidebar that remains full-height and separate from the main content. The top navbar spans the full width, while the content adjusts dynamically beside the fixed sidebar.

Example: This layout uses Bootstrap with a top navbar and left sidebar. The sidebar occupies col-2, while the main content and collapsible navbar take col-10, ensuring responsiveness with a hamburger menu on smaller screens.

HTML 
<!DOCTYPE html>
<html>
  
<head>
    <title>Topnav with sidebar</title>
    <!-- Import bootstrap cdn -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
        integrity=
"sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" 
        crossorigin="anonymous">
    <!-- Import jquery cdn -->
    <script src=
"https://code.jquery.com/jquery-3.5.1.slim.min.js"
        integrity=
"sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" 
        crossorigin="anonymous">
    </script>
    <!-- Import popper.js cdn -->
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
        integrity=
"sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" 
        crossorigin="anonymous">
    </script>
    <!-- Import javascript cdn -->
    <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
        integrity=
"sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" 
        crossorigin="anonymous">
    </script>
    <!-- CSS stylesheet -->
    <style type="text/css">
        html,
        body {
            height: 100%;
        }
        #green {
            height: 100%;
            background: green;
            text-align: center;
            color: black;
            padding: 15px;
        }
    </style>
</head>
  
<body>
    <!-- h-100 takes the full height of the body-->
    <div class="container-fluid h-100">
        <!-- h-100 takes the full height
                of the container-->
        <div class="row h-100">
            <div class="col-2" id="green">
                <h4>Sidebar</h4>
                <!-- Navigation links in sidebar-->
                <a href="#">Link 1</a><br />
                <br />
                <a href="#">Link 2</a><br />
                <br />
                <a href="#">Link 3</a><br />
                <br />
                <a href="#">Link 4</a><br />
                <br />
            </div>
            <div class="col-10" style="padding: 0;">
                <!-- Top navbar -->
                <nav class="navbar navbar-expand-lg
                                navbar-light bg-primary">
                    <a class="navbar-brand" href="#">Navbar</a>
                    <!-- Hamburger button that toggles the navbar-->
                    <button class="navbar-toggler" type="button" 
                        data-toggle="collapse"
                        data-target="#navbarNavAltMarkup" 
                        aria-controls="navbarNavAltMarkup" 
                        aria-expanded="false"
                        aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <!-- navbar links -->
                    <div class="collapse navbar-collapse" 
                        id="navbarNavAltMarkup">
                        <div class="navbar-nav">
                            <a class="nav-item nav-link
                                active" href="#">
                               Home
                              </a>
                            <a class="nav-item nav-link" href="#">Features</a>
                            <a class="nav-item nav-link" href="#">Price</a>
                            <a class="nav-item nav-link" href="#">About</a>
                        </div>
                    </div>
                </nav>
                <!-- Contains the main content of the webpage-->
                <p style="padding: 15px; text-align: justify;">
                    Bootstrap is a free and open-source
                    tool collection for creating responsive
                    websites and web applications.
                    It is the most popular HTML, CSS, and
                    JavaScript framework for developing
                    responsive, mobile-first web sites.
                </p>

            </div>
        </div>
    </div>
</body>
  
</html>

Output:


Next Article
How to put two columns one below other in sidebar in Bootstrap?

S
Shreyasi_Chakraborty
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox