Layout
The AdminLTE application shell is built by two templates — html.html.twig and page.html.twig — which map Drupal's regions onto AdminLTE's structural elements: a fixed navbar, a collapsible sidebar, a content header, the main content area, and a footer.
Regions
The theme declares its regions in adminlte.info.yml. Each region is wired to a specific AdminLTE location in page.html.twig:
| Region | AdminLTE location |
|---|---|
navbar_left | Top navbar, after the sidebar toggle |
navbar_right | Top navbar, right (account menu, mode toggle) |
sidebar_brand | Sidebar header (site logo + name) |
sidebar | Sidebar treeview menu |
page_title | Content header (left) |
breadcrumb | Content header (right) |
highlighted | Status messages |
help | Contextual help |
content | Main content (tabs, actions, page content) |
footer | App footer |
page_top / page_bottom | Reserved for core (admin toolbar) |
The region declaration
# adminlte.info.yml
regions:
page_top: 'Page top'
page_bottom: 'Page bottom'
navbar_left: 'Navbar (left)'
navbar_right: 'Navbar (right)'
sidebar_brand: 'Sidebar brand'
sidebar: 'Sidebar'
page_title: 'Content header: title'
breadcrumb: 'Content header: breadcrumb'
highlighted: 'Highlighted'
help: 'Help'
content: 'Content'
footer: 'Footer'The page shell
page.html.twig wraps everything in .app-wrapper and renders the navbar, sidebar, main area and footer. The sidebar toggle and dark-mode toggle are part of the navbar; the content header row only renders when there is a page title or breadcrumb:
<div class="app-wrapper">
<nav class="app-header navbar navbar-expand bg-body">
<div class="container-fluid">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-lte-toggle="sidebar" href="#" role="button">
<i class="bi bi-list" aria-hidden="true"></i>
</a>
</li>
{{ page.navbar_left }}
</ul>
<ul class="navbar-nav ms-auto">
{# theme toggle + account menu (navbar_right) #}
</ul>
</div>
</nav>
<aside class="app-sidebar shadow"{% if sidebar_dark %} data-bs-theme="dark"{% endif %}>
<div class="sidebar-brand">{{ page.sidebar_brand }}</div>
<div class="sidebar-wrapper">{{ page.sidebar }}</div>
</aside>
<main class="app-main">
<div class="app-content-header">…{{ page.page_title }} / {{ page.breadcrumb }}…</div>
<div class="app-content">
<div class="container-fluid">
{{ page.highlighted }}{{ page.help }}{{ page.content }}
</div>
</div>
</main>
</div>Body classes
html.html.twig adds the AdminLTE body classes — layout-fixed, sidebar-expand-lg and bg-body-tertiary — along with path/login classes, and emits the flash-free colour-mode init script in <head>. A skip link to #main-content is included for keyboard accessibility.
The sidebar's top offset is bound to --drupal-displace-offset-top in the bridge CSS, so the shell sits below Drupal's core admin toolbar instead of behind it. To customise the shell, override page.html.twig (or any region's template) in a sub-theme — see Theming.