How to create Sidemenu using bootstrap 4?

How to create Sidemenu using bootstrap 4?


Published at - Aug 13, 2021

Hello, Today I’m goining to build sidemenu using bootstrap 4 which is required while developing admin panels. Here are the required stpes which toy need while creating the demo.

Setup and install bootstrap – In this step we need to create a new project using npm, to create a new project via npm first create a folder with any name you want I’m going to use “sidemenu” in this demo. Inside this folder open the terminal and run npm init and provide the information about your projects asked by npm in you don’t want to fill all this then you can use npm init -y command to create the project.

npm init -y

Create files – Now in this step, we need to open our project with any text editor you want I’m using vscode. After that, we need to create index.html file in the root of the project and paste the following code in this file and save.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 4 Sidemenu</title>
</head>
<body>
    
</body>
</html>

Install Bootstrap 4.1.1 and Jquery 3.3.1 – To install bootstrap in our project we have run npm install -s [email protected] [email protected] inside the project terminal.

Include Bootstrap and Jquery in our project – Now to use bootstrap and jquery in the project first we need to include them in our project to modify the index.html file to include files according to the code below.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 4 Sidemenu</title>
    <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css">
</head>
<body>
    
    <script src="./node_modules/jquery/dist/jquery.min.js"></script>
    <script src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
</body>
</html>

Create Sidemenu – This is final step in which I am going to create the sidemenu working.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 4 Sidemenu</title>
    <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css">
    <style>
        html {
            position: relative;
            min-height: 100%;
        }

        body {
            padding-top: 4.5rem;
            margin-bottom: 4.5rem;
        }

        .footer {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 3.5rem;
        line-height: 3.5rem;
        background-color: #ccc;
        }

        .nav-link:hover {
        transition: all 0.4s;
        }

        .nav-link-collapse:after {
        float: right;
        content: '\f067';
        font-family: 'FontAwesome';
        }

        .nav-link-show:after {
        float: right;
        content: '\f068';
        font-family: 'FontAwesome';
        }

        .nav-item ul.nav-second-level {
        padding-left: 0;
        }

        .nav-item ul.nav-second-level > .nav-item {
        padding-left: 20px;
        }

        @media (min-width: 992px) {
        .sidenav {
            position: absolute;
            top: 0;
            left: 0;
            width: 230px;
            height: calc(100vh - 3.5rem);
            margin-top: 3.5rem;
            background: #343a40;
            box-sizing: border-box;
            border-top: 1px solid rgba(0, 0, 0, 0.3);
        }

        .navbar-expand-lg .sidenav {
            flex-direction: column;
        }

        .content-wrapper {
            margin-left: 230px;
        }

        .footer {
            width: calc(100% - 230px);
            margin-left: 230px;
        }
        }


    </style>
</head>
<body>


    <nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-dark">
        <a class="navbar-brand" href="#">Sidebar Nav</a>
        <button
          class="navbar-toggler"
          type="button"
          data-toggle="collapse"
          data-target="#navbarCollapse"
          aria-controls="navbarCollapse"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
      
        <div class="collapse navbar-collapse" id="navbarCollapse">
          <ul class="navbar-nav mr-auto sidenav" id="navAccordion">
            <li class="nav-item active">
              <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Item 1</a>
            </li>
            <li class="nav-item">
              <a
                class="nav-link nav-link-collapse"
                href="#"
                id="hasSubItems"
                data-toggle="collapse"
                data-target="#collapseSubItems2"
                aria-controls="collapseSubItems2"
                aria-expanded="false"
              >Item 2</a>
              <ul class="nav-second-level collapse" id="collapseSubItems2" data-parent="#navAccordion">
                <li class="nav-item">
                  <a class="nav-link" href="#">
                    <span class="nav-link-text">Item 2.1</span>
                  </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">
                    <span class="nav-link-text">Item 2.2</span>
                  </a>
                </li>
              </ul>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Item 3</a>
            </li>
            <li class="nav-item">
              <a
                class="nav-link nav-link-collapse"
                href="#"
                id="hasSubItems"
                data-toggle="collapse"
                data-target="#collapseSubItems4"
                aria-controls="collapseSubItems4"
                aria-expanded="false"
              >Item 4</a>
              <ul class="nav-second-level collapse" id="collapseSubItems4" data-parent="#navAccordion">
                <li class="nav-item">
                  <a class="nav-link" href="#">
                    <span class="nav-link-text">Item 4.1</span>
                  </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">
                    <span class="nav-link-text">Item 4.2</span>
                  </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">
                    <span class="nav-link-text">Item 4.2</span>
                  </a>
                </li>
              </ul>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Item 5</a>
            </li>
          </ul>
          <form class="form-inline ml-auto mt-2 mt-md-0">
            <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
          </form>
        </div>
      </nav>
      
      <main class="content-wrapper">
        <div class="container-fluid">
          <h1>Main Content</h1>
        </div>
      </main>
      
      <footer class="footer">
        <div class="container">
            <div class="text-center">
                <span>Coded by <a href="https://hackeradda.com/">Hackeradda</a>, 2021</span>
            </div>
        </div>
      </footer>
    
    <script src="./node_modules/jquery/dist/jquery.min.js"></script>
    <script src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>

    <script>
        $(document).ready(function() {
            $('.nav-link-collapse').on('click', function() {
                $('.nav-link-collapse').not(this).removeClass('nav-link-show');
                $(this).toggleClass('nav-link-show');
            });
        });

    </script>
</body>
</html>

Open Project – Now in this step we need to open our index.html file in a browser to preview.

Bootstrap 4 sidemenu

To support my work you can donate – Donate





About author

Harendra
Harendra Kanojiya

Hello, I am Harendra Kumar Kanojiya - Owner of this website and a Fullstack web developer. I have expertise in full-stack web development using Angular, PHP, Node JS, Python, Laravel, Codeigniter and, Other web technologies. I also love to write blogs on the latest web technology to keep me and others updated. Thank you for reading the articles.



Follow Us

Follow us on facebook Click Here

Facebook QR
Scan from mobile
Join our telegram channel Click Here
Telegram QR
Scan from mobile