<div class="pf-vertical-nav">
<div class="pf-vertical-nav__category">
First Category
</div>
<ul class="pf-vertical-nav__menu">
<li class="pf-vertical-nav__item active">
<a href="#0" class="pf-vertical-nav__link">
<i class="fa fa-fw fa-dashboard pf-vertical-nav__icon"></i>
<span class="pf-vertical-nav__link-value">Lorem ipsum dolor</span>
</a>
</li>
<li class="pf-vertical-nav__item">
<a href="#0" class="pf-vertical-nav__link">
<i class="fa fa-fw fa-shield pf-vertical-nav__icon"></i>
<span class="pf-vertical-nav__link-value">Dolor</span>
</a>
</li>
<li class="pf-vertical-nav__item">
<a href="#0" class="pf-vertical-nav__link">
<i class="fa fa-fw fa-graduation-cap pf-vertical-nav__icon"></i>
<span class="pf-vertical-nav__link-value">Adipscing</span>
</a>
</li>
<li class="pf-vertical-nav__item">
<a href="#0" class="pf-vertical-nav__link">
<i class="fa fa-fw fa-gamepad pf-vertical-nav__icon"></i>
<span class="pf-vertical-nav__link-value">Lorem</span>
</a>
</li>
</ul>
<div class="pf-vertical-nav__category">
Second Category
</div>
<ul class="pf-vertical-nav__menu">
<li class="pf-vertical-nav__item">
<a href="#0" class="pf-vertical-nav__link">
<i class="fa fa-fw fa-dashboard pf-vertical-nav__icon"></i>
<span class="pf-vertical-nav__link-value">Lorem ipsum dolor</span>
</a>
</li>
<li class="pf-vertical-nav__item">
<a href="#0" class="pf-vertical-nav__link">
<i class="fa fa-fw fa-shield pf-vertical-nav__icon"></i>
<span class="pf-vertical-nav__link-value">Dolor</span>
</a>
</li>
<li class="pf-vertical-nav__item">
<a href="#0" class="pf-vertical-nav__link">
<i class="fa fa-fw fa-graduation-cap pf-vertical-nav__icon"></i>
<span class="pf-vertical-nav__link-value">Adipscing</span>
</a>
</li>
<li class="pf-vertical-nav__item">
<a href="#0" class="pf-vertical-nav__link">
<i class="fa fa-fw fa-gamepad pf-vertical-nav__icon"></i>
<span class="pf-vertical-nav__link-value">Lorem</span>
</a>
</li>
</ul>
</div>