# vertical-navigation component

## CSS

```css
<link rel="stylesheet" href="node_modules/pfdemo/dist/css/pf-vertical-navigation.css">    
```

## Template

```html
<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>
```