gadmin/src/partials/navigation/sidebar/sidebar.html

Free Bootstrap 4 Gentelella inspired admin template

<nav class="g-sidebar">
  <div class="g-sidebar__profile container d-flex active align-items-center">
    <img
      class="g-sidebar__profile-photo rounded-circle img-fluid"
      src="https://avatars3.githubusercontent.com/u/1621344?s=460&v=4"
    />

    <div class="g-sidebar__details">
      <span class="g-sidebar__profile-message">Welcome,</span>
      <span class="g-sidebar__profile-name">Christian Esperar</span>
    </div>
  </div>

  <div class="g-sidebar__menu">
    <ul class="g-sidebar__menu-list">
      <li class="g-sidebar__menu-item">
        <a class="g-sidebar__menu-link" href="/index.html">
          <i class="g-sidebar__menu-icon fas fa-home"></i>
          <span class="g-sidebar__menu-description">Dashboard</span>
        </a>
      </li>

      <li class="g-sidebar__menu-item">
        <a class="g-sidebar__menu-link" href="/bootstrap-4-components">
          <i class="g-sidebar__menu-icon fas e-bootstrap-logo-b">
            B <span class="e-bootstrap-logo-4">4</span>
          </i>
          <span class="g-sidebar__menu-description">Components</span>
        </a>
      </li>
    </ul>

    <span class="g-sidebar__menu-title">Examples</span>

    <ul class="g-sidebar__menu-list">
      <li class="g-sidebar__menu-item">
        <a class="g-sidebar__menu-link">
          <i class="g-sidebar__menu-icon far fa-window-restore"></i>
          <span class="g-sidebar__menu-description">Layout</span>
        </a>
        <ul class="g-sidebar__menu-list">
          <li class="g-sidebar__menu-item">
            <a
              class="g-sidebar__menu-link"
              href="/layout-fixed-navigation.html"
            >
              Fixed navigation
            </a>
          </li>
          <li class="g-sidebar__menu-item">
            <a class="g-sidebar__menu-link" href="/layout-fixed-footer.html">
              Fixed footer
            </a>
          </li>
        </ul>
      </li>

      <li class="g-sidebar__menu-item">
        <a class="g-sidebar__menu-link">
          <i class="g-sidebar__menu-icon fas fa-file"></i>
          <span class="g-sidebar__menu-description">Pages</span>
        </a>
        <ul class="g-sidebar__menu-list">
          <li class="g-sidebar__menu-item">
            <a class="g-sidebar__menu-link" href="/pages-blank.html">
              Blank
            </a>
          </li>
        </ul>
      </li>

      <li class="g-sidebar__menu-item">
        <a class="g-sidebar__menu-link">
          <i class="g-sidebar__menu-icon fas fa-list-ul"></i>
          <span class="g-sidebar__menu-description">Multilevel Menu</span>
        </a>

        <!-- First Level Menu -->
        <ul class="g-sidebar__menu-list">
          <li class="g-sidebar__menu-item">
            <a class="g-sidebar__menu-link" href="javascript:void(0)">
              Level One
            </a>
          </li>
          <li class="g-sidebar__menu-item">
            <a class="g-sidebar__menu-link" href="javascript:void(0)">
              Level One
            </a>

            <!-- Second Level Menu -->
            <ul class="g-sidebar__menu-list">
              <li class="g-sidebar__menu-item">
                <a class="g-sidebar__menu-link" href="javascript:void(0)">
                  Level Two
                </a>
              </li>
              <li class="g-sidebar__menu-item">
                <a class="g-sidebar__menu-link" href="javascript:void(0)">
                  Level Two
                </a>
              </li>
              <li class="g-sidebar__menu-item">
                <a class="g-sidebar__menu-link" href="javascript:void(0)">
                  Level Two
                </a>
              </li>
            </ul>
          </li>
          <li class="g-sidebar__menu-item">
            <a class="g-sidebar__menu-link" href="javascript:void(0)">
              Level One
            </a>
          </li>
        </ul>
      </li>
    </ul>
  </div>

  <ul class="g-sidebar__footer">
    <li class="g-sidebar__footer-list">
      <a
        class="g-sidebar__footer-link"
        href="javascript:void(0)"
        data-toggle="tooltip"
        data-placement="top"
        title="Settings"
      >
        <i class="fas fa-cog"></i>
      </a>
    </li>
    <li class="g-sidebar__footer-list">
      <a
        class="g-sidebar__footer-link"
        href="javascript:void(0)"
        data-toggle="tooltip"
        data-placement="top"
        title="Fullscreen"
      >
        <i class="fas fa-expand-arrows-alt"></i>
      </a>
    </li>
    <li class="g-sidebar__footer-list">
      <a
        class="g-sidebar__footer-link"
        href="javascript:void(0)"
        data-toggle="tooltip"
        data-placement="top"
        title="Lock"
      >
        <i class="far fa-eye-slash"></i>
      </a>
    </li>
    <li class="g-sidebar__footer-list">
      <a
        class="g-sidebar__footer-link"
        href="javascript:void(0)"
        data-toggle="tooltip"
        data-placement="top"
        title="Logout"
      >
        <i class="fas fa-power-off"></i>
      </a>
    </li>
  </ul>
</nav>