Treeview Plugin

The Treeview plugin converts a nested list into a collapsible tree where submenus expand and contract on click. It’s what powers the sidebar navigation in the demo dashboards.

Usage

Data API

Add data-lte-toggle="treeview" to the parent <ul> or <ol>. Inside, mark items that have children with .nav-item and put the submenu in a nested <ul class="nav-treeview">:

<ul class="nav sidebar-menu flex-column" data-lte-toggle="treeview" role="menu">
  <li class="nav-item">
    <a class="nav-link" href="#">
      <i class="nav-icon bi bi-speedometer"></i>
      <p>Dashboard</p>
    </a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link">
      <i class="nav-icon bi bi-folder"></i>
      <p>
        Reports
        <i class="nav-arrow bi bi-chevron-right"></i>
      </p>
    </a>
    <ul class="nav nav-treeview">
      <li class="nav-item">
        <a href="#" class="nav-link"><i class="nav-icon bi bi-circle"></i><p>Sales</p></a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link"><i class="nav-icon bi bi-circle"></i><p>Traffic</p></a>
      </li>
    </ul>
  </li>
</ul>

To start with a submenu pre-expanded, add menu-open to its .nav-item.

Configuration

Configure via data-* attributes on the parent <ul>:

Attribute	Default	Description
`data-accordion`	`true`	Close other open submenus when one opens. Set `false` for non-accordion behaviour (multiple submenus open at once).
`data-animation-speed`	`300`	Slide animation duration in milliseconds. Set `0` to disable animation.

<!-- Non-accordion mode: multiple submenus can stay open -->
<ul class="nav sidebar-menu" data-lte-toggle="treeview" data-accordion="false">
  …
</ul>

<!-- Faster animation -->
<ul class="nav sidebar-menu" data-lte-toggle="treeview" data-animation-speed="150">
  …
</ul>

CSS Classes

Class	Applied to	Description
`menu-open`	`.nav-item` (the parent of a submenu)	The submenu is currently expanded.
`nav-treeview`	`<ul>` (nested)	Marks a submenu so the plugin recognises it.
`nav-arrow`	`<i>` inside `.nav-link`	The chevron icon that rotates when the submenu opens.

Events

Event	Description
`expanded.lte.treeview`	Fired on the `.nav-item` when its submenu opens.
`collapsed.lte.treeview`	Fired on the `.nav-item` when its submenu closes.
`load.lte.treeview`	Fired once per page load for any submenu that’s already expanded via the `menu-open` class.

document.addEventListener("expanded.lte.treeview", (e) => {
  console.log("Opened submenu inside:", e.target)
})

Programmatic API

import { Treeview } from "admin-lte"

const item = document.querySelector(".sidebar-menu .nav-item")
const tv = new Treeview(item, { accordion: true, animationSpeed: 300 })

tv.open()    // expand this item's submenu
tv.close()   // collapse it
tv.toggle()  // toggle

Methods

Method	Returns	Description
`open()`	`void`	Expands the submenu. If `accordion` is `true`, closes sibling submenus first. Fires `expanded.lte.treeview`.
`close()`	`void`	Collapses the submenu. Fires `collapsed.lte.treeview`.
`toggle()`	`void`	Calls `open()` or `close()` based on current state.