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
| Template | Renders |
|---|---|
layout/html.html.twig | Document shell, body classes, flash-free theme init |
layout/page.html.twig | The AdminLTE app shell (navbar, sidebar, content, footer) |
navigation/menu--admin.html.twig | Administration menu as a sidebar treeview |
navigation/menu--main.html.twig | Main navigation as a sidebar treeview |
navigation/menu--account.html.twig | Account menu as a navbar user dropdown |
navigation/menu-local-tasks.html.twig | Admin tabs as Bootstrap nav-tabs |
navigation/breadcrumb.html.twig | Bootstrap breadcrumb in the content header |
misc/status-messages.html.twig | Dismissible Bootstrap alerts |
block/block--system-branding-block.html.twig | Sidebar 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__labeland descriptions styled as Bootstrap form controls. - Buttons —
.button,.button--primary,.button--danger/.button.deleteand.button--smallmapped to Bootstrap button variants. - Operations dropbuttons — the secondary actions are moved into a floating, opaque menu (via the
adminlteDropbuttonbehaviour) 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).