Sidebar Menu
The sidebar navigation is a Bootstrap .nav list with AdminLTE's .sidebar-menu class. Collapsible sub-menus (treeviews) are driven entirely by the data-lte-toggle="treeview" data API — no JavaScript code required.
Menu structure
The menu lives inside .sidebar-wrapper. The outer <ul> carries .nav .sidebar-menu .flex-column and the treeview toggle attribute. Each item is a .nav-item with a .nav-link; icons use .nav-icon:
<div class="sidebar-wrapper">
<nav class="mt-2">
<ul class="nav sidebar-menu flex-column"
data-lte-toggle="treeview" data-accordion="false" role="menu">
<li class="nav-item">
<a href="./index.html" class="nav-link active">
<i class="nav-icon bi bi-speedometer"></i>
<p>Dashboard</p>
</a>
</li>
<li class="nav-item">
<a href="./reports.html" class="nav-link">
<i class="nav-icon bi bi-bar-chart"></i>
<p>Reports</p>
</a>
</li>
</ul>
</nav>
</div>Anatomy
| Class / attribute | Purpose |
|---|---|
.sidebar-menu | Marks the root <ul> as the sidebar navigation. |
.nav-item | A single menu entry (<li>). |
.nav-link | The clickable link inside an item. Add .active to mark the current page. |
.nav-icon | The leading icon (a Bootstrap Icon, e.g. bi bi-speedometer). |
.nav-header | A non-clickable section label between groups of items. |
.nav-treeview | The nested <ul> of a collapsible sub-menu. |
.nav-arrow | The chevron that rotates when a treeview opens. |
.nav-badge / .nav-badge | A badge appended to a link's <p> for counts/labels. |
data-lte-toggle="treeview" | Enables collapsible sub-menus on the root list. |
data-accordion="false" | Allows multiple treeviews open at once (default behaviour is accordion). |
Section headers
<li class="nav-header">MAIN NAVIGATION</li>Treeview (collapsible sub-menu)
A treeview is a .nav-item whose link contains a .nav-arrow chevron and which holds a nested .nav-treeview list. The item gets the .menu-open class to render expanded on load:
<li class="nav-item menu-open">
<a href="#" class="nav-link active">
<i class="nav-icon bi bi-speedometer"></i>
<p>
Dashboard
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="./index.html" class="nav-link active">
<i class="nav-icon bi bi-circle"></i>
<p>Dashboard v1</p>
</a>
</li>
<li class="nav-item">
<a href="./index2.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Dashboard v2</p>
</a>
</li>
</ul>
</li>The Treeview plugin toggles .menu-open and slide-animates .nav-treeview on click. By default it behaves as an accordion (opening one sub-menu closes its siblings). Set data-accordion="false" on the root .sidebar-menu to keep multiple open. Animation speed can be tuned with data-animation-speed="300". Any item pre-marked .menu-open renders expanded immediately on page load.
Badges
Append a badge to a menu item by adding a .nav-badge (uses Bootstrap badge utilities) inside the link's <p>:
<a href="#" class="nav-link">
<i class="nav-icon bi bi-clipboard-fill"></i>
<p>
Layout Options
<span class="nav-badge badge text-bg-secondary me-3">7</span>
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>Treeviews nest to any depth — a .nav-treeview item can itself be a treeview with its own nested list.