<!-- Sidenav -->

<div class="container">

  <nav data-mdb-navbar-init class="navbar navbar-expand-lg navbar-light bg-body-tertiary">

    <div class="container-fluid">

      <a class="navbar-brand" href="#">Navbar</a>

    </div>

    <button

      data-mdb-ripple-init

      id="toggler"

      class="btn btn-dark mt-5"

      data-mdb-toggle="sidenav"

      data-mdb-target="#full-screen-example"

    >

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

    </button>

  </nav>

</div>

<nav

  data-mdb-sidenav-init

  id="full-screen-example"

  class="sidenav bg-light"

  data-mdb-color="dark"

  data-mdb-mode="side"

  data-mdb-hidden="false"

  data-mdb-scroll-container="#scrollContainer"

>

  <div class="mt-4">

    <div id="header-content" class="ps-3">

      <img

        src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(23).webp"

        alt="Avatar"

        class="rounded-circle img-fluid mb-3"

        style="max-width: 50px;"

      />

​

      <h4>

        <span style="white-space: nowrap;">Ann Smith</span>

      </h4>

      <p>ann_s@mdbootstrap.com</p>

    </div>

    <hr class="mb-0" />

  </div>

  <div id="scrollContainer">

    <ul class="sidenav-menu">

      <li class="sidenav-item">

        <a class="sidenav-link" href="/">

          <i class="fas fa-envelope fa-fw me-3"></i>Inbox</a

        >

      </li>

      <li class="sidenav-item">

        <a class="sidenav-link">

          <i class="fas fa-paper-plane fa-fw me-3"></i>Outbox</a

        >

      </li>

      <li class="sidenav-item">

        <a class="sidenav-link">

          <i class="fas fa-address-book fa-fw me-3"></i>Contacts</a

        >

        <ul class="sidenav-collapse">

          <li class="sidenav-item">

            <a class="sidenav-link">Family</a>

          </li>

          <li class="sidenav-item">

            <a class="sidenav-link" href="/previews/mdb-ui-kit/sidenav/2.html">Friends</a>

          </li>

          <li class="sidenav-item">

            <a class="sidenav-link">Work</a>

          </li>

        </ul>

      </li>

      <li class="sidenav-item">

        <a class="sidenav-link">

          <i class="fas fa-file fa-fw me-3"></i>Drafts</a

        >

      </li>

      <li class="sidenav-item">

        <a class="sidenav-link">

          <i class="fas fa-heart fa-fw me-3"></i>Favourites</a

        >

      </li>

      <li class="sidenav-item">

        <a class="sidenav-link">

          <i class="fas fa-star fa-fw me-3"></i>Starred</a

        >

      </li>

      <li class="sidenav-item">

        <a class="sidenav-link">

          <i class="fas fa-trash fa-fw me-3"></i>Trash</a

        >

      </li>

      <li class="sidenav-item">

        <a class="sidenav-link">

          <i class="fas fa-ban fa-fw me-3"></i>Spam</a

        >

      </li>

      <li class="sidenav-item">

        <a class="sidenav-link"

          ><i class="fas fa-tag fa-fw me-3"></i>Categories</a

        >

        <ul class="sidenav-collapse">

          <li class="sidenav-item">

            <a class="sidenav-link">Social</a>

          </li>

          <li class="sidenav-item">

            <a class="sidenav-link">Notifications</a>

          </li>

          <li class="sidenav-item">

            <a class="sidenav-link">Recent</a>

          </li>

          <li class="sidenav-item">

            <a class="sidenav-link">Uploads</a>

          </li>

          <li class="sidenav-item">

            <a class="sidenav-link">Backups</a>

          </li>

          <li class="sidenav-item">

            <a class="sidenav-link">Offers</a>

          </li>

        </ul>

      </li>

      <li class="sidenav-item">

        <a class="sidenav-link">

          <i class="fas fa-sticky-note fa-fw me-3"></i>Notes</a

        >

      </li>

      <li class="sidenav-item">

        <a class="sidenav-link">

          <i class="fas fa-user-circle fa-fw me-3"></i>Personal</a

        >

      </li>

      <li class="sidenav-item">

        <a class="sidenav-link">

          <i class="fas fa-ellipsis-h fa-fw me-3"></i>More</a

        >

      </li>

    </ul>

    <hr class="m-0" />

    <ul class="sidenav-menu">

      <li class="sidenav-item">

        <a class="sidenav-link">

          <i class="fas fa-cogs fa-fw me-3"></i>Settings</a

        >

      </li>

      <li class="sidenav-item">

        <a class="sidenav-link">

          <i class="fas fa-user fa-fw me-3"></i>Profile</a

        >

      </li>

      <li class="sidenav-item">

        <a class="sidenav-link">

          <i class="fas fa-shield-alt fa-fw me-3"></i>Privacy</a

        >

      </li>

      <li class="sidenav-item">

        <a class="sidenav-link">

          <i class="fas fa-user-astronaut fa-fw me-3"></i>Log out</a

        >

      </li>

    </ul>

  </div>

  <div class="text-center" style="height: 100px;">

    <hr class="mb-4 mt-0" />

    <p>MDBootstrap.com</p>

  </div>

</nav>

<!-- Sidenav -->

​

<!-- Content -->

<div class="mdb-page-content text-center page-intro bg-light">

  <!-- Tabs navs -->

<ul class="nav nav-tabs nav-fill mb-3" id="ex1" role="tablist">

  <li class="nav-item" role="presentation">

    <a

      data-mdb-tab-init

      class="nav-link active"

      id="ex2-tab-1"

      href="#ex2-tabs-1"

      role="tab"

      aria-controls="ex2-tabs-1"

      aria-selected="true"

      >Link</a

    >

  </li>

  <li class="nav-item" role="presentation">

    <a

      data-mdb-tab-init

      class="nav-link"

      id="ex2-tab-2"

      href="#ex2-tabs-2"

      role="tab"

      aria-controls="ex2-tabs-2"

      aria-selected="false"

      >Very very very very long link</a

    >

  </li>

  <li class="nav-item" role="presentation">

    <a

      data-mdb-tab-init

      class="nav-link"

      id="ex2-tab-3"

      href="#ex2-tabs-3"

      role="tab"

      aria-controls="ex2-tabs-3"

      aria-selected="false"

      >Another link</a

    >

  </li>

</ul>

<!-- Tabs navs -->

<div class="container">

  <!-- Tabs content -->

<div class="tab-content" id="ex2-content">

  <div

    class="tab-pane fade show active"

    id="ex2-tabs-1"

    role="tabpanel"

    aria-labelledby="ex2-tab-1"

  >

    Tab 1 content

  </div>

  <div

    class="tab-pane fade"

    id="ex2-tabs-2"

    role="tabpanel"

    aria-labelledby="ex2-tab-2"

  >

    Tab 2 content

  </div>

  <div

    class="tab-pane fade"

    id="ex2-tabs-3"

    role="tabpanel"

    aria-labelledby="ex2-tab-3"

  >

    Tab 3 content

  </div>

</div>

</div>

<!-- Tabs content -->

</div>

<!-- Content -->