Off-canvas Menu Example

 Create OffCanvas menu using bootstrap 5

Sidebar.html

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<link rel="stylesheet" type="text/css" href="offcanvas.css">

<div class="sidebar-nav">

    <nav class="navbar navbar-dark bg-danger fixed-top">

        <div class="container">

            <!-- Mobile Menu Toggle Button -->

            <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">

                <span class="navbar-toggler-icon"></span>

            </button>

            <!-- Menus List -->

            <div class="bg-light offcanvas offcanvas-start shadow" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">

              <div class="offcanvas-body">

                    <ul class="navbar-nav">

                        <li><a href="#"> <span class="item-text">Home</span></a></li>

                        <li><a href="#"><span class="item-text">Contact Us</span></a></li>

                        <li><a href="#"><span class="item-text">About Us</span></a></li>

                        <li><a href="#"> <span class="item-text">Products</span></a></li>

                        <li><hr class="dropdown-divider"></li>

                        <li><a href="#"><span class="item-text">Send</span></a></li>

                        <li><a href="#"><span class="item-text">Share</span></a></li>

                        <li><a href="#"><span class="item-text">Settings</span></a></li>

                    </ul>

              </div>

            </div>

            <div class="btn-group " >

                <a href="#" class="dropdown-toggle text-white text-decoration-none" data-bs-toggle="dropdown" aria-expanded="false">

                    

                    <span class="textnone">User Name</span>

                </a>

                <ul class="bg-warning  dropdown-menu dropdown-menu-end">

                    <li><button class="dropdown-item" type="button">Change Password</button></li>

                    <li><button class="dropdown-item" type="button">Edit Profile</button></li>

                    <li><button class="dropdown-item" type="button">Settings</button></li>

                    <li><hr class="dropdown-divider"></li>

                    <li><button class="dropdown-item" type="button">Sign out</button></li>

                </ul>

            </div>

        </div>

</div>

 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

offcanvas.css

 .sidebar-nav ul li a {

    font-size: 26px;

    text-decoration: none;

    display: block;

    padding: 6px 10px;

    transition: 0.5s;

}

.sidebar-nav ul li a:hover {

    background-color: #eeeeee;

    border-radius: 4px;

}

.sidebar-nav .offcanvas {

    width: 220px;

    border: none;

}

.sidebar-nav .offcanvas ul li a span {

    font-size: 18px;

    position: relative;

    top: -4px;

    transition: 0.5s;

}

.sidebar-nav .offcanvas.show ul li a:hover span {

    padding-left: 10px;

}

.sidebar-nav .dropdown-toggle::after {

    position: relative;

    top: 3px;

}

Learn all Programming with youtube.com/avadhtutor