Update README.md

Author: PiotrGusciora

README.md

@@ -1,2 +1,87 @@
-# bootstrap-vertical-navbar
+
 Responsive Vertical Navbar built with Bootstrap 5. The vertical navigation component provides an easy way to navigate through your website.
+
+Check out [Bootstrap Avatars Documentation](https://mdbootstrap.com/docs/standard/extended/vertical-navbar/) for detailed instructions & even more examples.
+
+## Basic example
+
+![Bootstrap 5 Vertical navbar](/assets/basic-example.png)
+
+```html
+
+<!-- Sidenav-->
+<nav id="sidenav-1" class="sidenav" data-mdb-position="absolute">
+    <ul class="sidenav-menu">
+        <li>
+            <a class="sidenav-link"> <i class="far fa-smile fa-fw me-3"></i><span>Link 1</span></a>
+        </li>
+        <li>
+            <a class="sidenav-link"> <i class="fas fa-grin fa-fw me-3"></i><span>Category 1</span><i class="fas fa-angle-down rotate-icon"></i> </a>
+            <ul class="sidenav-collapse collapse">
+                <li>
+                    <a class="sidenav-link">Link 2</a>
+                </li>
+                <li>
+                    <a class="sidenav-link">Link 3</a>
+                </li>
+            </ul>
+        </li>
+        <li>
+            <a class="sidenav-link"> <i class="fas fa-grin-wink fa-fw me-3"></i><span>Category 2</span><i class="fas fa-angle-down rotate-icon"></i> </a>
+            <ul class="sidenav-collapse collapse">
+                <li>
+                    <a class="sidenav-link">Link 4</a>
+                </li>
+                <li>
+                    <a class="sidenav-link">Link 5</a>
+                </li>
+            </ul>
+        </li>
+    </ul>
+</nav>
+<!-- Sidenav-->
+<!-- Toggler -->
+<div style="padding: 20px;" class="text-center">
+    <button data-mdb-toggle="sidenav" data-mdb-target="#sidenav-1" class="btn btn-primary">
+        <i class="fas fa-bars"></i>
+    </button>
+</div>
+<!-- Toggler -->
+
+```
+
+
+## How to use?
+
+1. Download MDB 5 - free UI KIT
+
+2. Choose your favourite customized component and click on the image
+
+3. Copy & paste the code into your MDB project
+
+[▶️ Subscribe to YouTube channel for web development tutorials & resources](https://www.youtube.com/MDBootstrap?sub_confirmation=1)
+
+## More examples
+
+[Bootstrap Vertical navbar on the right:
+![Bootstrap 5 Avatar](/assets/on-the-right.png)](https://mdbootstrap.com/docs/standard/extended/vertical-navbar/#section-on-the-right)
+
+[Bootstrap Vertical navbar not full height:
+![Bootstrap 5 Avatar](/assets/not-full-height.png)](https://mdbootstrap.com/docs/standard/extended/vertical-navbar/#section-not-full-height)
+
+[Bootstrap Vertical navbar Submenu:
+![Bootstrap 5 Avatar](/assets/submenu.png)](https://mdbootstrap.com/docs/standard/extended/vertical-navbar/#section-submenu)
+
+___
+
+## More extended Bootstrap documentation
+
+<ul>
+<li><a href="https://mdbootstrap.com/docs/standard/navigation/sidenav/">Bootstrap Sidenav</a></li>
+<li><a href="https://mdbootstrap.com/docs/standard/extended/side-navbar/">Bootstrap Side navbar</a></li>
+<li><a href="https://mdbootstrap.com/docs/standard/extended/sidebar/">Bootstrap Sidebar</a></li>
+<li><a href="https://mdbootstrap.com/docs/standard/extended/hamburger-menu/">Bootstrap Hamburger menu</a></li>
+<li><a href="https://mdbootstrap.com/docs/standard/extended/offcanvas/">Bootstrap Offcanvas</a></li>
+<li><a href="https://mdbootstrap.com/docs/standard/extended/drawer/">Bootstrap Drawer</a></li>
+</ul>
+