#### Vertical Nav - Sizing

Navigation size:

###### Navigation sizing

Change navigation items height in all levels with sizing classes: `.navigation-lg (*-sm, *-xs)`. To use, add one of them to the navigation container.

##### Navigation overview

Vertical navigation - type of navigation that is used in sidebars and has vertical direction. By default navigation includes custom icons based on`16px` grid, aligned to the left (to the right in RTL layout) and have absolute position. In `mini` sidebar navigation text is hidden and appears as additional labels on parent level item hover. In this type of sidebar icons are centered and have static position. Also optional styling is available: different `sizes`, `bordered` nav and layout with `right` aligned icons. Vertical navigation supports the following options:

###### 1. Navigation placement

Main navigation can be used in any sidebar type - main, secondary or opposite. Please note - collapsed navigation is allowed only in main sidebar, all other sidebars display full sized navigation. Since navigation is a part of sidebar content, it can be mixed with other components and can be placed before or after them depending on the priority.

###### 2. Navigation types

Default navigation type is collapsible: when new item is expanded, current level remains opened. This logic works in all navigation levels. Collapsible navigation doesn't require any additional classes. The second navigation type is accordion: when new item is expanded, current level is collapsed. This logic works in all navigation levels as well. In mini sidebar parent level of navigation doesn't have click event and shows child levels on hover, but child levels functionality remains according to the type of navigation. Sidebar navigation supports up to 3 levels of child menus.

###### 3. Navigation sizing

By default, 1st level navigation items have `44px` height, other levels have `40px` height. Besides default size, sidebar navigation supports 3 additional sizes: `large`, `small` and `mini`. Basically, these sizes change item height. To use, just add one of `.navigation-lg (sm, xs)` classes to the navigation container. This option works in all sidebars.

###### 4. Additional styling

Depending on sidebar background color, navigation menu automatically adjusts active link color for parent level. This color can be changed by adding `.element-*` class to the navigation container. Besides color options, selected items can be disabled on the fly by adding `.disabled` class to the parent `<li>` item, it sets reduced opacity and disables click event. Additional options: navigation with `right` icons - has right positioned icons, `bordered` navigation - has additional borders between items for better separation.

##### Navigation classes

This table contains all classes related to the sidebar navigation. Vertical navigation is a custom layout element and adapted for main navigation purposes: depending on the needs, it supports different options such as size, active item background color, type, placement etc. All these options can be set via these classes:

Class | Description
--- | ---
`.navigation` | Default navigation class, must be used with any navigation type and color. Responsible for basic styling of item colors, borders, sizing and icons.
`.navigation-main` | Class for main navigation. Defines navigation in main sidebar: hides text in mini sidebar type and fires click event in parent item links. Only this navigation class works with `.navbar-xs` body class and mini sidebar, all other navigations are full sized.
`.navigation-alt` | Class for alternative navigation. Defines navigation in other sidebars. This navigation has its own functionality and keeps its functionality without main sidebar size dependency.
`.navigation-accordion` | Changes navigation type from default collapsible to accordion-like.
`.navigation-icons-right` | Changes icons position from left to right. Note: arrows that define children group state are hidden in right icons layout.
`.element-*` | Custom color system class. Changes background color of active item in 1st menu level, text and arrow of the second menu level in collapsed mode.
`.navigation-bordered` | Adds horizontal borders to menu items in parent level only.
`.navigation-lg (sm, xs)` | Changes navigation size. Basically, all these classes change vertical spacing of the items.
`li.category-title` | Divide navigation with titles by adding `.category-title` to the parent `<li>` item and wrap inner text in `<span />`.
`li.disabled` | Disables any navigation item. Sets reduced opacity, changes cursor to `not-allowed` and disables click events.
`li.active` | Defines active navigation item. No need to add this class to all parent level `<li>`'s, but only for actual active link, jQuery code will do the rest.

##### Navigation options

###### Collapsible and accordion types

Flexible template functionality offers 2 different kinds of navigation: collapsible and accordion. Both have custom jQuery code and provide extended control over the child nav items. Default type is `collapsible` navigation: open as many child levels as you want, they all will be visible all the time. Second type is `accordion` navigation: allows to display only 1 parent level, collapsing all others. Both navigation types have hidden 2nd level in mini sidebar that opens on hover.

Collapsible navigation markup

    <!-- Default navigation markup -->
    <div class="category-content no-padding">
    	<ul class="navigation navigation-main">
    		<li>
    			<a href="index.html">
    				<i class="icon-home3"></i>
    				<span>Dashboard</span>
    			</a>
    		</li>
    		<li>
    			<a href="#">
    				<i class="icon-stats2"></i>
    				<span>Data visualization</span>
    			</a>
    			<ul>
    				<li class="active">
    					<a href="index.html">
    						<i class="icon-home3"></i>
    						D3 library
    					</a>
    				</li>
    				...
    			</ul>
    		</li>
    		...
    	</ul>
    </div>
    <!-- /default navigation markup -->

Accordion navigation markup

    <!-- Accordion navigation markup -->
    <div class="category-content no-padding">
    	<ul class="navigation navigation-main navigation-accordion">
    		<li>
    			<a href="index.html">
    				<i class="icon-home3"></i>
    				<span>Dashboard</span>
    			</a>
    		</li>
    		<li>
    			<a href="#">
    				<i class="icon-stats2"></i>
    				<span>Data visualization</span>
    			</a>
    			<ul>
    				<li class="active">
    					<a href="index.html">
    						<i class="icon-home3"></i>
    						D3 library
    					</a>
    				</li>
    				...
    			</ul>
    		</li>
    		...
    	</ul>
    </div>
    <!-- /accordion navigation markup -->

###### Icons position

Sidebar navigation supports icons in all menu levels. Default icons position is left. All icons have absolute position, allowing parent link text wrap and keep permanent left padding. Left position of icons allows to keep a visual hierarchy: icon > text > arrow (label), but right position of icons makes usage of arrows useless as they won't be visible. To change icons position just add `.navigation-icons-right` to the `.navigation` container, CSS will do the rest.

Default left icons position

    <!-- Left icons position -->
    <div class="category-content no-padding">
    	<ul class="navigation navigation-main">
    		<li>
    			<a href="index.html">
    				<i class="icon-home3"></i>
    				<span>Dashboard</span>
    			</a>
    		</li>
    		<li>
    			<a href="form_components.html">
    				<i class="icon-compose"></i>
    				<span>Form components</span>
    			</a>
    		</li>
    		...
    	</ul>
    </div>
    <!-- /left icons position -->

Optional right icons position

    <!-- Right icons position -->
    <div class="category-content no-padding">
    	<ul class="navigation navigation-main navigation-icons-right">
    		<li>
    			<a href="index.html">
    				<i class="icon-home3"></i>
    				<span>Dashboard</span>
    			</a>
    		</li>
    		<li>
    			<a href="form_components.html">
    				<i class="icon-compose"></i>
    				<span>Form components</span>
    			</a>
    		</li>
    		...
    	</ul>
    </div>
    <!-- /right icons position -->

###### Display options

Default navigation menu doesn't have any borders, parent level items are `44px` high, child levels items are `40px` high. It can be extended using 3 optional classes: `.navigation-lg` - changes parent level item height to `46px` and child levels to `42px`, `.navigation-sm` - changes parent level item height to `42px` and child levels to `38px`, `.navigation-xs` - changes parent level item height to `40px` and child levels to `36px`.

Mini navigation example

    <!-- Mini navigation -->
    <div class="category-content no-padding">
    	<ul class="navigation navigation-main navigation-xs">
    		<li>
    			<a href="index.html">
    				<i class="icon-home3"></i>
    				<span>Dashboard</span>
    			</a>
    		</li>
    		<li>
    			<a href="form_components.html">
    				<i class="icon-compose"></i>
    				<span>Form components</span>
    			</a>
    		</li>
    		...
    	</ul>
    </div>
    <!-- /mini navigation -->

Bordered navigation example

    <!-- Bordered navigation -->
    <div class="category-content no-padding">
    	<ul class="navigation navigation-main navigation-bordered">
    		<li>
    			<a href="index.html">
    				<i class="icon-home3"></i>
    				<span>Dashboard</span>
    			</a>
    		</li>
    		<li>
    			<a href="form_components.html">
    				<i class="icon-compose"></i>
    				<span>Form components</span>
    			</a>
    		</li>
    		...
    	</ul>
    </div>
    <!-- /bordered navigation -->