Laravel 10 AdminLTE Dashboard Templating
Note: Tested on Laravel 10.x
What We’ll Do
We'll use the AdminLTE 3 dashboard template (based on Bootstrap 4) and split our layout into reusable Blade components for better structure and maintainability.
File Structure
Create the following files under:
resources/views/backend/layouts/
-
base.blade.php– Includes stylesheets & JS (head/body base) -
header.blade.php– Navigation bar -
sidebar.blade.php– Left sidebar menu -
footer.blade.php– Footer section -
master.blade.php– Master layout that combines all components
base.blade.php
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>@yield('title') | Artisanary</title> <!-- Google Font --> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback"> <!-- CSS Assets --> <link rel="stylesheet" href="{{ asset('assets/backend/css/all.min.css') }}"> <link rel="stylesheet" href="{{ asset('assets/backend/css/jqvmap.min.css') }}"> <link rel="stylesheet" href="{{ asset('assets/backend/css/adminlte.min.css') }}"> <link rel="stylesheet" href="{{ asset('assets/backend/css/OverlayScrollbars.min.css') }}"> <link rel="stylesheet" href="{{ asset('assets/backend/css/summernote-bs4.min.css') }}"> </head> <body class="hold-transition sidebar-mini layout-fixed {{ request()->routeIs('login') ? 'login-page' : '' }}"> @yield('base.content') <!-- JS Scripts --> <script src="{{ asset('assets/backend/js/jquery.min.js') }}"></script> <script src="{{ asset('assets/backend/js/jquery-ui.min.js') }}"></script> <script> $.widget.bridge('uibutton', $.ui.button) </script> <script src="{{ asset('assets/backend/js/bootstrap.bundle.min.js') }}"></script> <script src="{{ asset('assets/backend/js/jquery.vmap.min.js') }}"></script> <script src="{{ asset('assets/backend/js/summernote-bs4.min.js') }}"></script> <script src="{{ asset('assets/backend/js/jquery.overlayScrollbars.min.js') }}"></script> <script src="{{ asset('assets/backend/js/adminlte.js') }}"></script> <script src="{{ asset('assets/backend/js/demo.js') }}"></script> </body> </html>
header.blade.php
<nav class="main-header navbar navbar-expand navbar-white navbar-light"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" data-widget="pushmenu" href="#"><i class="fas fa-bars"></i></a> </li> </ul> <ul class="navbar-nav ml-auto"> <!-- Search --> <li class="nav-item"> <a class="nav-link" data-widget="navbar-search" href="#"><i class="fas fa-search"></i></a> <div class="navbar-search-block"> <form class="form-inline"> <input class="form-control form-control-navbar" type="search" placeholder="Search"> <div class="input-group-append"> <button class="btn btn-navbar"><i class="fas fa-search"></i></button> <button class="btn btn-navbar" type="button" data-widget="navbar-search"><i class="fas fa-times"></i></button> </div> </form> </div> </li> <!-- Fullscreen and Sidebar --> <li class="nav-item"><a class="nav-link" data-widget="fullscreen" href="#"><i class="fas fa-expand-arrows-alt"></i></a></li> <li class="nav-item"><a class="nav-link" data-widget="control-sidebar" href="#"><i class="fas fa-th-large"></i></a></li> </ul> </nav>
sidebar.blade.php
<aside class="main-sidebar sidebar-dark-primary elevation-4"> <a href="#" class="brand-link"> <img src="{{ asset('assets/backend/img/AdminLTELogo.png') }}" class="brand-image img-circle elevation-3"> <span class="brand-text font-weight-light">AdminLTE 3</span> </a> <div class="sidebar"> <div class="user-panel d-flex mt-3 pb-3 mb-3"> <div class="image"> <img src="{{ asset('assets/backend/img/user2-160x160.jpg') }}" class="img-circle elevation-2"> </div> <div class="info"><a href="#" class="d-block">Alexander Pierce</a></div> </div> <!-- Search --> <div class="form-inline"> <div class="input-group" data-widget="sidebar-search"> <input class="form-control form-control-sidebar" type="search" placeholder="Search"> <div class="input-group-append"> <button class="btn btn-sidebar"><i class="fas fa-search fa-fw"></i></button> </div> </div> </div> <!-- Menu --> <nav class="mt-2"> <ul class="nav nav-pills nav-sidebar flex-column" role="menu"> <li class="nav-item"> <a href="#" class="nav-link"><i class="nav-icon fas fa-tachometer-alt"></i> <p>Dashboard</p></a> </li> <li class="nav-item menu-open"> <a href="#" class="nav-link active"> <i class="nav-icon fas fa-blog"></i> <p>Blog <i class="right fas fa-angle-left"></i></p> </a> <ul class="nav nav-treeview"> <li class="nav-item"><a href="#" class="nav-link active"><i class="fa fa-list nav-icon"></i><p>All Blogs</p></a></li> <li class="nav-item"><a href="#" class="nav-link"><i class="fas fa-blog nav-icon"></i><p>Create Blog</p></a></li> </ul> </li> <li class="nav-item"> <a href="#" class="nav-link"><i class="nav-icon fas fa-user"></i><p>Roles</p></a> </li> </ul> </nav> </div> </aside>
footer.blade.php
<footer class="main-footer"> <strong>© 2014-2021 <a href="https://adminlte.io">AdminLTE.io</a></strong> All rights reserved. <div class="float-right d-none d-sm-inline-block"><b>Version</b> 3.2.0</div> </footer>
master.blade.php
@extends('backend.layouts.base') @section('base.content') <div class="wrapper"> <!-- Preloader --> <div class="preloader flex-column justify-content-center align-items-center"> <img class="animation__shake" src="{{ asset('assets/backend/img/AdminLTELogo.png') }}" alt="AdminLTELogo" height="60" width="60"> </div> @include('backend.layouts.header') @include('backend.layouts.sidebar') <div class="content-wrapper"> @yield('content') </div> @include('backend.layouts.footer') <aside class="control-sidebar control-sidebar-dark"></aside> </div> @endsection
dashboard.blade.php
Place in: resources/views/dashboard.blade.php
@extends('backend.layouts.master') @section('title', __('Dashboard')) @section('content') <div class="content-header"> <div class="container-fluid"> <div class="row mb-2"> <div class="col-sm-6"><h1 class="m-0">Dashboard</h1></div> <div class="col-sm-6"> <ol class="breadcrumb float-sm-right"> <li class="breadcrumb-item"><a href="#">Home</a></li> <li class="breadcrumb-item active">Dashboard</li> </ol> </div> </div> </div> </div> <section class="content"> <div class="container-fluid"> <div class="row"> @foreach ([ ['count' => 150, 'label' => 'New Orders', 'class' => 'info', 'icon' => 'ion-bag'], ['count' => '53%', 'label' => 'Bounce Rate', 'class' => 'success', 'icon' => 'ion-stats-bars'], ['count' => 44, 'label' => 'User Registrations', 'class' => 'warning', 'icon' => 'ion-person-add'], ['count' => 65, 'label' => 'Unique Visitors', 'class' => 'danger', 'icon' => 'ion-pie-graph'], ] as $box) <div class="col-lg-3 col-6"> <div class="small-box bg-{{ $box['class'] }}"> <div class="inner"><h3>{{ $box['count'] }}</h3><p>{{ $box['label'] }}</p></div> <div class="icon"><i class="ion {{ $box['icon'] }}"></i></div> <a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a> </div> </div> @endforeach </div> </div> </section> @endsection
Asset Directory
Ensure your assets are in:
public/assets/backend/
├── css/
├── js/
└── img/