Nav item badges
Badges are awesome. If you need to add a counter, resolution, status, stamp
or any other short information to your navigation item, simply add badge
component markup after nav link text along with .ms-auto class to stick it
to the right. Since .nav-link is based on flexbox, you can use utility
classes to adjust spacing and ordering. All navigation types, styles and all navigation
levels support badge component. Thanks to SASS, badge color in active state
changes dynamically and depends on color lightness.
In light sidebar:
In dark sidebar:
Navigation classes
nav component 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
.nav component 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 header element 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
.nav container. Since active link color is different from hover
and initial states color, .nav-item has 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
.active and disabled states. 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 active item 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-item container. |
.nav-item-expanded |
Responsible for expanding submenu on page load - this class
should be added to .nav-item container in all levels. |
.nav-item-open |
This class also should be used in combination with .nav-item
and/or .nav-item-expanded classes, since it's responsible for
some styling and toggles dynamically. |
.nav-group-sub |
Navigation submenu class - should be used with .nav class in
<ul> element in all menu levels. |
.nav-sidebar-icons-reverse |
Add this class to .nav-sidebar container to change icons
alignment from left to right. |
.nav-sidebar-bordered |
Add this class to .nav-sidebar container 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 collapsible navigation type to
accordion type - when new item is expanded, current level is
collapsed. |
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 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/focus.
Collapsible navigation markup
<!-- Collapsible navigation markup -->
<ul class="nav nav-sidebar" data-nav-type="collapsible">
<li class="nav-item-header">
<div class="text-uppercase fs-sm lh-sm opacity-50">Group title</div>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="ph-plus-circle"></i>
Top level link
</a>
</li>
<li class="nav-item nav-item-submenu">
<a href="#" class="nav-link">
<i class="ph-circles-three-plus"></i>
<span>Top level with subnav</span>
</a>
<ul class="nav-group-sub collapse">
<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 class="text-uppercase fs-sm lh-sm opacity-50">Group title</div>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="ph-plus-circle"></i>
Top level link
</a>
</li>
<li class="nav-item nav-item-submenu">
<a href="#" class="nav-link">
<i class="ph-circles-three-plus"></i>
<span>Top level with subnav</span>
</a>
<ul class="nav-group-sub collapse">
<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-reverse class to .nav-sidebar container
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="ph-plus-circle"></i>
Navigation link #1
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="ph-circles-three-plus"></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="ph-plus-circle"></i>
Navigation link #1
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="ph-circles-three-plus"></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-bordered class to
the main .nav-sidebar container. 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 class="text-uppercase fs-sm lh-sm opacity-50">Group title</div>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="ph-plus-circle"></i>
Navigation link #1
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="ph-circles-three-plus"></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="ph-plus-circle"></i>
Nav link with badge
<span class="badge bg-danger ms-auto">New</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="ph-circles-three-plus"></i>
Nav link with badge pill
<span class="badge bg-primary rounded-pill ms-auto">32</span>
</a>
</li>
</ul>
<!-- /badges -->
