Accordion navigation type
Change collapsible navigation type to accordion by changing data-nav-type="collapsible" data attribute to data-nav-type="accordion" in main .nav-sidebar container.
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 or data attributes. The second navigation type is accordion: when new item is expanded, current level is collapsed. This logic also works in all navigation levels. In folded sidebar parent level of navigation doesn't have click event and shows child levels on hover/focus, but child levels functionality remains the same according to the type of navigation. Sidebar navigation supports up to 3 levels of children menus.

Navigation classes
This table contains all classes related to the vertical sidebar navigation. Vertical navigation is a custom layout element that uses global 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 -->										
										
									
Activity
New notifications
James has completed the task Submit documents from Onboarding list
2 hours ago
Margo has added 4 users to Customer enablement channel
3 hours ago
Subscription #466573 from 10.12.2021 has been cancelled. Refund case #4492 created
4 hours ago
Older notifications
Nick requested your feedback and approval in support request #458
3 days ago
Mike added 1 new file(s) to Product management project
new_contract.pdf
112KB
1 day ago
All hands meeting will take place coming Thursday at 13:45.
2 days ago
Christine commented on your community post from 10.12.2021
2 days ago
HR department requested you to complete internal survey by Friday
3 days ago
Loading...
Demo configuration
Color mode
Direction
Layouts
Purchase Limitless