or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

cards.md index.md plugins.md search.md styling.md utilities.md widgets.md

tile.json

Layout & Navigation

AdminLTE provides comprehensive layout management and navigation components including responsive sidebar controls, control panels, and automatic layout calculations. These components handle the core structural elements of the admin interface.

Layout

The Layout component manages the overall page layout, handling height calculations, scrollbar theming, and responsive adjustments.

API

class Layout {
  constructor(element: HTMLElement, options?: LayoutOptions);
  fixLayoutHeight(extra?: string): void;
  fixLoginRegisterHeight(): void;
}

interface LayoutOptions {
  scrollbarTheme?: string;
  scrollbarAutoHide?: string;
  panelAutoHeight?: boolean;
  panelAutoHeightMode?: 'min-height' | 'height';
  preloadDuration?: number;
  loginRegisterAutoHeight?: boolean;
}

Default Configuration

const LayoutDefaults = {
  scrollbarTheme: 'os-theme-light',
  scrollbarAutoHide: 'l',
  panelAutoHeight: true,
  panelAutoHeightMode: 'min-height',
  preloadDuration: 200,
  loginRegisterAutoHeight: true
};

Usage Examples

Programmatic Usage

import { Layout } from 'admin-lte';

// Initialize layout management
const bodyElement = document.querySelector('body');
const layout = new Layout(bodyElement, {
  panelAutoHeight: true,
  scrollbarTheme: 'os-theme-dark',
  preloadDuration: 300
});

// Manually fix layout height
layout.fixLayoutHeight('60px'); // Add extra height for custom elements

// Fix login/register page heights
layout.fixLoginRegisterHeight();

Automatic Initialization

The Layout component typically initializes automatically when AdminLTE loads:

// Layout automatically initializes on page load
$(document).ready(function() {
  $('body').Layout({
    panelAutoHeight: true,
    scrollbarAutoHide: 'l'
  });
});

PushMenu

The PushMenu component controls the main sidebar navigation, handling expand/collapse states, responsive behavior, and optional state persistence.

API

class PushMenu {
  constructor(element: HTMLElement, options?: PushMenuOptions);
  expand(): void;
  collapse(): void;
  toggle(): void;
  autoCollapse(resize?: boolean): void;
  remember(): void;
}

interface PushMenuOptions {
  autoCollapseSize?: number;
  enableRemember?: boolean;
  noTransitionAfterReload?: boolean;
  animationSpeed?: number;
}

Default Configuration

const PushMenuDefaults = {
  autoCollapseSize: 992,
  enableRemember: false,
  noTransitionAfterReload: true,
  animationSpeed: 300
};

Events

// Event types triggered by PushMenu
type PushMenuEvents = 
  | 'collapsed.lte.pushmenu'
  | 'collapsed-done.lte.pushmenu'
  | 'shown.lte.pushmenu';

Usage Examples

Programmatic Usage

import { PushMenu } from 'admin-lte';

// Initialize sidebar menu
const menuElement = document.querySelector('[data-widget="pushmenu"]');
const pushMenu = new PushMenu(menuElement, {
  autoCollapseSize: 768,
  enableRemember: true,
  animationSpeed: 250
});

// Control sidebar programmatically
pushMenu.expand();
pushMenu.collapse();
pushMenu.toggle();

// Listen for events
document.addEventListener('collapsed.lte.pushmenu', function(event) {
  console.log('Sidebar collapsed');
});

document.addEventListener('shown.lte.pushmenu', function(event) {
  console.log('Sidebar expanded');
});

Data Attribute Usage

<!-- Sidebar toggle button -->
<a class="nav-link" data-widget="pushmenu" href="#" role="button">
  <i class="fas fa-bars"></i>
</a>

<!-- Main sidebar -->
<aside class="main-sidebar sidebar-dark-primary elevation-4">
  <a href="index.html" class="brand-link">
    <span class="brand-text font-weight-light">AdminLTE 3</span>
  </a>
  
  <div class="sidebar">
    <nav class="mt-2">
      <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview">
        <li class="nav-item">
          <a href="#" class="nav-link">
            <i class="nav-icon fas fa-tachometer-alt"></i>
            <p>Dashboard</p>
          </a>
        </li>
      </ul>
    </nav>
  </div>
</aside>

Responsive Sidebar with State Persistence

const pushMenu = new PushMenu(menuElement, {
  autoCollapseSize: 992,  // Collapse below 992px width
  enableRemember: true,   // Remember state in localStorage
  animationSpeed: 300
});

// The sidebar will automatically:
// - Collapse on screens smaller than 992px
// - Remember its state between page loads
// - Provide smooth animations

ControlSidebar

The ControlSidebar component manages the right-side control panel, providing slide animations and scrollbar customization.

API

class ControlSidebar {
  constructor(element: HTMLElement, options?: ControlSidebarOptions);
  collapse(): void;
  show(toggle?: boolean): void;
  toggle(): void;
}

interface ControlSidebarOptions {
  controlsidebarSlide?: boolean;
  scrollbarTheme?: string;
  scrollbarAutoHide?: string;
  target?: string;
  animationSpeed?: number;
}

Default Configuration

const ControlSidebarDefaults = {
  controlsidebarSlide: true,
  scrollbarTheme: 'os-theme-light',
  scrollbarAutoHide: 'l',
  target: '.control-sidebar',
  animationSpeed: 300
};

Events

// Event types triggered by ControlSidebar
type ControlSidebarEvents = 
  | 'collapsed.lte.controlsidebar'
  | 'collapsed-done.lte.controlsidebar'
  | 'expanded.lte.controlsidebar';

Usage Examples

Programmatic Usage

import { ControlSidebar } from 'admin-lte';

// Initialize control sidebar
const controlElement = document.querySelector('[data-widget="control-sidebar"]');
const controlSidebar = new ControlSidebar(controlElement, {
  controlsidebarSlide: true,
  scrollbarTheme: 'os-theme-dark',
  animationSpeed: 400
});

// Control the sidebar
controlSidebar.show();
controlSidebar.collapse();
controlSidebar.toggle();

// Listen for events
document.addEventListener('expanded.lte.controlsidebar', function(event) {
  console.log('Control sidebar opened');
});

Data Attribute Usage

<!-- Control sidebar toggle button -->
<li class="nav-item">
  <a class="nav-link" data-widget="control-sidebar" href="#" role="button">
    <i class="fas fa-th-large"></i>
  </a>
</li>

<!-- Control sidebar panel -->
<aside class="control-sidebar control-sidebar-dark">
  <div class="p-3">
    <h5>Customize AdminLTE</h5>
    <hr class="mb-2">
    <div class="mb-4">
      <input type="checkbox" value="1" class="mr-1">
      <span>Dark Mode</span>
    </div>
    <div class="mb-4">
      <input type="checkbox" value="1" class="mr-1">
      <span>Small Sidebar</span>
    </div>
  </div>
</aside>

Advanced Control Sidebar with Settings

<aside class="control-sidebar control-sidebar-dark">
  <div class="p-3 control-sidebar-content">
    <h5>Customize AdminLTE</h5>
    <hr class="mb-2">
    
    <!-- Theme Settings -->
    <h6>Header Options</h6>
    <div class="form-group">
      <div class="custom-control custom-switch">
        <input type="checkbox" class="custom-control-input" id="dark-mode-switch">
        <label class="custom-control-label" for="dark-mode-switch">Dark Mode</label>
      </div>
    </div>
    
    <!-- Sidebar Options -->
    <h6>Sidebar Options</h6>
    <div class="form-group">
      <div class="custom-control custom-switch">
        <input type="checkbox" class="custom-control-input" id="sidebar-mini-switch">
        <label class="custom-control-label" for="sidebar-mini-switch">Sidebar Mini</label>
      </div>
    </div>
  </div>
</aside>

Complete Layout Example

Here's a complete example showing how all layout components work together:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>AdminLTE Layout</title>
  <link rel="stylesheet" href="dist/css/adminlte.min.css">
</head>
<body class="hold-transition sidebar-mini">
  <div class="wrapper">
    <!-- Navbar -->
    <nav class="main-header navbar navbar-expand navbar-white navbar-light">
      <!-- Left navbar links -->
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" data-widget="pushmenu" href="#" role="button">
            <i class="fas fa-bars"></i>
          </a>
        </li>
      </ul>
      
      <!-- Right navbar links -->
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link" data-widget="control-sidebar" href="#" role="button">
            <i class="fas fa-th-large"></i>
          </a>
        </li>
      </ul>
    </nav>

    <!-- Main Sidebar Container -->
    <aside class="main-sidebar sidebar-dark-primary elevation-4">
      <a href="index.html" class="brand-link">
        <span class="brand-text font-weight-light">AdminLTE 3</span>
      </a>
      
      <div class="sidebar">
        <nav class="mt-2">
          <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview">
            <li class="nav-item">
              <a href="#" class="nav-link active">
                <i class="nav-icon fas fa-tachometer-alt"></i>
                <p>Dashboard</p>
              </a>
            </li>
          </ul>
        </nav>
      </div>
    </aside>

    <!-- Content Wrapper -->
    <div class="content-wrapper">
      <div class="content-header">
        <div class="container-fluid">
          <h1 class="m-0">Dashboard</h1>
        </div>
      </div>
      
      <section class="content">
        <div class="container-fluid">
          <!-- Your content here -->
        </div>
      </section>
    </div>

    <!-- Control Sidebar -->
    <aside class="control-sidebar control-sidebar-dark">
      <div class="p-3">
        <h5>Settings</h5>
        <!-- Settings content -->
      </div>
    </aside>
  </div>

  <script src="dist/js/adminlte.min.js"></script>
</body>
</html>

This layout provides:

Responsive sidebar that collapses automatically on smaller screens
Toggle buttons for both main sidebar and control sidebar
Automatic height calculations and scrollbar management
Consistent styling and behavior across all navigation elements

Version

Tile

Files