### JavaScript Plugins Overview

AdminLTE ships seven JavaScript plugins as a single bundle (`adminlte.js`). Each one is exported from the package root, can be triggered via `data-lte-*` attributes for declarative use, and exposes a programmatic API for code-driven control.

##### At a glance

Plugin | Data API | Programmatic | Documentation
--- | --- | --- | ---
PushMenu | `data-lte-toggle="sidebar"` | `.toggle()` / `.expand()` / `.collapse()` | Reference
Treeview | `data-lte-toggle="treeview"` on parent menu | `.toggle()` / `.open()` / `.close()` | Reference
CardWidget | `data-lte-toggle="card-collapse"`, `card-remove`, `card-maximize` | `.toggle()` / `.collapse()` / `.expand()` / `.remove()` / `.maximize()` / `.minimize()` / `.toggleMaximize()` | Reference
DirectChat | `data-lte-toggle="chat-pane"` | `.toggle()` | Reference
FullScreen | `data-lte-toggle="fullscreen"` | `.toggleFullScreen()` / `.inFullScreen()` / `.outFullscreen()` | Reference
Layout | (auto-applied to `<body>`) | `.holdTransition(time)` | Reference
AccessibilityManager | (helper function: `initAccessibility()`) | `.announce()` / `.focusElement()` / `.trapFocus()` / `.addLandmarks()` | Reference

##### Two ways to use them

###### 1. Data API (declarative)

For most pages, the data API is enough — no JavaScript code required. Drop the right `data-lte-*` attribute on the trigger element and the bundle wires it up on page load:

    <!-- Sidebar toggle -->
    <button data-lte-toggle="sidebar">☰</button>

    <!-- Card collapse / remove / maximize -->
    <div class="card">
      <div class="card-header">
        <h3 class="card-title">Title</h3>
        <div class="card-tools">
          <button class="btn btn-tool" data-lte-toggle="card-collapse">
            <i data-lte-icon="expand" class="bi bi-dash-lg"></i>
            <i data-lte-icon="collapse" class="bi bi-plus-lg"></i>
          </button>
        </div>
      </div>
      <div class="card-body">…</div>
    </div>

The bundle attaches all data-API listeners on `DOMContentLoaded`. Dynamically-injected elements still work for the PushMenu, CardWidget, and Treeview plugins, which use event delegation.

###### 2. Programmatic (imperative)

When you need to control a plugin from your own code — eg. open the sidebar after a successful login, or expand a card on a route change — instantiate the class directly:

    // ESM (bundler import)
    import { PushMenu, CardWidget, Treeview } from "admin-lte"

    // Sidebar
    new PushMenu(document.body, {}).expand()

    // Card maximize
    const card = document.querySelector("#chart-card")
    new CardWidget(card, {}).maximize()

Or use the globals (UMD bundle, no build step):

    <script>
      // The bundle assigns to window.adminlte
      new adminlte.PushMenu(document.body, {}).expand()
    </script>

##### Listening to plugin events

Every plugin fires a `CustomEvent` or `Event` on the element it operates on. Listen for these to coordinate with your own code:

    document.addEventListener("expanded.lte.card-widget", (e) => {
      console.log("Card expanded:", e.target)
    })

    document.addEventListener("open.lte.push-menu", () => {
      // user opened the sidebar — eg. analytics call
    })

###### Event name reference

Plugin | Event | Fired when
--- | --- | ---
PushMenu | `open.lte.push-menu` | Sidebar expanded
PushMenu | `collapse.lte.push-menu` | Sidebar collapsed
Treeview | `expanded.lte.treeview` | Submenu opened
Treeview | `collapsed.lte.treeview` | Submenu closed
Treeview | `load.lte.treeview` | Pre-opened submenu detected on page load
CardWidget | `expanded.lte.card-widget` | Card expanded
CardWidget | `collapsed.lte.card-widget` | Card collapsed
CardWidget | `remove.lte.card-widget` | Card removed
CardWidget | `maximized.lte.card-widget` | Card maximized
CardWidget | `minimized.lte.card-widget` | Card minimized
DirectChat | `expanded.lte.direct-chat` | Contacts pane opened
DirectChat | `collapsed.lte.direct-chat` | Contacts pane closed
FullScreen | `maximized.lte.fullscreen` | Entered fullscreen
FullScreen | `minimized.lte.fullscreen` | Exited fullscreen

All events bubble. Attach listeners to `document` or `document.body` for global hooks, or to a specific card / sidebar element for scoped listeners.

##### Configuring via data attributes

Some plugins read config from `data-*` attributes on their target element:

    <!-- Treeview — non-accordion (multiple submenus can be open at once) -->
    <ul class="nav sidebar-menu" data-lte-toggle="treeview" data-accordion="false">…</ul>

    <!-- Treeview — custom animation speed -->
    <ul class="nav sidebar-menu" data-lte-toggle="treeview" data-animation-speed="500">…</ul>

    <!-- Sidebar — opt into localStorage persistence (default: off) -->
    <aside class="app-sidebar" data-enable-persistence="true">…</aside>

    <!-- Sidebar — override the mobile breakpoint -->
    <aside class="app-sidebar" data-sidebar-breakpoint="768">…</aside>

Each plugin’s reference page documents which attributes it supports.

##### CSS classes the plugins manage

The plugins toggle a small set of CSS classes that you can also style or react to:

Class | Set by | Where | Meaning
--- | --- | --- | ---
`sidebar-collapse` | PushMenu | `<body>` | Sidebar collapsed (desktop mini state, or mobile-closed)
`sidebar-open` | PushMenu | `<body>` | Mobile sidebar explicitly opened by user
`sidebar-mini` | PushMenu | `<body>` | Mini-sidebar mode active
`menu-open` | Treeview | `.nav-item` | Submenu is currently expanded
`collapsed-card` | CardWidget | `.card` | Card body/footer are collapsed
`maximized-card` | CardWidget | `<html>` and `.card` | Card is in fullscreen mode
`direct-chat-contacts-open` | DirectChat | `.direct-chat` | Contacts pane visible
`hold-transition` | Layout | `<body>` | Transitions disabled briefly (during resize, etc.)
`app-loaded` | Layout | `<body>` | Initial page-load animation finished
`reduce-motion` | AccessibilityManager | `<body>` | OS `prefers-reduced-motion` detected

##### Production vs source

The plugins live in `src/ts/` as TypeScript modules. The published `dist/js/adminlte.js` is a Rollup bundle of all seven, exporting them under a single `adminlte` namespace (UMD) or named imports (ESM).

If you only need one or two plugins and care about bundle size, importing individual modules from `node_modules/admin-lte/src/ts/` will tree-shake — but you’ll need TypeScript in your toolchain.

##### Where to next

- Detailed reference for each plugin (links in the table above)
- Layout Blueprint — the structural classes the plugins operate on
- Accessibility — keyboard navigation, focus trapping, ARIA helpers