Layout

Every page extends the bundle's base template, @AdminLte/layout.html.twig — the Symfony-idiomatic equivalent of the other ports' DashboardLayout. Override the blocks you need; the topbar, sidebar and footer are rendered for you.

Extending the layout

{% extends '@AdminLte/layout.html.twig' %}

{% block page_title %}Dashboard{% endblock %}

{% block body %}
    <div class="row">
        <div class="col-lg-3 col-6">
            <twig:Adminlte:SmallBox title="150" text="New Orders" variant="primary" icon="bi bi-bag" url="#" />
        </div>
    </div>

    <twig:Adminlte:Card title="Welcome" icon="bi bi-stars" variant="primary" outline collapsible>
        Built with AdminLTE 4 Twig Components.
    </twig:Adminlte:Card>
{% endblock %}

Render it from a controller exactly like any Twig template:

#[Route('/admin', name: 'app_dashboard')]
public function dashboard(): Response
{
    return $this->render('admin/dashboard.html.twig');
}

Available blocks

The shell components

The layout assembles three layout components. You only touch them if you want to customise the defaults:

• <twig:Adminlte:Topbar> — the app-header navbar with the sidebar toggle, optional search, fullscreen and color-mode toggles. Its default slot is a user-menu area.
• <twig:Adminlte:Sidebar> — renders the brand logo and the config-driven menu via the recursive <twig:Adminlte:SidebarNavItem> component.
• <twig:Adminlte:Footer> — renders the footer copyright, text and version from your config.

Adding a breadcrumb

{% block breadcrumb %}
    <twig:Adminlte:Breadcrumb align="float-sm-end" :items="[
        { label: 'Home', url: '/' },
        { label: 'Dashboard', active: true },
    ]" />
{% endblock %}

Adding page-specific assets

Use {{ parent() }} to keep the base CSS/JS and append your own (for example, a chart library):

{% block javascripts %}{{ parent() }}
    <script src="https://cdn.jsdelivr.net/npm/apexcharts@3.37.1/dist/apexcharts.min.js"></script>
    <script>/* init charts here */</script>
{% endblock %}