Mobile menu
We have two navigation style sidebar mobile menu and Dropdown mobile menu
Sidebar mobile menu
This component make your mobile view have sidebar menu, this will showing from right after click mobile navigation menu.
<!-- sidebar mobile menu -->
<div class="mobile-side">
<!-- Mobile menu-->
<div id="back-menu" class="back-menu back-menu-end">
<span class="hamburger-icon open">
<svg class="bi bi-x" width="2rem" height="2rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M11.854 4.146a.5.5 0 010 .708l-7 7a.5.5 0 01-.708-.708l7-7a.5.5 0 01.708 0z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M4.146 4.146a.5.5 0 000 .708l7 7a.5.5 0 00.708-.708l-7-7a.5.5 0 00-.708 0z" clip-rule="evenodd"></path>
</svg>
</span>
</div>
<nav id="mobile-menu" class="menu-mobile d-flex flex-column push push-end bg-white">
<!-- mobile menu content -->
<div class="mobile-content mb-auto">
<!--logo-->
<div class="logo-sidenav px-5 mb-4">
<a href="#" class="d-flex">
<span class="h2 text-primary fw-bold mt-2 align-self-center">Upgency</span>
<!-- <img src="assets/img-min/logo/logo.png" class="img-fluid" alt="logo"> -->
</a>
</div>
<!--navigation-->
<div class="sidenav-menu side-light">
<nav class="navbar navbar-inverse">
<ul id="side-menu" class="nav navbar-nav list-group list-unstyled side-link">
<li><a href="#" class="nav-link">Home</a></li>
<li><a href="#" class="nav-link">Features</a></li>
<li><a href="#" class="nav-link">Pricing</a></li>
<!-- dropdown menu start -->
<li class="dropdown">
<a href="#" class="dropdown-toggle dropdown-item" id="menu-12" role="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
<!-- dropdown content -->
<ul class="dropdown-menu side-drop">
<li><a href="#" class="dropdown-item">Dropdown item</a></li>
<li class="dropdown-submenu">
<a href="#" class="dropdown-item dropdown-toggle" id="menu-13">Dropdown item</a>
<!-- dropdown submenu -->
<ul class="submenu dropdown-menu side-drop">
<li><a href="#" class="dropdown-item">Dropdown item</a></li>
</ul>
</li>
<li class="dropdown-submenu">
<a href="#" class="dropdown-item dropdown-toggle" id="menu-14">Dropdown item</a>
<ul class="submenu dropdown-menu side-drop">
<li><a href="#" class="dropdown-item">Dropdown item</a></li>
<li><a href="#" class="dropdown-item">Dropdown item</a></li>
<li><a href="#" class="dropdown-item">Dropdown item</a></li>
</ul>
</li>
</ul>
</li><!-- end dropdown menu -->
<li><a href="#" class="nav-link">About</a></li>
<li><a href="#" class="nav-link">Contact</a></li>
</ul>
</nav>
</div>
</div>
<!-- copyright mobile sidebar menu -->
<div class="mobile-copyright mt-5 text-center">
<p class="text-light-blue">Copyright <a href="#">Upgency</a> - All right reserved</p>
</div>
</nav>
</div>
<!-- end sidebar mobile menu -->
If you want move this sidebar menu to left, edit this class back-menu-end and push-end replace with back-menu-start and push-start.
Trigger this function with add class="sidebar-menu-trigger".
<!-- navbar button -->
<button aria-label="sidebar menu" class="navbar-toggler sidebar-menu-trigger" type="button">
<span class="navbar-toggler-icon"></span>
</button>
Full example code in this demo Header 3.