off canvas sidebar nav bootstrap - Free Download Off-canvas Sidebar Navigation For Bootstrap 4

Free Download Off-canvas Sidebar Navigation For Bootstrap 4

Posted on

This time I will share jQuery Plugin and tutorial about Off-canvas Sidebar Navigation For Bootstrap 4, hope it will help you in programming stack.

off canvas sidebar nav bootstrap - Free Download Off-canvas Sidebar Navigation For Bootstrap 4
File Size: 5.16 KB
Views Total: 3791
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

This is a small jQuery script that transforms the regular responsive Bootstrap4 navbar into a mobile-friendly off-canvas side menu with minimal effort.

Instead of using the default Bootstrap 4 responsive navbar behavior, the plugin collapses the menu items behind a toggle button which allows the visitor to toggle an off-canvas menu sliding from the left side of the screen.

How to use it:

1. Add the CSS class ‘mobileMenu‘ to your Bootstrap 4 navbar.

01 <nav
02   class="navbar navbar-expand-lg navbar-dark bg-dark justify-content-sm-start fixed-top"
03 >
04   <div class="container-fluid">
05     <a class="navbar-brand order-1 order-lg-0 ml-lg-0 ml-2 mr-auto" href="#"
06       >jQuery Script</a
07     >
08     <button class="navbar-toggler align-self-start" type="button">
09       <span class="navbar-toggler-icon"></span>
10     </button>
11  
12     <div
13       class="collapse navbar-collapse bg-dark p-3 p-lg-0 mt-5 mt-lg-0 d-flex flex-column flex-lg-row flex-xl-row justify-content-lg-end mobileMenu"
14       id="navbarSupportedContent"
15     >
16       <ul class="navbar-nav align-self-stretch">
17         <li class="nav-item active">
18           <a class="nav-link" href="#"
19             >Home <span class="sr-only">(current)</span></a
20           >
21         </li>
22         <li class="nav-item dropdown">
23           <a
24             class="nav-link dropdown-toggle"
25             href="#"
26             id="navbarDropdown"
27             role="button"
28             data-toggle="dropdown"
29             aria-has<a href="https://www.jqueryscript.net/tags.php?/popup/">popup</a>="true"
30             aria-expanded="false"
31           >
32             Dropdown
33           </a>
34           <div class="dropdown-menu" aria-labelledby="navbarDropdown">
35             <a class="dropdown-item" href="#">Action</a>
36             <a class="dropdown-item" href="#">Another action</a>
37             <div class="dropdown-divider"></div>
38             <a class="dropdown-item" href="#">Something else here</a>
39           </div>
40         </li>
41         <li class="nav-item dropdown">
42           <a
43             class="nav-link dropdown-toggle"
44             href="#"
45             id="navbarDropdown"
46             role="button"
47             data-toggle="dropdown"
48             aria-haspopup="true"
49             aria-expanded="false"
50           >
51             Dropdown
52           </a>
53           <div class="dropdown-menu" aria-labelledby="navbarDropdown">
54             <a class="dropdown-item" href="#">Action</a>
55             <a class="dropdown-item" href="#">Another action</a>
56             <div class="dropdown-divider"></div>
57             <a class="dropdown-item" href="#">Something else here</a>
58           </div>
59         </li>
60         <li class="nav-item">
61           <a
62             class="nav-link disabled"
63             href="#"
64             tabindex="-1"
65             aria-disabled="true"
66             >Disabled</a
67           >
68         </li>
69       </ul>
70       <form class="form-inline my-2 my-lg-0 align-self-stretch">
71         <input
72           class="form-control mr-sm-2"
73           type="search"
74           placeholder="Search"
75           aria-label="Search"