<div class="container my-4">

      <p>

        <strong

          >You can provide an easy way to navigate through your website using side navigation component. See the examples.</strong

        >

      </p>

​

      <p>

        Detailed documentation and more examples you can find in our

        <a

          href="https://mdbootstrap.com/docs/standard/navigation/sidenav/"

          target="_blank"

          ><strong>Bootstrap Sidenav Docs</strong></a

        >

      </p>

​

      <hr />

​

      <p class="font-weight-bold">Basic example</p>

​

      <p>

        Place the navigation on the other side by setting the <code>right</code> attribute to <code>true</code>.

      </p>

​

      <div class="border p-5 text-center">

        <!-- Copy this code to have a working example -->

          <!-- Sidenav -->

          <nav

            id="sidenav-1"

            class="sidenav"

            data-mdb-right="true"

            data-mdb-hidden="false"

          >

            <ul class="sidenav-menu">

              <li class="sidenav-item">

                <a class="sidenav-link">

                  <i class="far fa-smile fa-fw me-3"></i><span>Link 1</span></a

                >

              </li>

              <li class="sidenav-item">

                <a class="sidenav-link"

                  ><i class="fas fa-grin fa-fw me-3"></i><span>Category 1</span></a

                >

                <ul class="sidenav-collapse show">

                  <li class="sidenav-item">

                    <a class="sidenav-link">Link 2</a>

                  </li>

                  <li class="sidenav-item">

                    <a class="sidenav-link">Link 3</a>

                  </li>

                </ul>

              </li>

              <li class="sidenav-item">

                <a class="sidenav-link"

                  ><i class="fas fa-grin-wink fa-fw me-3"></i><span>Category 2</span></a

                >

                <ul class="sidenav-collapse">

                  <li class="sidenav-item">

                    <a class="sidenav-link">Link 4</a>

                  </li>

                  <li class="sidenav-item">

                    <a class="sidenav-link"

                      >Link 5</a

                    >

                  </li>

                </ul>

              </li>

            </ul>

          </nav>

          <!-- Sidenav -->

​

          <!-- Toggler -->

          <button

            data-mdb-toggle="sidenav"

            data-mdb-target="#sidenav-1"

            class="btn btn-primary"

            aria-controls="#sidenav-1"

            aria-haspopup="true"

          >

            <i class="fas fa-bars"></i>

          </button>

          <!-- Toggler -->

        <!--/ Copy this code to have a working example -->

      </div>

    </div>