ColorlibHQ/AdminLTE v4.3.0

v4.3.0 — Sidebar search, ribbons, social widgets, gallery & search results

on GitHub

AdminLTE 4.3.0 adds a new JavaScript plugin, two CSS components, three demo pages and three documentation pages — and fixes a duplicate-id bug that could affect your own code.

Sidebar search

A new SidebarSearch plugin filters the sidebar menu as you type. Drop data-lte-toggle="sidebar-search" on an input and it works:

<div class="sidebar-search" role="search">
  <label for="sidebar-search-input" class="visually-hidden">Filter menu</label>
  <input type="search" id="sidebar-search-input" class="form-control form-control-sm"
         placeholder="Filter menu…" autocomplete="off"
         data-lte-toggle="sidebar-search" data-lte-target="#navigation">
</div>

A parent survives if any descendant matches and expands to reveal it. A group whose own name matches keeps its entire subtree, so expanding it is never a dead end. Clearing the field — ESC, the native clear button, or clear() — puts every submenu back exactly as you left it. Entries are hidden with the hidden attribute rather than a class, so they leave the accessibility tree as well as the layout.

Fires filtered.lte.sidebar-search with { query, matches }. Both listeners are delegated on document, so a sidebar rendered after load — Turbo Frame, client-side router — needs no re-initialisation. Full reference →

The app header also gains a navbar search and a language menu.

Ribbons

Corner banners in three sizes:

<div class="card">
  <div class="ribbon-wrapper">
    <div class="ribbon text-bg-primary">New</div>
  </div>
  <div class="card-body">…</div>
</div>

The geometry derives from one custom property, so rescaling means overriding --lte-ribbon-size and nothing else. The clip inherits the parent's corner radius, so it follows a rounded card instead of cutting a square out of it, and RTL mirrors the corner and the rotation with no extra markup.

Social & post widgets

.user-block, .post, .widget-user, .widget-user-2 and .description-block — profile cards and activity feeds. The class names match v3, so markup you are migrating works unchanged, but the implementations are grid and flex rather than floats, and colour comes from Bootstrap utilities. .user-block renders avatar, name and meta from flat markup with no wrapper element.

New pages

• Gallery — a filterable media library that carries no image library at all. The tiles are a Bootstrap .ratio box plus .object-fit-cover; the filter is page-local script. Nothing is added to adminlte.js.
• Search Results — typed results (page / user / file / project) over a tabbed filter, with a refine panel, related searches and a worked no-results state.
• Ribbons — every colour, size and placement.
• General UI Elements gains nav tabs & pills, modals and offcanvas.

Documentation

New Card and Miscellaneous component references mean every AdminLTE component that ships CSS now has a reference page: cards, callouts, ribbons, small box, info box, timeline, the social/post widgets, progress-bar sizes, themed toasts and the image-size utilities. Plus a SidebarSearch page and a recipe on wiring a language switcher to a real locale.

Fixes

• #navigation resolved to the app header, not your menu. The accessibility module resolved its skip-link targets with a single selector list (#navigation, nav, [role="navigation"]), but a selector list resolves in document order rather than by which selector matched. On any page where a header <nav> precedes a menu already carrying id="navigation", the header was stamped with the id a second time — leaving a duplicate id, pointing "Skip to navigation" at the header, and silently redirecting document.querySelector("#navigation") in application code to the wrong element. An element the page already gave the id to now always wins.
• Seven order links on dashboard v2 pointed at a page that does not exist.

Quality

• Accessibility gate widened from 10 to 16 pages, zero serious/critical violations. It caught three Bootstrap-default contrast misses on the new pages, all fixed at the source rather than waived.
• Unit tests up to 62 (from 51).
• A Playwright pass over all 88 built pages: no console errors, no failed requests, no dead links.

Install

npm install admin-lte@4.3.0

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/admin-lte@4.3.0/dist/css/adminlte.min.css">
<script src="https://cdn.jsdelivr.net/npm/admin-lte@4.3.0/dist/js/adminlte.min.js"></script>

Full details in the CHANGELOG.

What's Changed

• feat(select2): opt-in compatibility theme, v3→v4 plugin migration table, real remote-data demo by @puikinsh in #6098
• chore(docs): remove the dead faq.mdx by @puikinsh in #6099
• 4.3.0 — sidebar search, ribbons, social widgets, gallery and search results by @puikinsh in #6100

Full Changelog: v4.2.0...v4.3.0