└── README.md


/README.md:
--------------------------------------------------------------------------------
 1 | # Bootstrap Drawer
 2 | 
 3 | Drawer allows you to display additional content within the boundaries of a given component (for example navigation links), by default invisible and displayed after clicking the trigger.
 4 | 
 5 | Drawers are commonly referred to as a Side Nav or Offcanvas navigation.
 6 | 
 7 | ## Basic example
 8 | 
 9 | ```html
10 | <!-- Sidenav -->
11 | <nav
12 |   id="sidenav-1"
13 |   class="sidenav"
14 |   data-mdb-hidden="false"
15 | >
16 |   <ul class="sidenav-menu">
17 |     <li class="sidenav-item">
18 |       <a class="sidenav-link">
19 |         <i class="far fa-smile fa-fw me-3"></i><span>Link 1</span></a
20 |       >
21 |     </li>
22 |     <li class="sidenav-item">
23 |       <a class="sidenav-link"
24 |         ><i class="fas fa-grin fa-fw me-3"></i><span>Category 1</span></a
25 |       >
26 |       <ul class="sidenav-collapse show">
27 |         <li class="sidenav-item">
28 |           <a class="sidenav-link">Link 2</a>
29 |         </li>
30 |         <li class="sidenav-item">
31 |           <a class="sidenav-link">Link 3</a>
32 |         </li>
33 |       </ul>
34 |     </li>
35 |     <li class="sidenav-item">
36 |       <a class="sidenav-link"
37 |         ><i class="fas fa-grin-wink fa-fw me-3"></i><span>Category 2</span></a
38 |       >
39 |       <ul class="sidenav-collapse">
40 |         <li class="sidenav-item">
41 |           <a class="sidenav-link">Link 4</a>
42 |         </li>
43 |         <li class="sidenav-item">
44 |           <a class="sidenav-link"
45 |             >Link 5</a
46 |           >
47 |         </li>
48 |       </ul>
49 |     </li>
50 |   </ul>
51 | </nav>
52 | <!-- Sidenav -->
53 | 
54 | <!-- Toggler -->
55 | <button
56 |   data-mdb-toggle="sidenav"
57 |   data-mdb-target="#sidenav-1"
58 |   class="btn btn-primary"
59 |   aria-controls="#sidenav-1"
60 |   aria-haspopup="true"
61 | >
62 |   <i class="fas fa-bars"></i>
63 | </button>
64 | <!-- Toggler -->
65 | ```
66 | 
67 | #### Much more examples and a detailed description can be found at [📄 Drawer documentation page](https://mdbootstrap.com/docs/standard/extended/drawer/)
68 | 
69 | 
70 | 
71 | 


--------------------------------------------------------------------------------