English
Українська
Deutsch
España
РусскийDisabled items
Disabled state of vertical sidebar navigation is controlled by JS code located in app.jsfile - it disables click action in single nav item and submenu. Styles of disabled state are defined in SASS and can be easily changed in a set of variables. To disable single item or submenu with icons, add .disabledto any .nav-linkelement. If this element is inside .nav-item-submenucontainer, children list of nav items that comes right after nav link won't be collapsible.
Navigation classes
navcomponent classes and adapted for main navigation purposes. Depending on the needs, it supports different options such as collapsing type, icons, badges, combination with other sidebar components etc. This list explains the logic and purpose:
| Class | Description |
|---|---|
.nav
|
Global wrapper for navigation list. It uses default Bootstrap's styles of .navcomponent and similar markup options.
|
.nav-sidebar
|
Default navigation class, must be used with any navigation type and color. Responsible for targeting specific style changes and basic styling of item colors, borders and icons. |
.nav-item-header
|
Targets optional headerelement for separating group of nav items. In main sidebar this class is responsible for toggling text in folded sidebar mode. Use text utility classes to style inner content.
|
.nav-item-divider
|
Navigation item with this class separates groups of related menu items - it adds thick light (dark in light sidebar) line with extra vertical spacing. Useful in long lists. |
.nav-item
|
This class is required as an immediate nav link parent in any .navcontainer. Since active link color is different from hover and initial states color, .nav-itemhas 1px vertical spacing to separate items that have same background color. Dropdown menu items have same logic.
|
.nav-link
|
This class is responsible for navigation link styling and is also required as a part of nav list class structure. It's also a target for .activeand disabledstates. Please note - this class doesn't reset <button>styles, so make sure you use <a>instead.
|
.nav-link.active
|
Combination of these classes in a single <a>element highlights nav item link and indicates the current page. By default, expanded submenu and activeitem state color is the same in each level.
|
.nav-link.disabled
|
Combination of these classes in a single <a>element disables all pointer and click events and mutes out nav link text and background colors.
|
.nav-item-submenu
|
This class indicates nav list item with children menu levels and needs to be added to .nav-itemcontainer.
|
.nav-item-expanded
|
Responsible for expandingsubmenu on page load - this class should be added to .nav-itemcontainer in all levels.
|
.nav-item-open
|
This class also should be used in combination with .nav-itemand/or .nav-item-expandedclasses, since it's responsible for some styling and toggles dynamically.
|
.nav-group-sub
|
Navigation submenu class - should be used with .navclass in <ul>element in all menu levels.
|
.nav-sidebar-icons-reverse
|
Add this class to .nav-sidebarcontainer to change icons alignment from leftto right.
|
.nav-sidebar-bordered
|
Add this class to .nav-sidebarcontainer if you want to add horizontal borders to all navigation links on the first level.
|
[data-nav-type="collapsible"]
|
Default navigation behaviour - when new item is expanded, current level remains opened. Actually navigation container doesn't require this, but is used for the sake of semantic naming. |
[data-nav-type="accordion"]
|
Changes default collapsiblenavigation type to accordiontype - when new item is expanded, current level is collapsed.
|
[data-submenu-title="..."]
|
This data attribute adds the title to the second menu level in mainsidebar in foldedmode. Use it in .nav-group-subcontainer.
|
Navigation markup
Collapsible and accordion types
Flexible template functionality offers 2 different kinds of navigation: collapsible and accordion. Both have custom JS code and provide extended control over the child nav items. Default type is collapsiblenavigation: open as many child levels as you want, they all will be visible all the time. Second type is accordionnavigation: allows to display only 1 parent level, collapsing all others. Both navigation types have hidden 2nd level in mini sidebar that opens on hover/focus.
Collapsible navigation markup
<!-- Collapsible navigation markup --><ul class="nav nav-sidebar" data-nav-type="collapsible"> <li class="nav-item-header"> <div>Navigation title</div> <i class="icon-menu" title="Tooltip title"></i> </li> <li class="nav-item"> <a href="#" class="nav-link"> <i class="icon-home4"></i> Top level link </a> </li> <li class="nav-item nav-item-submenu"> <a href="#" class="nav-link"> <i class="icon-copy"></i> <span>Top level with subnav</span> </a> <ul class="nav nav-group-sub" data-submenu-title="Folded nav title"> <li class="nav-item"> <a href="#" class="nav-link">2nd level item</a> </li> ... </ul> </li> ...</ul><!-- /collapsible navigation markup --> Accordion navigation markup
<!-- Accordion navigation markup --><ul class="nav nav-sidebar" data-nav-type="accordion"> <li class="nav-item-header"> <div>Navigation title</div> <i class="icon-menu" title="Tooltip title"></i> </li> <li class="nav-item"> <a href="#" class="nav-link"> <i class="icon-home4"></i> Top level link </a> </li> <li class="nav-item nav-item-submenu"> <a href="#" class="nav-link"> <i class="icon-copy"></i> <span>Top level with subnav</span> </a> <ul class="nav nav-group-sub" data-submenu-title="Folded nav title"> <li class="nav-item"> <a href="#" class="nav-link">2nd level item</a> </li> ... </ul> </li> ...</ul><!-- /accordion navigation markup --> Icons alignment
Sidebar navigation supports icons in all menu levels. Default icons alignment is left, default visual hierarchy is: icon >text >arrow, adding .nav-sidebar-icons-reverseclass to .nav-sidebarcontainer changes it to text >icon >arrow. But despite the default layout, icons are completely optional, so feel free to remove icons markup from the nav links if for some reason you don't need them.
Default left icons position
<!-- Left icons --><ul class="nav nav-sidebar" data-nav-type="accordion"> ... <li class="nav-item"> <a href="#" class="nav-link"> <i class="icon-home4"></i> Navigation link #1 </a> </li> <li class="nav-item"> <a href="#" class="nav-link"> <i class="icon-make-group"></i> Navigation link #2 </a> </li> ...</ul><!-- /left icons --> Optional right icons position
<!-- Right icons --><ul class="nav nav-sidebar nav-sidebar-icons-reverse" data-nav-type="accordion"> ... <li class="nav-item"> <a href="#" class="nav-link"> <i class="icon-home4"></i> Navigation link #1 </a> </li> <li class="nav-item"> <a href="#" class="nav-link"> <i class="icon-make-group"></i> Navigation link #2 </a> </li> ...</ul><!-- /right icons --> Other options
Default navigation menu doesn't have any horizontal borders. But you can easily change this behaviour just by adding .nav-sidebar-borderedclass to the main .nav-sidebarcontainer. You can also use additional components - such as badges, badge pills, extra text or icons - within .nav-link. But for proper vertical and horizontal alignment you need to use flexbox utility classes and extra containers. See the example with badges.
Bordered navigation markup
<!-- Bordered navigation --><ul class="nav nav-sidebar nav-sidebar-bordered" data-nav-type="accordion"> <li class="nav-item-header"> <div>Navigation title</div> <i class="icon-menu" title="Tooltip title"></i> </li> <li class="nav-item"> <a href="#" class="nav-link"> <i class="icon-home4"></i> Navigation link #1 </a> </li> <li class="nav-item"> <a href="#" class="nav-link"> <i class="icon-make-group"></i> Navigation link #2 </a> </li> ...</ul><!-- /bordered navigation --> Navigation with badges
<!-- Badges --><ul class="nav nav-sidebar" data-nav-type="accordion"> <li class="nav-item"> <a href="#" class="nav-link"> <i class="icon-home4"></i> <span class="d-flex align-items-center"> Nav link with badge <span class="badge bg-danger ml-auto">New</span> </span> </a> </li> <li class="nav-item"> <a href="#" class="nav-link"> <i class="icon-make-group"></i> <span class="d-flex align-items-center"> Nav link with badge pill <span class="badge badge-pill bg-blue ml-auto">32</span> </span> </a> </li></ul><!-- /badges -->