Bordered navigation
By default, vertical sidebar navigation doesn't have clear
visual separation between nav items, it has its own advantages
and disadvantages - thanks to bigger vertical padding, nav
items are readable enough and match general design theme. But
in some cases you might want to highlight them by adding
horizontal lines to them. This is where this nav style preset
might be handy. To use, simply add
.nav-sidebar-bordered class to main sidebar nav
container.
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 -->
