DOCSEARCHbyAlgolia
Submit Docs

AdminLTE

repository·master·Indexed 13 days ago

https://github.com/colorlibhq/adminlte

A responsive open-source admin dashboard and control panel template built on Bootstrap 5.3. Version 4 features a vanilla JavaScript core, removing the jQuery dependency. It provides a customizable UI for web applications with specialized editions for React, Next.js, Vue 3, Nuxt, Laravel, Django, Symfony, Angular 22, ASP.NET Core, and Drupal.

Tokens
62.5K
Snippets
172
Records
231
Agent score
99%

What's inside AdminLTE

  1. Choose an AdminLTE Framework Edition

    master

    AdminLTE provides specialized editions for various web frameworks to ensure idiomatic integration (components, routing, auth, and theming).

    EditionRepositoryInstall Command
    HTML / Bootstrap (Core)AdminLTEnpm install admin-lte
    React & Next.jsadminlte-reactsee repo
    Vue 3 & Nuxtadminlte-vuesee repo
    Laraveladminlte-laravelcomposer require colorlibhq/adminlte-laravel
    Djangoadminlte-djangopip install django-adminlte4
    Symfonyadminlte-symfonycomposer require colorlibhq/adminlte-symfony
    Angular 22adminlte-angularnpm i @adminlte/angular
    ASP.NET Coreadminlte-aspnetdotnet add package ColorlibHQ.AdminLTE.AspNetCore
    Drupaladminlte-drupalsee repo

  2. Understand the AdminLTE MIT License

    master

    AdminLTE is licensed under the MIT license. This is a highly permissive license that allows you to use, modify, and distribute the software for almost any purpose, including commercial and private projects.

    The only requirement is that you must include the original copyright notice in "all copies or substantial portions of the Software."

    Permissions include:

    • Use in commercial projects.
    • Use in personal/private projects.
    • Modify and change the work.
    • Distribute the code.
    • Sublicense: incorporate the work into something that has a more restrictive license.

  3. What is AdminLTE?

    master

    AdminLTE is an MIT-licensed admin dashboard template built on Bootstrap 5.3.8 using vanilla TypeScript (no jQuery). It provides an application shell including responsive layouts, sidebar navigation, light/dark/auto color modes, and RTL support.

    Note: AdminLTE is a template, not a component library. You integrate it by dropping its markup into your project and customizing it as needed. Bootstrap 5 handles the individual components, while AdminLTE manages the overall application structure.

  4. How ColorMode works in AdminLTE

    master

    AdminLTE uses the ColorMode module to manage Bootstrap 5.3 color modes (light, dark, and auto). The module resolves the active theme based on a specific hierarchy of precedence:

    1. Visitor's stored choice: The value in localStorage.lte-theme (set when a user clicks a toggle). This takes highest priority.
    2. Page-declared theme: The data-bs-theme attribute on the <html> element as served by the server. This is useful for per-user preferences stored in cookies or databases.
    3. OS preference: The prefers-color-scheme CSS media query, which is followed live if no explicit choice is found in the two steps above.

    The resolved mode is applied as data-bs-theme="light|dark" on the <html> element, ensuring all Bootstrap and AdminLTE components adapt automatically.

  5. Understand AdminLTE core layout classes

    master

    AdminLTE relies on four primary CSS classes to define the dashboard structure:

    ClassDescription
    app-wrapperThe CSS grid root that defines the header, sidebar, main, and footer regions.
    app-headerThe top navigation bar; sticks to the top of the viewport when layout-fixed is applied to the body.
    app-sidebarThe collapsible side rail. Use sidebar-expand-lg on the <body> to control the breakpoint.
    app-mainThe scrollable content region where the primary application content resides.

  6. Manage Card States and CardWidget Integration

    master

    The CardWidget plugin manages several states for cards. You can set these states in your initial markup to define the starting appearance of a card.

    State Classes

    ClassDescription
    .collapsed-cardHides the body and footer, and swaps the collapse icon for the expand icon.
    .maximized-cardFixes the card to the viewport at full size. AdminLTE also sets this on <html> to lock page scrolling.
    .was-collapsedSet by CardWidget on a card that was collapsed when it was maximized; ensures it returns to a collapsed state when restored.
    .expanding-cardPresent during the duration of the expand animation.

    Icon Handling

    To ensure icons swap correctly during state changes, include both icons in your markup and let the CSS handle visibility based on the state:

    • Use [data-lte-icon="expand"] for the icon shown when the card is collapsed.
    • Use [data-lte-icon="collapse"] for the icon shown when the card is expanded.

    Note: If you need to toggle a card from an external button, do not manually add/remove state classes. Instead, use the CardWidget programmatic API to ensure all associated events are fired correctly.

  7. Understand what properties flip in RTL mode

    master

    AdminLTE leverages Bootstrap 5's logical properties. When dir="rtl" is active, the following behaviors occur automatically:

    Property TypeRTL Behavior
    margin-left / padding-leftSwapped to right
    left, right positioningSwapped
    text-align: left / rightSwapped
    Bootstrap .ms-*, .me-*, .float-start, .float-endMirrored via logical properties
    transform: translateX()Sign is inverted
    Sidebar positionDocks to the right
    Dropdown menusOpen direction flips automatically

    What does NOT flip automatically:

    • Bootstrap Icons: Directional icons (e.g., bi-arrow-right) must be manually swapped to their -left counterparts.
    • Third-party widgets: Charts (ApexCharts), Calendars (FullCalendar), and Tables (Tabulator) may require specific RTL configuration options.
    • Numbers: Digits remain LTR per standard Unicode bidi behavior.

  9. SidebarSearch Matching Rules and Behavior

    master

    Understanding how the search algorithm interacts with the sidebar structure:

    • Case-Insensitivity: Matching is case-insensitive.
    • Partial Matching: It matches any part of a .nav-link's text, not just the beginning.
    • Hierarchy Preservation: A parent menu item stays visible if any of its descendants match. Matching parents are automatically expanded to reveal results.
    • Subtree Retention: If a parent's own name matches the query, its entire subtree is kept.
    • Header Hiding: .nav-header section labels are hidden during filtering because the grouping context is lost.
    • Accessibility: Entries are hidden using the hidden attribute rather than CSS classes, ensuring they are removed from the accessibility tree.
    • State Management: The plugin snapshots the open state and inline display properties of submenus before searching to ensure accurate restoration via clear().

  10. Fullscreen implementation details and limitations

    master

    When using the FullScreen plugin, keep the following technical details in mind:

    • Scope: The plugin targets document.documentElement (the <html> element), meaning the entire page goes fullscreen. If you want to fullscreen only a specific component like a card, use the maximize() method of the CardWidget instead.
    • Browser Support: The plugin relies on the native Fullscreen API. Always check document.fullscreenEnabled before attempting to invoke fullscreen methods.
    • Icon Syncing: Icon visibility (toggling the .d-none class) and plugin events are driven by the browser's native fullscreenchange event. This ensures the UI remains in sync even if the user exits fullscreen using hardware keys like <kbd>ESC</kbd> or <kbd>F11</kbd>.
    • Icon Styling: The plugin uses the Bootstrap d-none utility class to hide/show icons rather than inline styles. This ensures compatibility with various icon libraries like FontAwesome, Lucide, or Tabler Icons.

  11. Understand the AdminLTE structural blueprint

    master

    AdminLTE uses a CSS grid-based layout where a root wrapper contains four primary regions. The order of these elements inside the wrapper does not matter, as the grid template positions them based on their specific classes.

    The Four Regions

    1. .app-wrapper: The root container that defines the grid. It must live directly inside the <body> tag. Adding .compact-mode to this element (or any parent) reduces padding throughout the layout.
    2. .app-header: The top bar (navbar). It typically uses Bootstrap navbar classes. To enable the sidebar toggle, include an element with data-lte-toggle="sidebar".
    3. .app-sidebar: The side rail. It requires two internal children: .sidebar-brand (for logos/branding) and .sidebar-wrapper (for the scrollable navigation menu).
    4. .app-main: The primary content area. It typically contains .app-content-header (for titles and breadcrumbs) and .app-content (for the main body). It is highly recommended to wrap content inside .app-content with .container-fluid or .container to prevent content from hitting the screen edges.
    <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
  <div class="app-wrapper">
    <nav class="app-header navbar navbar-expand bg-body">…</nav>
    <aside class="app-sidebar bg-body-secondary shadow" data-bs-theme="dark">…</aside>
    <main class="app-main">
      <div class="app-content-header">
        <!-- page title + breadcrumb -->
      </div>
      <div class="app-content">
        <!-- page body, cards, tables, etc. -->
      </div>
    </main>
    <footer class="app-footer">…</footer>
  </div>
</body>

  12. When to use CSS variables vs SCSS rebuild

    master

    Decide between runtime CSS overrides and SCSS recompilation based on the type of customization required:

    CustomizationCSS variablesSCSS rebuild
    Brand colours✅✅
    Body / text colours✅✅
    Border radius✅✅
    Sidebar width❌✅
    Breakpoint changes❌✅
    Spacing scale❌✅
    Font sizespartial✅ (full control)

    Best Practice: Use CSS variables whenever possible to ensure your theme survives AdminLTE upgrades without merge conflicts. Reserve SCSS overrides for structural changes like sidebar width or breakpoints.