Open In App

Create Responsive Sidebar Menu to Top Navbar in Bootstrap

Last Updated : 09 Apr, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

Bootstrap's responsive sidebar streamlines navigation across devices. It features links to the Home, About Us, and Contact Us sections. The page displays sample content like images and welcoming messages, ensuring user-friendly browsing experiences. By toggling seamlessly, users can access information effortlessly across different screen sizes.

Table of Content

Sidebar on Small Screen

  • Include Bootstrap CSS and JavaScript files in the <head> section of your HTML document.
  • Bootstrap class "navbar class" used to create a navigation bar. This class "navbar-expand-lg" makes the navbar expandable (collapsible) for large screens and smaller ones. It ensures that the navbar collapses into a hamburger icon on smaller screens.
  • Element with class "collapse navbar-collapse" and id "navbarSupportedContent" defines a collapsible navbar content area.
  • Element with class "offcanvas offcanvas-start" with tabindex "-1" and id "sidebar" initializes an off-canvas sidebar menu that slides in from the left on smaller screens.
  • Element with class "offcanvas-header" defines the header section of the offcanvas sidebar.

Example: Illustration of responsive sidebar menu to top navbar in Bootstrap 5

HTML 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Sidebar Menu</title>
    <link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
          rel="stylesheet">
</head>

<body>

    <!-- Navbar Setup -->
    <nav class="navbar navbar-expand-lg navbar-light bg-success">
        <div class="container-fluid">
            <!-- Navbar brand -->
            <a class="navbar-brand text-light" href="#">
                GeeksforGeeks
            </a>
            <!-- Navbar toggle button -->
            <button class="navbar-toggler" 
                    type="button" 
                    data-bs-toggle="offcanvas" 
                    data-bs-target="#sidebar"
                aria-controls="sidebar">
                <span class="navbar-toggler-icon"></span>
            </button>
            <!-- Top menu in navbar -->
            <div class="collapse navbar-collapse" 
                 id="navbarSupportedContent">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                        <a class="nav-link active text-light" 
                           aria-current="page" href="#">
                            Home
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-light" href="#">
                            About Us
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-light" href="#">
                            Contact Us
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- Sidebar Setup -->
    <div class="offcanvas offcanvas-start" 
         tabindex="-1" id="sidebar">
        <div class="offcanvas-header">
            <h5 class="offcanvas-title text-success">
                Menu
            </h5>
            <button type="button" 
            class="btn-close text-reset" 
                    data-bs-dismiss="offcanvas" 
                    aria-label="Close">
            </button>
        </div>
        <div class="offcanvas-body bg-success">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link text-light" href="#">
                        Home
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-light" href="#">
                        About Us
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-light" href="#">
                        Contact Us
                    </a>
                </li>
            </ul>
        </div>
    </div>

    <!-- Content Below Navbar and Sidebar Menu -->
    <div class="container-fluid">
        <div class="row">
            <!-- First column for content -->
            <div class="col-lg-6">
                <h2>What is CSS</h2>
                <p>
                    This CSS Tutorial is designed for
                    both beginners and experienced
                    professionals. Here, you will learn
                    CSS from basic to advanced concepts,
                    such as properties, selectors,
                    functions, media queries, and more.
                </p>
                <p>
                    CSS or Cascading Style Sheets is a
                    stylesheet language used to add styles
                    to the HTML document. It describes how
                    HTML elements should be displayed on the
                    web page. CSS was first proposed by Håkon
                    Wium Lie in 1994 and later developed by Lie
                    and Bert Bos, who published the CSS1
                    specification in 1996. The reason for using
                    CSS is to simplify the process of making web
                    pages presentable. CSS allows web developers
                    to control the visual appearance of web pages.
                </p>
            </div>
            <!-- Second column for content -->
            <div class="col-lg-6">
                <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20230427130955/CSS-Tutorial.webp"
                    class="img-fluid my-2">
            </div>

        </div>
    </div>

    <!-- Include Bootstrap JavaScript -->
    <script src=
"https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js">
    </script>
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js">
    </script>
</body>

</html>

Output:


responsive-sidebarMenu-Bootstrap
Responsive Sidebar Menu to Top Navbar in Bootstrap Example Output


  • Add the Bootstrap CSS and JavaScript files within the <head> section of your HTML document.
  • Use the Bootstrap navbar component for the navbar structure. Add a toggle button for small screen devices using a navbar-toggler.
  • The sidebar is implemented using Bootstrap's offcanvas component. It slides in from the left when triggered by the navbar toggle button. It has a background color of green (bg-success) and is hidden (d-md-block) on screens larger than medium (d-md-block).
  • Inside the sidebar, there's an offcanvas header with the title "GFG Sidebar" and a close button (btn-close). The body of the sidebar contains a vertical list of links (nav-link) for navigation.
  • The main content and sidebar menu are placed within a container-fluid (container-fluid) to ensure responsiveness.
  • The sidebar menu is placed inside a navigation element (nav) with the class sidebar and positioned sticky (position-sticky) to remain visible while scrolling.

Example: Illustration of responsive sidebar menu to top navbar in Bootstrap 5

HTML 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0">
    <title>Left Sidebar Example</title>
    <!-- Bootstrap CSS -->
    <link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
        rel="stylesheet">
    <style>
        /* Hide toggle button on larger screens */
        @media (min-width: 768px) {
            .navbar-toggler {
                display: none;
            }
        }
    </style>
</head>

<body>

    <nav class="navbar navbar-light 
                bg-success border-bottom-0">
        <!-- Navbar toggle button (hamburger icon) -->
        <button class="navbar-toggler d-block d-md-none"
                type="button" data-bs-toggle="offcanvas"
                data-bs-target="#sidebar"
                aria-controls="sidebar">
            <span class="navbar-toggler-icon"></span>
        </button>
    </nav>

    <div class="offcanvas offcanvas-start 
                bg-success d-md-block" 
        tabindex="-1" id="sidebar"
        aria-labelledby="sidebarLabel">
        <div class="offcanvas-header">
            <h5 class="offcanvas-title text-light"
                id="sidebarLabel">GFG Sidebar</h5>
            <button type="button"
                    class="btn-close text-reset"
                    data-bs-dismiss="offcanvas"
                    aria-label="Close">
            </button>
        </div>
        <div class="offcanvas-body">
            <ul class="nav flex-column">
                <li class="nav-item">
                    <a class="nav-link active text-light"
                    href="#">
                    Home
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-light"
                    href="#">
                    About Us
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-light"
                    href="#">
                    Contact Us
                    </a>
                </li>
            </ul>
        </div>
    </div>

    <div class="container-fluid">
        <div class="row">
            <nav id="sidebarMenu"
                class="col-md-3 col-lg-2 d-none 
                        d-md-block bg-light sidebar">
                <div class="position-sticky 
                            bg-success vh-100">
                    <div class="pt-3">
                        <h6 class="sidebar-heading d-flex 
                                justify-content-between 
                                align-items-center px-3 
                                mt-4 mb-1 text-muted">
                            <span class="text-light">
                                GFG sidebar
                            </span>
                        </h6>
                        <ul class="nav flex-column">
                            <li class="nav-item">
                                <a class="nav-link active 
                                        text-light" 
                                href="#">
                                    Home
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link text-light"
                                href="#">
                                    About Us
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link text-light"
                                href="#">
                                    Contact Us
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
            <main class="col-md-9 ms-sm-auto
                        col-lg-10 px-md-4 ">
                <div class="pt-3">
                    <h2 class="text-primary">
                    TypeScript
                    </h2>
                    <p class="text-success">
                    Responsive sidebar menu to 
                    top navbar in Bootstrap 5
                    </p>
                    <p class="text-success">
                        TypeScript is a strict superset
                        of JavaScript, which means anything
                        that is implemented in JavaScript 
                        can be implemented using TypeScript
                        along with the choice of adding 
                        enhanced features. It is an Open Source
                        Object Oriented programming language and
                        strongly typed language. As TS code is 
                        converted to JS code it makes it easier 
                        to integrate into JavaScript projects. 
                        The TypeScript Tutorial provides the 
                        complete guide from beginner to 
                        advanced level.
                    </p>
                </div>
            </main>
        </div>
    </div>

    <!-- Bootstrap Bundle with Popper -->
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
    </script>
</body>

</html>

Output:


responsive-sidebarMenu2-Bootstrap
Responsive Sidebar Menu to Top Navbar in Bootstrap Example Output



Next Article
How to create a Responsive Sidebar in Bootstrap?
author
skaftafh
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