Side Navigation
Kodhus provides an extensive Side navigation with Child elements.
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.