Side Navigation

Usage

The simplest menu you can create is as follow:

          <div class="cdt-side-nav multi-level">
  <header>Menu Header</header>
  <nav>
    <ul>
      <!--<header>
          Section 1 header
        </header>-->
      <li>
        <div class="cdt-nav-item-wrapper">
          <div class="cdt-nav-item">
            <div class="avatar">
              <ion-icon name="folder-outline"></ion-icon>
            </div>
            <div class="item">Directory</div>
            <div class="extra">
              <div class="cdt-badge">10</div>
            </div>
          </div>
        </div>
      </li>
      <li class="selected">
        <div class="cdt-nav-item-wrapper">
          <div class="cdt-nav-item">
            <div class="opener">
              <ion-icon name="caret-forward-outline"></ion-icon>
            </div>
            <div class="avatar">
              <ion-icon name="folder-outline"></ion-icon>
            </div>
            <div class="item">Analytics</div>
            <div class="extra">
              <div class="cdt-badge">2</div>
            </div>
          </div>
        </div>
        <ul class="hide">
          <li>
            <div class="cdt-nav-item-wrapper">
              <div class="cdt-nav-item">
                <div class="avatar">
                  <ion-icon name="person-add-outline"></ion-icon>
                </div>
                <div class="item">Daily active users</div>
              </div>
            </div>
          </li>
          <li>
            <div class="cdt-nav-item-wrapper">
              <div class="cdt-nav-item">
                <div class="avatar">
                  <ion-icon name="people-outline"></ion-icon>
                </div>
                <div class="item">Monthly active users</div>
              </div>
            </div>
          </li>
        </ul>
      </li>
      <li>
        <div class="cdt-nav-item-wrapper">
          <div class="cdt-nav-item">
            <div class="avatar">
              <ion-icon name="list-outline"></ion-icon>
            </div>
            <div class="item">Stats</div>
          </div>
        </div>
      </li>
    </ul>
    <ul>
      <header>
        Section 2 header
      </header>
      <li>
        <div class="cdt-nav-item-wrapper">
          <div class="cdt-nav-item">
            <div class="avatar">
              <ion-icon name="layers-outline"></ion-icon>
            </div>
            <div class="item">Prototypes</div>
            <div class="extra">
              <div class="cdt-badge">10</div>
            </div>
          </div>
        </div>
      </li>
      <li>
        <div class="cdt-nav-item-wrapper">
          <div class="cdt-nav-item">
            <div class="avatar">
              <ion-icon name="settings-outline"></ion-icon>
            </div>
            <div class="item">Settings</div>
          </div>
        </div>
      </li>
    </ul>
  </nav>
</div>

Behaviour

By default, the nav bar will be relatively positioned and will get scrolled normally.