Components

AdminLTE for Drupal works by overriding Drupal's core templates so the standard admin output (menus, tabs, breadcrumbs, status messages, the account menu and branding) renders as Bootstrap 5.3 / AdminLTE markup. A bridge stylesheet then maps the rest of Drupal's admin markup — forms, buttons, tables, dropbuttons — onto Bootstrap.

Templates the theme provides

TemplateRenders
layout/html.html.twigDocument shell, body classes, flash-free theme init
layout/page.html.twigThe AdminLTE app shell (navbar, sidebar, content, footer)
navigation/menu--admin.html.twigAdministration menu as a sidebar treeview
navigation/menu--main.html.twigMain navigation as a sidebar treeview
navigation/menu--account.html.twigAccount menu as a navbar user dropdown
navigation/menu-local-tasks.html.twigAdmin tabs as Bootstrap nav-tabs
navigation/breadcrumb.html.twigBootstrap breadcrumb in the content header
misc/status-messages.html.twigDismissible Bootstrap alerts
block/block--system-branding-block.html.twigSidebar brand (logo + name)

Status messages → Bootstrap alerts

Drupal's messages render as dismissible Bootstrap 5 alerts, with an icon and ARIA role mapped per message type:

{% set type_map = {
  'status':  { 'class': 'alert-success', 'icon': 'bi-check-circle-fill' },
  'warning': { 'class': 'alert-warning', 'icon': 'bi-exclamation-triangle-fill' },
  'error':   { 'class': 'alert-danger',   'icon': 'bi-x-octagon-fill' },
} %}
<div role="{{ type == 'error' ? 'alert' : 'contentinfo' }}"{{ alert_attributes }}>
  <i class="bi {{ conf.icon }} me-2" aria-hidden="true"></i>
  <div class="flex-grow-1">{{ messages|first }}</div>
  <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>

Admin tabs → nav-tabs

The adminlte_preprocess_menu_local_task() hook adds Bootstrap nav classes to each admin tab so local tasks render as AdminLTE nav-tabs:

function adminlte_preprocess_menu_local_task(array &$variables): void {
  $variables['attributes']['class'][] = 'nav-item';
  $variables['link']['#options']['attributes']['class'][] = 'nav-link';
  if (!empty($variables['is_active'])) {
    $variables['link']['#options']['attributes']['class'][] = 'active';
  }
}

Bridged admin markup

css/adminlte-drupal.css styles Drupal's minimal (stable9) admin output to match Bootstrap/AdminLTE. Bridged elements include:

  • Forms.form-element, .form-item__label and descriptions styled as Bootstrap form controls.
  • Buttons.button, .button--primary, .button--danger/.button.delete and .button--small mapped to Bootstrap button variants.
  • Operations dropbuttons — the secondary actions are moved into a floating, opaque menu (via the adminlteDropbutton behaviour) so they no longer overflow onto neighbouring table rows.
  • Messages, tabledrag handles, vertical tabs, pagers and the AJAX throbber.

Because this is a theme, you build dashboard content with ordinary Drupal blocks, Views and node output — Bootstrap 5.3 utility classes are available everywhere thanks to the bundled CSS. To restyle a specific component, override its template or add rules in a sub-theme's stylesheet (see Theming).


AdminLTE 4 · Drupal port Edit on GitHub