This package provides an easy way to quickly set up AdminLTE v3 with Laravel 6 or higher. 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 higher 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
-
(Laravel 7+ only) Require the laravel/ui package using composer:
composer require laravel/ui php artisan ui:controllers
-
Install the package using the next command (for fresh laravel installations):
php artisan adminlte:install
You can use --force option to overwrite any existing file
You can use --interactive option 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, update the AdminLTE assets
Note: If you using AdminLTE for Laravel 5.x and are upgrading to Laravel 6 version, delete the folder adminlte inside your
public/vendor
folder.Use next command to publish the new assets:
php artisan adminlte:update
-
If you have published and modified the default master, page or other view, you will need to update them too. Please, note there could be huge updates on these views, so it is highly recommended to backup your changes.
-
Make a copy (or backup) of the views you have modified, those inside the folder
resources/views/vendor/adminlte
. -
Publish the views again, using
--force
to overwrite any existing files.php artisan adminlte:install --only=main_views --force
-
Compare with your backup files and redo the modifications you previously did to those views.
-
-
From time to time, new configuration options are added or default values are changed, so it is a recommendation to also update the package config file.
-
Make a copy (or backup) of your current package configuration, the
config/adminlte.php
file. -
Now, publish the new package configuration and accept the overwrite warning (or use
--force
option).php artisan adminlte:install --only=config
-
Compare with your backup config file and redo the modifications you previously made.
-
To use the template, create a new blade file and extend the layout with @extends('adminlte::page')
.
This template yields the following main sections:
title
: for the<title>
tag.content_header
: title of the page, above the content.content
: all of the page's content.footer
: content of the page footer.right-sidebar
: content of the right sidebar.css
: extra stylesheets (located in<head>
).js
: extra javascript (just before</body>
).
All sections are in fact optional. As an example, your most common blade template could look like the following:
@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 the required and some additional resources using the adminlte:install
command.
Without any option it will install the AdminLTE package assets, the configuration file and translations.
You can also install the package Authentication Views adding --type=enhanced
option, or additional to the Authentication Views also the package Basic Views and Routes adding the --type=full
option to the adminlte:install
command.
-
--force
: To force the overwrite of any existing files by default. -
--type=
: The installation type, the available types are: basic (default value), enhanced or full. -
--only=*
: To install only specific resources, the available resources are: assets, config, translations, auth_views, basic_views, basic_routes or main_views. This option can not be used with the--with
option. Also you can use this option multiple times, for example:php artisan adminlte:install --only=config --only=main_views
-
--with=*
: To install with additional resources, the available resources are: main_views, auth_views, basic_views or basic_routes. This option can be used multiple times, examples:php artisan adminlte:install --with=auth_views --with=basic_routes php artisan adminlte:install --type=full --with=main_views
-
--interactive
: To enable the installation guide you through the process.
If you won't use cdn for the plugins, you can manage the optional plugins with the adminlte:plugins
command.
You can list, install or remove all available plugins or specific plugins. Here are some examples for the command:
- List the status of all available plugins:
php artisan adminlte:plugins
- List the status of the specified plugins:
php artisan adminlte:plugins --plugin=datatables --plugin=select2
- Install all the available plugins:
php artisan adminlte:plugins install
- Install only Pace Progress & Select2 plugins:
php artisan adminlte:plugins install --plugin=paceProgress --plugin=select2
- Remove all the available plugins:
php artisan adminlte:plugins remove
- Remove only Select2 plugin:
php artisan adminlte:plugins remove --plugin=select2
operation
: The type of operation: list (default), install or remove.--plugin=
: To apply the operation only over the specified plugins, the value should be a plugin key.--force
: To force the overwrite of existing files.--interactive
: The installation will guide you through the process.
This command is only a shortcut for php artisan adminlte:install --force --only=assets
.
Note this command will only update the AdminLTE assets located on the
public/vendor
folder. It will not update any other package resources, refers to section Updating to check how to make a complete update.
This command is very useful to check the package resources installation status, to run it execute the command:
php artisan adminlte:status
Once complete, it will display a table with all the available package resources and they installation status. The status can be one of the nexts:
-
Installed: This means that the resource is installed and matches with the package resource.
-
Mismatch: This means that the installed resource mismatch the package resource. This can happen due to an update available or when you have made some modifications on the installed resource.
-
Not Installed: This means that package resource is not installed.
The table also shows a column which tells what resources are required for the package to work correctly. So, for these packages you should read Installed or Mismatch on the status column, otherwise the package won't work.
Note: this is only available for Laravel 5.2 or higher versions.
This package ships the following command to replace the authentication views with AdminLTE style views.
php artisan adminlte:install --only=auth_views
By default, the login form contains a link to the registration and password reset forms.
If you don't want a registration or password reset form, set the register_url
or password_reset_url
setting to null
and the respective link will not be displayed.
If you want to use the included authentication views manually, you can create the following files and only add one line to each one of these files:
- resources/views/auth/login.blade.php:
@extends('adminlte::auth.login')
- resources/views/auth/register.blade.php
@extends('adminlte::auth.register')
- resources/views/auth/verify.blade.php
@extends('adminlte::auth.verify')
- resources/views/auth/passwords/confirm.blade.php
@extends('adminlte::auth.passwords.confirm')
- resources/views/auth/passwords/email.blade.php
@extends('adminlte::auth.passwords.email')
- resources/views/auth/passwords/reset.blade.php
@extends('adminlte::auth.passwords.reset')
First, publish the configuration file (if you don't see the adminlte.php
file inside the config
folder):
php artisan adminlte:install --only=config
Now, edit config/adminlte.php
to configure the title, layout, menu, URLs etc. All configuration options are explained in the comments. However, we going to give a fast review here.
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 are available:
title
: Default title.title_prefix
: The title prefix.title_postfix
: The 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]
Whit this configuration the file
public/favicons/favicon.ico
is used. -
['use_ico_only' => false, 'use_full_favicon' => true]
Whit this configuration more favicon files in
public/favicons/
folder 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 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
: Path to the small logo image, beside text logo. Recommend size is: 50x50pxlogo_img_class
: Extra classes for the small logo image.logo_img_xl
: Path to large logo image, if you set a img url it will replace the text logo & small logo with one big logo. When the sidebar is collapsed it will displays the small logo. Recommend size is: 210x33pxlogo_img_xl_class
: Extra classes for the large logo image.logo_img_alt
: Logo image alt text.
The user menu is displayed at the upper right corner of your admin panel. The available options are:
-
usermenu_enabled
Whether to enable the user menu instead of the default logout button.
-
usermenu_header
Whether to enable the header inside the user menu.
-
usermenu_header_class
Extra classes for the header inside the user menu.
-
usermenu_image
Whether to enable the user image for the usermenu & lockscreen. Note: For this, you will need an extra function named
adminlte_image()
inside theApp/User
. Recommend size is: 160x160px -
usermenu_desc
Whether to enable the user description for the usermenu. Note: For this, you will need an extra function named
adminlte_desc()
inside theApp/User
. -
usermenu_profile_url
Whether to enable the user profile url can be set dynamically for the user instead of the config key
profile_url
. Note: For this, you need an extra function namedadminlte_profile_url()
inside theApp/User
. The return value should be a string, not a route or url.
Here you have an example code for the App/User
with custom image, description and profile url functions.
class User extends Authenticatable
{
…
public function adminlte_image()
{
return 'https://picsum.photos/300/300';
}
public function adminlte_desc()
{
return 'That\'s a nice guy';
}
public function adminlte_profile_url()
{
return 'profile/username';
}
}
It's possible to change the layout, you can use a top navigation (navbar) only layout, a boxed layout with sidebar, and also you can enable fixed mode for the sidebar, the navbar or the footer.
NOTE: Currently, you cannot use a boxed layout with a fixed navbar or a fixed footer. Also, do not enable
layout_topnav
andlayout_boxed
at the same time. Anything else can be mixed together.
The following config options are available:
-
layout_topnav
Enables/Disables the top navigation only layout, this will remove the sidebar and put your links at the top navbar. Can't be used with
layout_boxed
. -
layout_boxed
Enables/Disables the boxed layout that stretches width only to 1250px. Can't be used with
layout_topnav
. -
layout_fixed_sidebar
Enables/Disables the fixed sidebar mode. Can't be used with
layout_topnav
. -
layout_fixed_navbar
Enables/Disables the fixed navbar (top navigation) mode, here you can set to
true
or anarray
for responsive usage. Can't be used withlayout_boxed
. -
layout_fixed_footer
Enables/Disables the fixed footer mode, here you can set
true
or anarray
for responsive usage. Can't be used withlayout_boxed
.
When using an array on the layout_fixed_navbar
or layout_fixed_footer
configuration options, you can disable or enable the fixed layout for specific viewport sizes.
The following keys are available to use inside the array, you can set them to true
or false
:
xs
represent screens from 0px to 575.99px widthsm
represent screens from 576px to 767.99px widthmd
represent screens from 768px to 991.99px widthlg
represent screens from 992px to 1199.99px widthxl
represent screens from 1200px or more width
Examples:
-
['xs' => true, 'lg' => false]
:The element will be fixed from mobile to small tablet (<= 991.99px).
-
['lg' => true]
:The element will be fixed starting from desktop (>= 992px).
-
['xs' => true, 'md' => false, 'xl' => true]
:The element will be fixed for mobile (<= 767.99px) and extra large desktops (>= 1200px) but not for a small tablet and normal desktop (>= 768px & <= 1199.99px)
You can change the look and behavior of the authentication views (login, register, email verification, etc).
The following config options are available:
-
classes_auth_card
Extra classes for the card box. Classes will be added to element
div.card
. -
classes_auth_header
Extra classes for the card box header. Classes will be added to element
div.card-header
. -
classes_auth_body
Extra classes for the card box body. Classes will be added to element
div.card-body
. -
classes_auth_footer
Extra classes for the card box footer. Classes will be added to element
div.card-footer
. -
classes_auth_icon
Extra classes for the input icons (font awesome icons related to input fields).
-
classes_auth_btn
Extra classes for the submit buttons.
The set of current default values is the next one:
'classes_auth_card' => 'card-outline card-primary',
'classes_auth_header' => '',
'classes_auth_body' => '',
'classes_auth_footer' => '',
'classes_auth_icon' => '',
'classes_auth_btn' => 'btn-flat btn-primary',
However, you can customize the options as you want to get some particular themes, example:
Dark Theme
'classes_auth_card' => 'bg-gradient-dark',
'classes_auth_header' => '',
'classes_auth_body' => 'bg-gradient-dark',
'classes_auth_footer' => 'text-center',
'classes_auth_icon' => 'text-light',
'classes_auth_btn' => 'btn-flat btn-light',
Lightblue Theme
'classes_auth_card' => '',
'classes_auth_header' => 'bg-gradient-info',
'classes_auth_body' => '',
'classes_auth_footer' => 'text-center',
'classes_auth_icon' => 'fa-lg text-info',
'classes_auth_btn' => 'btn-flat btn-primary',
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 are available:
-
classes_body
Extra classes for body.
-
classes_brand
Extra classes for the brand. Classes will be added to element
a.navbar-brand
iflayout_topnav
is used, otherwise they will be added to elementa.brand-link
. -
classes_brand_text
Extra classes for the brand text. Classes will be added to element
span.brand-text
. -
classes_content_header
Classes for the content header container. Classes will be added to the container of element
div.content-header
. If you left this empty, a default classcontainer
will be used whenlayout_topnav
is used, otherwisecontainer-fluid
will be used as default. -
classes_content_wrapper
Classes for content wrapper container. Classes will be added to the container of element
div.content-wrapper
. -
classes_content
Classes for the content container. Classes will be added to the container of element
div.content
. If you left this empty, a default classcontainer
will be used whenlayout_topnav
is used, otherwisecontainer-fluid
will be used as default. -
classes_sidebar
Extra classes for sidebar. Classes will be added to element
aside.main-sidebar
. There are some built-in classes you can use here to customize the sidebar theme:sidebar-dark-<color>
sidebar-light-<color>
Where
<color>
is an AdminLTE available color. -
classes_sidebar_nav
Extra classes for the sidebar navigation. Classes will be added to element
ul.nav.nav-pills.nav-sidebar
. There are some built-in classes that you can use here:nav-child-indent
to indent child items.nav-compact
to get a compact nav style.nav-flat
to get a flat nav style.nav-legacy
to get a legacy v2 nav style.
-
classes_topnav
Extra classes for the top navigation bar. Classes will be added to element
nav.main-header.navbar
. There are some built-in classes you can use here to customize the topnav theme:navbar-<color>
Where
<color>
is an AdminLTE available color.Note: The recommendation is to combine
navbar-<color>
withnavbar-dark
ornavbar-light
. -
classes_topnav_nav
Extra classes for the top navigation. Classes will be added to element
nav.main-header.navbar
. -
classes_topnav_container
Extra classes for top navigation bar container. Classes will be added to the
div
wrapper inside elementnav.main-header.navbar
.
You can modify the sidebar, for example, 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 change the sidebar navigation menu item animation speed.
The following config options are available:
-
sidebar_mini
Enables/Disables the collapsed mini sidebar for desktop and bigger screens (>= 992px), you can set this option to
true
,false
or'md'
to enable for small tablet and bigger screens (>= 768px). -
sidebar_collapse
Enables/Disables the collapsed mode by default.
-
sidebar_collapse_auto_size
Enables/Disables auto collapse by setting a minimun width to auto collapse.
-
sidebar_collapse_remember
Enables/Disables the collapse remember script.
-
sidebar_collapse_remember_no_transition
Enables/Disables the transition after reload page.
-
sidebar_scrollbar_theme
Changes the sidebar scrollbar theme.
-
sidebar_scrollbar_auto_hide
Changes the sidebar scrollbar auto hide trigger.
-
sidebar_nav_accordion
Enables/Disables the sidebar navigation accordion feature.
-
sidebar_nav_animation_speed
Changes the sidebar slide animation speed.
Here you have the option to enable a right sidebar. When active, you can use the @section('right-sidebar')
. The icon you configure 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 without animation. You can also choose the sidebar theme (dark or light).
The following config options are available:
-
right_sidebar
Enables/Disables the right sidebar.
-
right_sidebar_icon
Changes the icon for the right sidebar toggler button in the topnav navigation.
-
right_sidebar_theme
Changes the theme of the right sidebar, the following options available:
dark
&light
. -
right_sidebar_slide
Enables/Disables the slide animation.
-
right_sidebar_push
Enables/Disables push content instead of overlay for the right sidebar.
-
right_sidebar_scrollbar_theme
Change the sidebar scrollbar theme. Default value is
os-theme-light
. -
right_sidebar_scrollbar_auto_hide
Changes the sidebar scrollbar auto hide trigger. Default value is
l
.
Here we have the url settings to setup the correct login/register links. Register here your dashboard, logout, login and register URLs.
-
use_route_url
Whether to use
route()
instead ofurl()
Laravel method. -
dashboard_url
Changes the dashboard/logo URL.
-
logout_url
Changes the logout button URL.
-
logout_method
Changes the logout send method, available options are:
GET
,POST
&null
(Laravel default).Note: 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 url. Set this option to
false
to hide the register link. -
password_reset_url
Changes the password reset url. This url should point to the view that displays the password reset form. Set this option to
false
to hide the password reset link. -
password_email_url
Changes the password email url. This url should point to the view that displays the send reset link form.
-
profile_url
Changes the user profile url. When not
false
, it will displays a button in the user menu.
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
Now, add the following to your bootstrap.js
file after window.$ = window.jQuery = require('jquery');
:
require('overlayscrollbars');
require('../../vendor/almasaeed2010/adminlte/dist/js/adminlte');
Also, 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 the load of app.css
& app.js
files.
-
enabled_laravel_mix
Enables Laravel Mix specific
css/js
load in master layout.
Also, you can change the paths used to lookup for the compiled JS
and CSS
files using the next configuration options.
-
laravel_mix_css_path
Path (including file name) to the compiled
CSS
file. This path should be relative to the public folder. Default value iscss/app.css
-
laravel_mix_js_path
Path (including file name) to the compiled
JS
file. This path should be relative to the public folder. Default value isjs/app.js
You can specify the menu items to display in the left sidebar. Each menu item should have a text and an URL (or Route). You can also specify an icon from Font Awesome. A string instead of an array represents a header in the sidebar. The can
option is a filter on Laravel's built in Gate functionality.
Here is a basic example of a menu configuration:
'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 the sidebar is enabled, you just need to set the topnav
attribute to true
. You can also set topnav_right
for put the item on the right side of the topnav or topnav_user
to place it in the user menu (above the user-body).
When the top navigation layout is enabled, all menu items will appear in the top navigation.
To place an item dynamically you can use the key
attribute, with this option you set an unique identifier. You can use this identifier later to add new items before or after the item represented by this key
identifier.
To add data-attributes
to your menu links, your can simply add an associative array called data
. Here is a basic example:
[
[
'header' => 'BLOG',
'url' => 'admin/blog',
'data' => [
'test' => 'content',
],
],
[
'text' => 'Add new post',
'url' => 'admin/blog/new',
'data' => [
'test-one' => 'content-one',
'test-two' => 'content-two',
],
],
]
Use the can
attribute if you want to conditionally show the menu item. This integrates with the 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. You can also use multiples can
entries with an array, see the second example:
[
[
'header' => 'BLOG',
'url' => 'admin/blog',
'can' => 'manage-blog',
],
[
'text' => 'Add new post',
'url' => 'admin/blog/new',
'can' => ['add-blog-post', 'other-right'],
],
]
It's possible to add a search input in your menu, using a menu item with the following configuration:
[
'search' => true,
'url' => 'test', // the form action
'method' => 'POST', // the form method
'input_name' => 'menu-search-input', // the input name
'text' => 'Search', // the input placeholder
],
If you need to use 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\Filters\FilterInterface;
use Laratrust\Laratrust;
class MyMenuFilter implements FilterInterface
{
public function transform($item)
{
if (isset($item['permission']) && ! Laratrust::isAbleTo($item['permission'])) {
$item['restricted'] = true;
}
return $item;
}
}
And then add configuration to the config/adminlte.php
file:
'filters' => [
JeroenNoten\LaravelAdminLte\Menu\Filters\ActiveFilter::class,
JeroenNoten\LaravelAdminLte\Menu\Filters\HrefFilter::class,
JeroenNoten\LaravelAdminLte\Menu\Filters\ClassesFilter::class,
// Comment next line out.
//JeroenNoten\LaravelAdminLte\Menu\Filters\GateFilter::class,
MyApp\MyMenuFilter::class,
]
It is also possible to configure the menu at runtime, e.g. in the boot of any service provider or from a controller. You can add new menu items at end of the menu, before or after a specific menu item and also inside a menu item as a submenu item. 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 menu will be simply concatenated and the order of the service providers will determine the order in the menu.
The available Menu Builder methods are:
-
add(...$newItems)
Adds one or multiple menu items to the sidebar menu or topnav menus (right, left or usermenu).
-
addAfter($itemKey, ...$newItems)
Adds one or multiple menu items after a specific menu item to the sidebar menu or topnav menus (right, left or usermenu).
-
addBefore($itemKey, ...$newItems)
Adds one or multiple menu items before a specific menu item to the sidebar menu or topnav menus (right, left or usermenu).
-
addIn($itemKey, ...$newItems)
Adds one or multiple menu items inside a specific menu item as sub menu item to the sidebar menu or topnav menus (right, left or usermenu).
-
remove($itemKey)
Removes one specific menu item.
-
itemKeyExists($itemKey)
Checks if a specific menu item exists, searched by the
key
attribute.
To configure the menu at runtime, just 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 for a menu item are the same explained previously.
Here is a more practical example that 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 the code that builds the menu runs only when the admin panel is actually displayed and not on every request.
Basic AddAfter
, AddBefore
& AddIn
Examples:
In this example we add a key
attribute to the pages menu item.
[
'key' => 'pages',
'text' => 'pages',
'url' => 'admin/pages',
'icon' => 'far fa-fw fa-file',
'label' => 4,
'label_color' => 'success',
],
Now we going to add the next menu items.
- Account Settings after Pages
- Notifications inside Account Settings
- Profile before Notifications
For this, we use the next code:
$events->listen(BuildingMenu::class, function (BuildingMenu $event) {
$event->menu->addAfter('pages', [
'key' => 'account_settings',
'header' => 'Account Settings',
]);
$event->menu->addIn('account_settings', [
'key' => 'account_settings_notifications',
'text' => 'Notifications',
'url' => 'account/edit/notifications',
]);
$event->menu->addBefore('account_settings_notifications', [
'key' => 'account_settings_profile',
'text' => 'Profile',
'url' => 'account/edit/profile',
]);
});
By default, a menu item is considered active if any of the following conditions 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 a 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]+$@']
]
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
: An array of menu filters.
The default set of menu filters is:
'filters' => [
JeroenNoten\LaravelAdminLte\Menu\Filters\HrefFilter::class,
JeroenNoten\LaravelAdminLte\Menu\Filters\SearchFilter::class,
JeroenNoten\LaravelAdminLte\Menu\Filters\ActiveFilter::class,
JeroenNoten\LaravelAdminLte\Menu\Filters\ClassesFilter::class,
JeroenNoten\LaravelAdminLte\Menu\Filters\GateFilter::class,
JeroenNoten\LaravelAdminLte\Menu\Filters\LangFilter::class,
JeroenNoten\LaravelAdminLte\Menu\Filters\DataFilter::class,
],
Lets you 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>
tags. The plugin active status and the files array (even empty) are all required attributes. The files, when added, need to have a type attribute (js
or css
), an asset attribute (true
or false
) and a location (string
). When asset is set to true
, the location will be output using the Laravel's asset()
function.
By default the DataTables, Select2, ChartJS, Pace and SweetAlert2 plugins are supported 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 inject their CDN files.
To inject a plugin using a blade section use the following code example:
@section('plugins.Datatables', true)
By default, you can use the next plugins:
Datatables
Select2
Chartjs
Sweetalert2
Pace
Also, you can add and configure new plugins modifying the plugin variable, using the example structure below:
'plugins' => [
'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, that contain arrays with file type (js
or css
), and a location
.
If the asset
value is true
, the injection will use the asset()
function.
You can change the Pace plugin theme, modifying the css file location when using the CDN injection.
'location' => '//cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/themes/{{color}}/pace-theme-{{theme}}.min.css',
- Available colors are: black, blue (default), green, orange, pink, purple, red, silver, white & yellow
- Available themes are: 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 are able to edit translations or add languages in the resources/lang/vendor/adminlte
folder.
The menu translations are enabled by default and allows you to use lang files for menu items translation.
First, we need to configure the menu. We add translation keys
to the text
and header
attributes. These are the currently supported menu attributes for translations.
This is an example of configuration:
[
'header' => 'account_settings_trans'
],
[
'text' => 'profile_trans',
'url' => 'admin/settings',
'icon' => 'user',
],
All the translation strings must be added in the menu.php
file of each language needed. You need to declare a key
for each one of the menu items translations.
The translations files are located at the resources/lang/vendor/adminlte/
folder
This is an example of the resources/lang/vendor/adminlte/en/menu.php
lang file for the previous sample of configuration:
return [
'account_settings_trans' => 'ACCOUNT SETTINGS',
'profile_trans' => 'Profile',
];
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 the resources/views/vendor/adminlte
folder.
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.
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.