This package provides an easy way to quickly set up AdminLTE v3 with Laravel 6. It has no requirements and dependencies besides Laravel, so you can start building your admin panel immediately. The package just provides a Blade template that you can extend and advanced menu configuration possibilities. A replacement for the make:auth
Artisan command that uses AdminLTE styled views instead of the default Laravel ones is also included.
If you want use the older versions, please use the following versions:
- Version 1.x or branch laravel5-adminlte2: This version supports Laravel 5 and included AdminLTE v2
- Version 2.x or branch laravel6-adminlte2: This version supports Laravel 6 and included AdminLTE v2
- Requirements
- Installation
- Updating
- Usage
- Artisan Console Commands
- Configuration
- Translations
- Customize views
- Issues, Questions and Pull Requests
- Laravel 6.x
- PHP >= 7.2
-
Require the package using composer:
composer require jeroennoten/laravel-adminlte
-
Install the package using the command (For fresh laravel installations):
php artisan adminlte:install
You can use --basic to avoid authentication scaffolding installation
You can use --force to overwrite any file
You can also use --interactive to be guided through the process and choose what you want to install
-
To update this package, first update the composer package:
composer update jeroennoten/laravel-adminlte
-
Then, we need to update the assets
If you using AdminLTE for Laravel 5.x and are upgrading Laravel 6 version, delete the folder adminlte inside your public/vendor folder.
And then use this command to publish new assets
php artisan adminlte:update
-
If you have published and modified the default master, page views or login views, you will need to update them too.
Option 1:
- Make a copy of the views you modified.
- Publish the views again, using
php artisan vendor:publish --provider="JeroenNoten\LaravelAdminLte\AdminLteServiceProvider" --tag=views
- Redo the modifications you did.
Option 2:
- Modify in the css, js and other assets location in the master and page views.
To use the template, create a blade file and extend the layout with @extends('adminlte::page')
.
This template yields the following sections:
title
: for in the<title>
tagcontent_header
: title of the page, above the contentcontent
: all of the page's contentcss
: extra stylesheets (located in<head>
)js
: extra javascript (just before</body>
)
All sections are in fact optional. Your blade template could look like the following.
{{-- resources/views/admin/dashboard.blade.php --}}
@extends('adminlte::page')
@section('title', 'Dashboard')
@section('content_header')
<h1>Dashboard</h1>
@stop
@section('content')
<p>Welcome to this beautiful admin panel.</p>
@stop
@section('css')
<link rel="stylesheet" href="/css/admin_custom.css">
@stop
@section('js')
<script> console.log('Hi!'); </script>
@stop
You now just return this view from your controller, as usual. Check out AdminLTE to find out how to build beautiful content for your admin panel.
You can install all required & additional resources with the adminlte:install
command.
Without any option it will install AdminLTE assets, config & translations.
You can also install the Authentication Views with adding --type=enhanced
or additional to the Authentication Views also the Basic Views & Routes with adding --type=full
to the adminlte:install
command.
--force
: Overwrite existing views by default--type=
: Installation type, Available type: none, basic, enhanced & full.--only=
: Install only specific part, Available parts: assets, config, translations, auth_views, basic_views, basic_routes & main_views. This option can not used with the with option.--with=*
: Install basic assets with specific parts, Available parts: auth_views, basic_views & basic_routes. Can be use multiple--interactive
: The installation will guide you through the process
If you won't use cdn for the plugins, you can manage the optional plugins assets with the adminlte:plugins
command.
You can list all available plugins, install/update/remove all or specific plugins. Here are some examples for the command:
Install all plugin assets
artisan adminlte:plugins install
Install only Pace Progress & Select2 plugin assetsartisan adminlte:plugins install --plugin=paceProgress --plugin=select2
Update all Plugin assets
artisan adminlte:plugins update
Update only Pace Progress plugin assetsartisan adminlte:plugins update
Remove all Plugin assets
artisan adminlte:plugins remove
Remove only Select2 plugin assetsartisan adminlte:plugins remove --plugin=select2
operation
: Operation command, Available commands; list (default), install, update & remove.--plugin=
: Plugin Key. (Can used multiple times for the desired)--interactive
: The installation will guide you through the process.
This command is only a shortcut for adminlte:install --force --only=assets
.
Note: only for Laravel 5.2 and higher
This package ships the following command to replaces the authentication views with AdminLTE style views.
php artisan adminlte:install --only=auth_views
If you want to use the included authentication related views manually, you can create the following files and only add one line to each file:
resources/views/auth/login.blade.php
:
@extends('adminlte::login')
resources/views/auth/register.blade.php
@extends('adminlte::register')
resources/views/auth/passwords/email.blade.php
@extends('adminlte::passwords.email')
resources/views/auth/passwords/reset.blade.php
@extends('adminlte::passwords.reset')
By default, the login form contains a link to the registration form.
If you don't want a registration form, set the register_url
setting to null
and the link will not be displayed.
First, publish the configuration file:
php artisan adminlte:install --only=config
Now, edit config/adminlte.php
to configure the title, skin, menu, URLs etc. All configuration options are explained in the comments. However, I want to shed some light on the menu
configuration.
The default title of your admin panel, this goes into the title tag of your page. You can override it per page with the title section. You can optionally also specify a title prefix and/or postfix.
The following config options available:
-
title
Default title
-
title_prefix
Title prefix
-
title_postfix
Title postfix
Favicons could be used easily. There are two different ways to do this. Please add all favicons in the dir public/favicons/.
-
['use_ico_only' => true, 'use_full_favicon' => false]
If set to
true
, the filepublic/favicons/favicon.ico
is used. -
['use_ico_only' => false, 'use_full_favicon' => true]
If 'use_full_favicon' => true
more favicon files in public/favicons/
will be used. The activated code is:
<link rel="shortcut icon" href="{{ asset('favicons/favicon.ico') }}" />
<link rel="apple-touch-icon" sizes="57x57" href="{{ asset('favicons/apple-icon-57x57.png') }}">
<link rel="apple-touch-icon" sizes="60x60" href="{{ asset('favicons/apple-icon-60x60.png') }}">
<link rel="apple-touch-icon" sizes="72x72" href="{{ asset('favicons/apple-icon-72x72.png') }}">
<link rel="apple-touch-icon" sizes="76x76" href="{{ asset('favicons/apple-icon-76x76.png') }}">
<link rel="apple-touch-icon" sizes="114x114" href="{{ asset('favicons/apple-icon-114x114.png') }}">
<link rel="apple-touch-icon" sizes="120x120" href="{{ asset('favicons/apple-icon-120x120.png') }}">
<link rel="apple-touch-icon" sizes="144x144" href="{{ asset('favicons/apple-icon-144x144.png') }}">
<link rel="apple-touch-icon" sizes="152x152" href="{{ asset('favicons/apple-icon-152x152.png') }}">
<link rel="apple-touch-icon" sizes="180x180" href="{{ asset('favicons/apple-icon-180x180.png') }}">
<link rel="icon" type="image/png" sizes="16x16" href="{{ asset('favicons/favicon-16x16.png') }}">
<link rel="icon" type="image/png" sizes="32x32" href="{{ asset('favicons/favicon-32x32.png') }}">
<link rel="icon" type="image/png" sizes="96x96" href="{{ asset('favicons/favicon-96x96.png') }}">
<link rel="icon" type="image/png" sizes="192x192" href="{{ asset('favicons/android-icon-192x192.png') }}">
<link rel="manifest" href="{{ asset('favicons/manifest.json') }}">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="{{ asset('favicons/ms-icon-144x144.png') }}">
The logo is displayed at the upper left corner of your admin panel. You can use basic HTML here if you want for a simple text logo with a small image logo (e.g. 50 x 50 pixels), or you can use two images one big (e.g. 210 x 33 pixels) and one small (e.g. 50 x 50 pixels). You can also change the sizes of the images and the alt text for both logos.
-
logo
Text logo content, can be HTML.
-
logo_img
Small logo image, beside text logo.
Recommend size: 50x50px
-
logo_img_class
Extra classes for small logo image.
-
logo_img_xl
Large logo image, if you set a img url it will replace the text logo & small logo with one big logo and on collapsed sidebar it displays the small logo.
Recommend size: 210x33px
-
logo_img_xl_class
Extra classes for small logo image.
-
logo_img_alt
Logo image alt text.
It's possible change the layout, you can use a top navigation (navbar) only layout, a boxed layout with sidebar and you can enable fixed mode for sidebar, navbar and footer.
The following config options available:
-
layout_topnav
Enables/Disables top navigation only layout.
-
layout_boxed
Enables/Disables Enables/Disables boxed layout, can't used with
layout_topnav
. -
layout_fixed_sidebar
Enables/Disables fixed sidebar, can't used with
layout_topnav
. -
layout_fixed_navbar
Enables/Disables fixed navbar (top navigation), here you can set
true
or pass an array for responsive usage. -
layout_fixed_footer
Enables/Disables fixed footer, here you can set
true
or pass an array for responsive usage.
Responsive Usage for layout_fixed_navbar
& layout_fixed_footer
With responsive you can disable or enable the fixed navbar/footer for specific viewport sizes.
The array the following keys available, you can set them to true
or false
:
xs
from 0px to 575.99pxsm
from 576px to 767.99pxmd
from 768px to 991.99pxlg
from 992px to 1199.99pxxl
from 1200px
Examples
-
['xs' => true, 'lg' => false]
Fixed from mobile to small tablet (<= 991.99px)
-
['lg' => true]
Fixed starting from desktop (>= 992px)
-
['xs' => true, 'md' => false, 'xl' => true]
Fixed from mobile (<= 767.99px) and extra large desktops (>= 1200px) but not for small tablet and desktop (>= 768px & <= 1199.99px)
You can change the look and behavior of the admin panel, you can add extra classes to body, brand, sidebar, sidebar navigation, top navigation and top navigation container.
The following config options available:
-
classes_body
Extra classes for body.
-
classes_brand
Extra classes for brand.
-
classes_brand_text
Extra classes for brand text.
-
classes_content_header
Extra classes for content header container.
-
classes_content
Extra classes for content container.
-
classes_sidebar
Extra classes for sidebar.
-
classes_sidebar_nav
Extra classes for sidebar navigation.
-
classes_topnav
Extra classes for top navigation bar.
-
classes_topnav_nav
Extra classes for top navigation.
-
classes_topnav_container
Extra classes for top navigation bar container.
You can modify the sidebar, you can disable the collapsed mini sidebar, start with collapsed sidebar, enable sidebar auto collapse on specific screen size, enable sidebar collapse remember, change the scrollbar theme or auto hide option, disable sidebar navigation accordion and sidebar navigation menu item animation speed.
The following config options available:
-
sidebar_mini
Enables/Disables the collapsed mini sidebar for desktop and bigger screens (>= 992px), here you can set
true
,false
or'md'
to enable for small tablet and bigger screens (>= 768px). -
sidebar_collapse
Enables/Disables collapsed by default.
-
sidebar_collapse_auto_size
Enables/Disables auto collapse by setting min width to collapse.
-
sidebar_collapse_remember
Enables/Disables collapse remeber script.
-
sidebar_collapse_remember_no_transition
Enables/Disables transition after reload page.
-
sidebar_scrollbar_theme
Changes sidebar scrollbar theme.
-
sidebar_scrollbar_auto_hide
Changes sidebar scrollbar auto hide trigger.
-
sidebar_nav_accordion
Enables/Disables sidebar navigation accordion feature.
-
sidebar_nav_animation_speed
Changes the sidebar navigation slide animation speed.
Here you have the option to enable a right sidebar. When active, you can use @section('right-sidebar') The icon you configured will be displayed at the end of the top menu, and will show/hide the sidebar. The slide option will slide the sidebar over the content, while false will push the content, and have no animation. You can also choose the sidebar theme (dark or light).
The following config options available:
-
right_sidebar
Enables/Disables the right sidebar.
-
right_sidebar_icon
Changes the icon for the right sidebar button in main navigation.
-
right_sidebar_theme
Changes the theme of the right sidebar, the following options available:
dark
&light
. -
right_sidebar_slide
Enables/Disables slide animation.
-
right_sidebar_push
Enables/Disables push content instead of overlay for right sidebar.
-
right_sidebar_scrollbar_theme
Enables/Disables transition after reload page.
-
right_sidebar_scrollbar_auto_hide
Changes sidebar scrollbar auto hide trigger.
Here we have the url settings to setup the correct login/register link. Register here your dashboard, logout, login and register URLs.
-
use_route_url
Whether to use
route()
instead ofurl()
. -
dashboard_url
Changes the dashboard/logo URL.
-
logout_url
Changes the logout button URL.
-
logout_method
Changes the logout send method, available options:
GET
,POST
&null
(Laravel default). The logout URL automatically sends a POST request in Laravel 5.3 or higher. -
login_url
Changes the login url.
-
register_url
Changes the register link or if set
false
it will hide. -
password_reset_url
Changes the password reset url.
-
password_email_url
Changes the password email url.
If you want to use Laravel Mix instead of publishing the assets in your /public/vendor
folder, start by installing the following NPM packages:
npm i @fortawesome/fontawesome-free
npm i icheck-bootstrap
npm i overlayscrollbars
Add the following to your bootstrap.js
file after window.$ = window.jQuery = require('jquery');
:
require('overlayscrollbars');
require('../../vendor/almasaeed2010/adminlte/dist/js/adminlte');
Replace your app.scss
content by the following:
// Fonts
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic');
@import '~@fortawesome/fontawesome-free/css/all.css';
// OverlayScrollbars
@import '~overlayscrollbars/css/OverlayScrollbars.css';
// iCheck
@import '~icheck-bootstrap/icheck-bootstrap.css';
// AdminLTE
@import '../../vendor/almasaeed2010/adminlte/dist/css/adminlte.css';
// Bootstrap
// Already imported by AdminLTE
//@import '~bootstrap/scss/bootstrap';
After preparing the Laravel Mix vendor files, set enabled_laravel_mix
to true
to enable load app.css & app.js .
-
enabled_laravel_mix
Enables Laravel Mix specific css/js load in master layout. Warning If you enable this option, the sections
adminlte_css
&adminlte_js
will not rendered.
Specify your menu items to display in the left sidebar. Each menu item should have a text and a URL. You can also specify an icon from Font Awesome. A string instead of an array represents a header in sidebar layout. The 'can' is a filter on Laravel's built in Gate functionality.
You can configure your menu as follows:
'menu' => [
'MAIN NAVIGATION',
[
'text' => 'Blog',
'url' => 'admin/blog',
],
[
'text' => 'Pages',
'url' => 'admin/pages',
'icon' => 'fas fa-fw fa-file'
],
[
'text' => 'Show my website',
'url' => '/',
'target' => '_blank'
],
'ACCOUNT SETTINGS',
[
'text' => 'Profile',
'route' => 'admin.profile',
'icon' => 'fas fa-fw fa-user'
],
[
'text' => 'Change Password',
'route' => 'admin.password',
'icon' => 'fas fa-fw fa-lock'
],
],
With a single string, you specify a menu header item to separate the items.
With an array, you specify a menu item. text
and url
or route
are required attributes.
The icon
attribute is optional, you get an open circle if you leave it out.
The available icons that you can use are those from Font Awesome.
Just specify the name of the icon and it will appear in front of your menu item.
It's also possible to add menu items to the top navigation while sidebar is enabled, you just need to set the topnav
attribute to true
.
This will ignored if the top navigation layout is enabled, all menu items will appear in top navigation.
Use the can
attribute if you want conditionally show the menu item. This integrates with Laravel's Gate
functionality. If you need to conditionally show headers as well, you need to wrap it in an array like other menu items, using the header
attribute:
[
[
'header' => 'BLOG',
'url' => 'admin/blog',
'can' => 'manage-blog'
],
[
'text' => 'Add new post',
'url' => 'admin/blog/new',
'can' => 'add-blog-post'
],
]
It's possible to add a search input in your menu, using a menu item with the following configuration:
[
'search' => true,
'href' => 'test', //form action
'method' => 'POST', //form method
'input_name' => 'menu-search-input', //input name
'text' => 'Search', //input placeholder
],
If you need custom filters, you can easily add your own menu filters to this package. This can be useful when you are using a third-party package for authorization (instead of Laravel's Gate
functionality).
For example with Laratrust:
<?php
namespace MyApp;
use JeroenNoten\LaravelAdminLte\Menu\Builder;
use JeroenNoten\LaravelAdminLte\Menu\Filters\FilterInterface;
use Laratrust;
class MyMenuFilter implements FilterInterface
{
public function transform($item, Builder $builder)
{
if (isset($item['permission']) && ! Laratrust::can($item['permission'])) {
return false;
}
return $item;
}
}
And then add to config/adminlte.php
:
'filters' => [
JeroenNoten\LaravelAdminLte\Menu\Filters\ActiveFilter::class,
JeroenNoten\LaravelAdminLte\Menu\Filters\HrefFilter::class,
JeroenNoten\LaravelAdminLte\Menu\Filters\SubmenuFilter::class,
JeroenNoten\LaravelAdminLte\Menu\Filters\ClassesFilter::class,
//JeroenNoten\LaravelAdminLte\Menu\Filters\GateFilter::class, Comment this line out
MyApp\MyMenuFilter::class,
]
It is also possible to configure the menu at runtime, e.g. in the boot of any service provider. Use this if your menu is not static, for example when it depends on your database or the locale. It is also possible to combine both approaches. The menus will simply be concatenated and the order of service providers determines the order in the menu.
To configure the menu at runtime, register a handler or callback for the MenuBuilding
event, for example in the boot()
method of a service provider:
use Illuminate\Contracts\Events\Dispatcher;
use JeroenNoten\LaravelAdminLte\Events\BuildingMenu;
class AppServiceProvider extends ServiceProvider
{
public function boot(Dispatcher $events)
{
$events->listen(BuildingMenu::class, function (BuildingMenu $event) {
$event->menu->add('MAIN NAVIGATION');
$event->menu->add([
'text' => 'Blog',
'url' => 'admin/blog',
]);
});
}
}
The configuration options are the same as in the static configuration files.
A more practical example that actually uses translations and the database:
public function boot(Dispatcher $events)
{
$events->listen(BuildingMenu::class, function (BuildingMenu $event) {
$event->menu->add(trans('menu.pages'));
$items = Page::all()->map(function (Page $page) {
return [
'text' => $page['title'],
'url' => route('admin.pages.edit', $page)
];
});
$event->menu->add(...$items);
});
}
This event-based approach is used to make sure that your code that builds the menu runs only when the admin panel is actually displayed and not on every request.
By default, a menu item is considered active if any of the following holds:
- The current path matches the
url
parameter - The current path is a sub-path of the
url
parameter - If it has a submenu containing an active menu item
To override this behavior, you can specify an active
parameter with an array of active URLs, asterisks and regular expressions are supported.
To utilize regex, simply prefix your pattern with regex:
and it will get evaluated automatically. The pattern will attempt to match the path of the URL, returned by request()->path()
, which returns the current URL without the domain name. Example:
[
'text' => 'Pages',
'url' => 'pages',
'active' => ['pages', 'content', 'content/*', 'regex:@^content/[0-9]+$@']
]
Here we can set the filters you want to include for rendering the menu. You can add your own filters to this array after you've created them. You can comment out the GateFilter if you don't want to use Laravel's built in Gate functionality
-
filters
Array of menu filters
Default menu filters:
JeroenNoten\LaravelAdminLte\Menu\Filters\HrefFilter::class
JeroenNoten\LaravelAdminLte\Menu\Filters\SearchFilter::class
JeroenNoten\LaravelAdminLte\Menu\Filters\ActiveFilter::class
JeroenNoten\LaravelAdminLte\Menu\Filters\SubmenuFilter::class
JeroenNoten\LaravelAdminLte\Menu\Filters\ClassesFilter::class
JeroenNoten\LaravelAdminLte\Menu\Filters\GateFilter::class
JeroenNoten\LaravelAdminLte\Menu\Filters\LangFilter::class
Configure which JavaScript plugins should be included. At this moment, DataTables, Select2, Chartjs and SweetAlert are added out-of-the-box, including the Javascript and CSS files from a CDN via script and link tag. Plugin Name, active status and files array (even empty) are required. Files, when added, need to have type (js or css), asset (true or false) and location (string). When asset is set to true, the location will be output using asset() function.
By default the DataTables, Select2, ChartJS, Pace and SweetAlert2 plugins are supported and but not active. You can activate them with changing the config file to load it on every page or add a section in specific blade files, this will automatically injecting their CDN files.
Section example: @section('plugins.Datatables', true)
You can use these plugins by default:
Datatables
Select2
Chartjs
Sweetalert2
Pace
You can also add and configure new plugins, modifying the plugin variable using the example structure below:
'plugins' => [
[
'name' => 'Plugin Name',
'active' => true,
'files' => [
[
'type' => 'js',
'asset' => false,
'location' => '//cdn.plugin.net/plugin.min.js',
],
[
'type' => 'css',
'asset' => true,
'location' => 'css/plugin.min.css',
],
],
],
]
With the name string you specify the plugin name, and the active value will enable/disable the plugin injection.
Each plugin have a files array, with contain arrays with file type (js
or css
), and location
.
If the asset value is true
, the injection will use the asset() function.
You can change the Pace plugin appearence, when using the CDN injection modifying the css file location.
'location' => '//cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/themes/{{color}}/pace-theme-{{theme}}.min.css',
Color values: black, blue (default), green, orange, pink, purple, red, silver, white & yellow
Theme values: barber-shop, big-counter, bounce, center-atom, center-circle, center-radar (default), center-simple, corner-indicator, fill-left, flash, flat-top, loading-bar, mac-osx, minimal
At the moment, English, German, French, Dutch, Portuguese, Spanish and Turkish translations are available out of the box.
Just specify the language in config/app.php
.
If you need to modify the texts or add other languages, you can publish the language files:
php artisan adminlte:install --only=translations
Now, you can edit translations or add languages in resources/lang/vendor/adminlte
.
This resource allow you to use lang files, and is active by default.
First, configure the menu using the key text
as translation string.
This is an example of configuration:
[
'header' => 'account_settings'
],
[
'text' => 'profile',
'url' => 'admin/settings',
'icon' => 'user',
],
All the translation strings must be added in the menu.php
file of each language needed.
The translations files are located at resources/lang/vendor/adminlte/
This is an example of the menu.php
lang file:
return [
'account_settings' => 'ACCOUNT SETTINGS',
'profile' => 'Profile',
];
To translate the menu headers, just use the header
param. Example:
[
'header' => 'account_settings'
],
[
'text' => 'profile',
'url' => 'admin/settings',
'icon' => 'user',
],
If you need full control over the provided views, you can publish them:
php artisan adminlte:install --only=main_views
Now, you can edit the views in resources/views/vendor/adminlte
.
You can report issues and ask questions in the issues section. Please start your issue with ISSUE:
and your question with QUESTION:
If you have a question, check the closed issues first. Over time, I've been able to answer quite a few.
To submit a Pull Request, please fork this repository, create a new branch and commit your new/updated code in there. Then open a Pull Request from your new branch. Refer to this guide for more info.