Vertical Nav - Labels & Badges
Labels and badges in navigation
Navigation menu items can contain labels and badges in all navigation levels. The can be either colored or transparent. Parent level labels/badges have the same style in active item - white color without background. Same for mini sidebar labels.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.
| 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. |
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 -->