Bootstrap 4 Sidebar Menu Responsive Template

Bootstrap Side Navbar – Responsive sidebar template based on the Bootstrap 4 framework. An easy-to-use, totally responsive, Google Material Design impressed aspect navigation for modern web app design.

How to make use of it:

1. Include needed assets on the web page.

<link rel="stylesheet" href="/path/to/cdn/materialdesignicons.min.css">

<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css">
 <script src="/path/to/cdn/jquery.slim.min.js"></script>  <script src="/path/to/cdn/bootstrap.min.js"></script>

2. Include the Side Navigation’s JavaScript and CSS on the web page.

<link rel="stylesheet" href="css/sidebar.css"> <script src="js/main.js"></script>

3. Create the HTML for the aspect navigation.

<aside>
  <nav class="sidebar">
    <div class="sidebar-header">
      <a href="#" class="ml-4"> //Add Image Here </a>
      <i class="btn-sidebar-close mdi mdi-close mdi-24px"></i>
    </div>
    <div class="sidebar-content">
      <ul>
        <li class="header-menu">
          <span>General</span>
        </li>
        <li class="sidebar-dropdown">
          <a href="#">
          <i class="mdi mdi-monitor-dashboard mdi-18px"></i>
          <span class="menu-text">Dashboard</span>
          <span class="badge badge-pill badge-warning">New</span>
          </a>
          <div class="sidebar-submenu">
            <ul>
              <li><a href="#">Dashboard v.1</a></li>
              <li><a href="#">Dashboard v.2</a></li>
              <li><a href="#">Dashboard v.3<span class="badge badge-pill badge-success">Pro</span></a></li>
            </ul>
          </div>
        </li>
        <li class="sidebar-dropdown">
          <a href="#">
          <i class="mdi mdi-cart mdi-18px"></i>
          <span class="menu-text">E-commerce</span>
          <span class="badge badge-pill badge-danger">3</span>
          </a>
          <div class="sidebar-submenu">
            <ul>
              <li><a href="#">Products</a></li>
              <li><a href="#">Orders</a></li>
              <li><a href="#">Invoices</a></li>
              <li><a href="#">Credit cart</a></li>
            </ul>
          </div>
        </li>
        <li>
          <a href="#">
          <i class="mdi mdi-card-account-details-outline mdi-18px"></i>
          <span class="menu-text">Contacts</span>
          </a>
        </li>
        <li>
          <a href="#">
          <i class="mdi mdi-book mdi-18px"></i>
          <span class="menu-text">Projects</span>
          </a>
        </li>
        <li>
          <a href="#">
          <i class="mdi mdi-folder mdi-18px"></i>
          <span class="menu-text">Documents</span>
          </a>
        </li>
        <li>
          <a href="#">
          <i class="mdi mdi-calendar mdi-18px"></i>
          <span class="menu-text">Calendar</span>
          <span class="badge badge-pill badge-primary">Beta</span>
          </a>
        </li>
      </ul>
    </div>
    <div class="sidebar-footer">
      <div class="dropdown">
        <a href="#" data-toggle="dropdown" aria-has<a="">popup</a>="true" aria-expanded="false" data-offset="0,10">
        <i class="mdi mdi-bell mdi-18px"></i>
        <span class="badge badge-pill badge-warning">3</span>
        
        <div class="dropdown-menu notifications">
          <div class="notifications-header">
            <i class="mdi mdi-bell"></i>
            <a href="#!">Notification</a>s
          </div>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">
            <div class="notification-content">
              <div class="icon">
                <i class="mdi mdi-check-bold text-success border border-success"></i>
              </div>
              <div class="content">
                <div class="notification-detail">Do eiusmod tempor incididunt est pariatur aute laboris cillum consequat reprehenderit excepteur.</div>
                <div class="notification-time">
                  6 minutes ago
                </div>
              </div>
            </div>
          </a>
          <a class="dropdown-item" href="#">
            <div class="notification-content">
              <div class="icon">
                <i class="mdi mdi-exclamation-thick text-info border border-info"></i>
              </div>
              <div class="content">
                <div class="notification-detail">Deserunt fugiat exercitation cillum duis cillum tempor esse incididunt ex esse mollit.</div>
                <div class="notification-time">
                  Today
                </div>
              </div>
            </div>
          </a>
          <a class="dropdown-item" href="#">
            <div class="notification-content">
              <div class="icon">
                <i class="mdi mdi-alert text-warning border border-warning"></i>
              </div>
              <div class="content">
                <div class="notification-detail">Ullamco minim nostrud exercitation ipsum eu.</div>
                <div class="notification-time">
                  Yesterday
                </div>
              </div>
            </div>
          </a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item text-center" href="#">View all notifications</a>
        </div>
      </div>
      <div class="dropdown">
        <a href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-offset="0,10">
        <i class="mdi mdi-email mdi-18px"></i>
        <span class="badge badge-pill badge-success">7</span>
        </a>
        <div class="dropdown-menu messages">
          <div class="messages-header">
            <i class="mdi mdi-email"></i>
            Messages
          </div>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">
            <div class="message-content">
              <div class="pic">
                //Add Image Here
              </div>
              <div class="content">
                <div class="message-title">
                  <strong>Sander Sørensen</strong>
                </div>
                <div class="message-detail">Lorem ipsum dolor sit amet consectetur adipisicing elit. In totam explicabo</div>
              </div>
            </div>
          </a>
          <a class="dropdown-item" href="#">
            <div class="message-content">
              <div class="pic">
                //Add Image Here
              </div>
              <div class="content">
                <div class="message-title">
                  <strong>Jenny Ford</strong>
                </div>
                <div class="message-detail">Veniam velit tempor aliquip duis deserunt culpa et fugiat ea minim.</div>
              </div>
            </div>
          </a>
          <a class="dropdown-item" href="#">
            <div class="message-content">
              <div class="pic">
                //Add Image Here
              </div>
              <div class="content">
                <div class="message-title">
                  <strong>Kayla Wood</strong>
                </div>
                <div class="message-detail">Voluptate sint laboris est officia quis dolore laborum ex magna tempor id aute.</div>
              </div>
            </div>
          </a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item text-center" href="#">View all messages</a>
        </div>
      </div>
      <a href="#"><i class="mdi mdi-cog mdi-18px"></i> </a>
      <a href="#"><i class="mdi mdi-power mdi-18px"></i></a>
    </div>
  </nav>
  <a class="btn-sidebar-show btn btn-sm btn-dark" href="#">
  <i class="mdi mdi-menu"></i>
  </a>
</aside>

4. Create toggle buttons in the primary content material if needed.

<button type="button" class="btn btn-primary btn-lg" id="btn-show"><i class="mdi mdi-eye-outline mr-3"></i>Show</button>
<button type="button" class="btn btn-primary btn-lg" id="btn-hide"><i class="mdi mdi-eye-off-outline mr-3"></i>Hide</button>

5. Override the default variables within the _variables.scss to customize the looks of the aspect navigation.

$width: 300px;
$color_background: #2b3a42;
$color_item: #9eb7c3;
$color_item_hilight: white;
$color_submenu_bg: #3a4d56;
$color_menu_icon_bg: #3a4d56;
$color_menu_icon_active: #38fbc7;
$color_border: #3a4d56;
$color_notification_time: #828282;

Material Design Side Navigation Bootstrap 4, Responsive Sidebar Menu Bootstrap