Color Admin

“Laravel 13 Version” Documentation by “Sean Ngu” v6.0.0

Updated on: 25/August/2026
By: Sean Ngu

If you have any inquiries or require further assistance beyond what is covered in this help file, please do not hesitate to send us a message through Wrapbootstrap. We are more than happy to help.

Thank you very much!

Follow the following steps to install Laravel 13 in your local development environment.
You may refer to their official documentation for how to setup the development environment.
Setup Guide

<!-- run the following command --> 
cd /your-path-url/template_laravel
composer install
npm install
npm run plugins

<!-- 1st terminal / command prompt to run --> 
npm run dev           // vite listen to the scss files changes
npm run build         // build the scss files into css file

<!-- 2nd terminal / command prompt to run --> 
php artisan serve

<!-- browse the url --> 
http://127.0.0.1:8000/

Make sure PHP >= 8.0.0 & node.js has been installed on your localhost / server


Copy over the required image from global assets folder

<!-- copy the following folder-->
/admin/template/assets/img
 
<!-- paste it into laravel folder -->
/admin/template/template_laravel/public/assets/img

File structure overview for Laravel Version

template_laravel/
├── artisan
├── composer.json
├── package.json
├── phpunit.xml
├── readme.md
├── server.php
├── vite.config.js
├── plugins.js
├── app/
├── bootstrap/
├── config/
├── database/
├── public/
├── resources/
│   ├── lang
│   └── views
│       ├── includes
│       ├── layouts
│       └── pages
├── routes/
├── storage/
└── tests/

We split the header, sidebar, top menu, footer and etc into few other part and include it in the base file. Base file has been located in /resources/views/layouts/default.blade.php.

@include('includes.component.page-loader')

<div id="app" class="app app-sidebar-fixed {{ $appClass }}">
  
  @includeWhen(!$appHeaderHide, 'includes.header')
  
  @includeWhen($appTopMenu, 'includes.top-menu')
  
  @includeWhen(!$appSidebarHide, 'includes.sidebar')
  
  @includeWhen($appSidebarTwo, 'includes.sidebar-right')
  
  <div id="content" class="app-content {{ $appContentClass }}">
    @yield('content')
  </div>
  
  @include('includes.component.theme-panel')
  
  @include('includes.component.scroll-top-btn')
  
</div>

@yield('outside-content')

@include('includes.page-js')

Page head contains metadata, javascript and css files:

<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
  <meta charset="utf-8" />
  <title>Color Admin | @yield('title')</title>
  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" 
    name="viewport" />
  <meta content="" name="description" />
  <meta content="" name="author" />

  <!-- ================== BEGIN BASE CSS STYLE ================== -->
  <link href="/assets/plugins/animate.css/animate.min.css" rel="stylesheet" />
  <link href="/assets/plugins/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet" />
  <link href="/assets/plugins/jquery-ui-dist/jquery-ui.min.css" rel="stylesheet" />
  <link href="/assets/plugins/pace-js/themes/black/pace-theme-flash.css" rel="stylesheet" />
  <link href="/assets/plugins/perfect-scrollbar/css/perfect-scrollbar.css" rel="stylesheet" />
  @vite(['resources/scss/default/styles.scss'])
  <!-- ================== END BASE CSS STYLE ================== -->

  @stack('css')
</head>
@php
  $bodyClass = (!empty($appBoxedLayout)) ? 'boxed-layout ' : '';
  $bodyClass .= (!empty($paceTop)) ? 'pace-top ' : $bodyClass;
  $bodyClass .= (!empty($bodyClass)) ? $bodyClass . ' ' : $bodyClass;
  $appSidebarHide = (!empty($appSidebarHide)) ? $appSidebarHide : '';
  $appHeaderHide = (!empty($appHeaderHide)) ? $appHeaderHide : '';
  $appSidebarTwo = (!empty($appSidebarTwo)) ? $appSidebarTwo : '';
  $appSidebarSearch = (!empty($appSidebarSearch)) ? $appSidebarSearch : '';
  $appTopMenu = (!empty($appTopMenu)) ? $appTopMenu : '';
  
  $appClass = (!empty($appClass)) ? $appClass .' ' : '';
  $appClass .= (!empty($appTopMenu)) ? 'app-with-top-menu ' : '';
  $appClass .= (!empty($appHeaderHide)) ? 'app-without-header ' : ' app-header-fixed ';
  $appClass .= (!empty($appSidebarEnd)) ? 'app-with-end-sidebar ' : '';
  $appClass .= (!empty($appSidebarWide)) ? 'app-with-wide-sidebar ' : '';
  $appClass .= (!empty($appSidebarHide)) ? 'app-without-sidebar ' : '';
  $appClass .= (!empty($appSidebarMinified)) ? 'app-sidebar-minified ' : '';
  $appClass .= (!empty($appSidebarTwo)) ? 'app-with-two-sidebar app-sidebar-end-toggled ' : '';
  $appClass .= (!empty($appContentFullHeight)) ? 'app-content-full-height ' : '';
  
  $appContentClass = (!empty($appContentClass)) ? $appContentClass : '';
@endphp
<body class="{{ $bodyClass }}">
@php
  $appHeaderAttr = (!empty($appHeaderInverse)) ? ' data-bs-theme=dark' : '';
  $appHeaderMenu = (!empty($appHeaderMenu)) ? $appHeaderMenu : '';
  $appHeaderMegaMenu = (!empty($appHeaderMegaMenu)) ? $appHeaderMegaMenu : ''; 
  $appHeaderTopMenu = (!empty($appHeaderTopMenu)) ? $appHeaderTopMenu : '';
@endphp

<!-- BEGIN #appHeader -->
<div id="appHeader" class="app-header"{{ $appHeaderAttr }}>
  <!-- BEGIN brand -->
  <div class="brand">
    @if ($appSidebarTwo)
    <button type="button" class="menu-toggler" data-toggle="app-sidebar-end-mobile">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    @endif
    <a href="/" class="brand-logo"><span class="brand-icon"></span> <b>Color</b> Admin</a>
    @if ($appHeaderMegaMenu && !$appSidebarTwo)
    <button type="button" class="menu-toggler" data-bs-toggle="collapse" data-bs-target="#top-navbar">
      <span class="fa-stack fa-lg">
        <i class="far fa-square fa-stack-2x"></i>
        <i class="fa fa-cog fa-stack-1x mt-1px"></i>
      </span>
    </button>
    @endif
    @if($appTopMenu && !$appSidebarHide && !$appSidebarTwo)
    <button type="button" class="menu-toggler" data-toggle="app-top-menu-mobile">
      <span class="fa-stack fa-lg">
        <i class="far fa-square fa-stack-2x"></i>
        <i class="fa fa-cog fa-stack-1x mt-1px"></i>
      </span>
    </button>
    @endif
    @if($appTopMenu && $appSidebarHide && !$appSidebarTwo)
    <button type="button" class="menu-toggler" data-toggle="app-top-menu-mobile">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    @endif
    @if (!$appSidebarHide)
    <button type="button" class="menu-toggler" data-toggle-class="app-sidebar-mobile-toggled" data-toggle-target=".app">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    @endif
  </div>
  
  @includeWhen($appHeaderMegaMenu, 'includes.component.header-mega-menu')
  
  <!-- BEGIN header-nav -->
  <div class="menu">
    <div class="menu-item menu-item-form">
      <form action="" method="POST" name="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Enter keyword" />
          <button type="submit" class="btn btn-search"><i class="fa fa-search"></i></button>
        </div>
      </form>
    </div>
    <div class="menu-item dropdown">
      <a href="#" data-bs-toggle="dropdown" class="menu-link dropdown-toggle icon">
        <i class="fa fa-bell"></i>
        <span class="badge">5</span>
      </a>
      @include('includes.component.header-dropdown-notification')
    </div>
    
    @isset($appHeaderLanguageBar)
      @include('includes.component.header-language-bar')
    @endisset
    
    <div class="menu-item menu-profile dropdown">
      <a href="#" class="menu-link dropdown-toggle d-flex align-items-center" data-bs-toggle="dropdown">
        <img src="/assets/img/user/user-13.jpg" alt="" /> 
        <span>
          <span class="d-none d-md-inline">Adam Schwartz</span>
          <b class="caret"></b>
        </span>
      </a>
      @include('includes.component.header-dropdown-profile')
    </div>
    
    @if($appSidebarTwo)
    <div class="navbar-divider d-none d-md-block"></div>
    <div class="menu-item d-none d-md-block">
      <a href="javascript:;" data-toggle="app-sidebar-end" class="menu-link icon">
        <i class="fa fa-th"></i>
      </a>
    </div>
    @endif
  </div>
  <!-- END header-nav -->
</div>
<!-- END #appHeader -->
@php
  $appSidebarClass = (!empty($appSidebarTransparent)) ? 'app-sidebar-transparent' : '';
  $appSidebarAttr  = (!empty($appSidebarLight)) ? '' : ' data-bs-theme=dark';
@endphp
<!-- BEGIN #sidebar -->
<div id="sidebar" class="app-sidebar {{ $appSidebarClass }}" {{ $appSidebarAttr }}>
  <!-- BEGIN scrollbar -->
  <div class="app-sidebar-content" data-scrollbar="true" data-height="100%">
    <div class="menu">
      @if (!$appSidebarSearch)
        ...
      @endif
      
      @if ($appSidebarSearch)
        ...
      @endif
      
      <div class="menu-header">Navigation</div>
      @php
        $currentUrl = (Request::path() != '/') ? '/'. Request::path() : '/';
        
        foreach (config('sidebar.menu') as $key => $menu) {
          ...
        }
      @endphp
      
      <!-- BEGIN minify-button -->
      <div class="menu-item d-flex">
        <a href="javascript:;" class="app-sidebar-minify-btn ms-auto" data-toggle="app-sidebar-minify"><i class="fa fa-angle-double-left"></i></a>
      </div>
      <!-- END minify-button -->
    </div>
    <!-- END menu -->
  </div>
  <!-- END scrollbar -->
</div>
<div class="app-sidebar-bg" data-bs-theme="dark"></div>
<div class="app-sidebar-mobile-backdrop">
  <a href="#" data-dismiss="app-sidebar-mobile" class="stretched-link"></a>
</div>
<!-- END #sidebar -->

Content block display the data from the single page

<div id="content" class="app-content {{ $appContentClass }}">
  @yield('content')
</div>

Javascript files loaded in the end of page. This will reduce page load time.

  <!-- ================== BEGIN core-js ================== -->
  <script src="/assets/plugins/pace-js/pace.min.js"></script>
  <script src="/assets/plugins/jquery/dist/jquery.min.js"></script>
  <script src="/assets/plugins/jquery-ui-dist/jquery-ui.min.js"></script>
  <script src="/assets/plugins/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
  <script src="/assets/plugins/perfect-scrollbar/dist/perfect-scrollbar.min.js"></script>
  <script src="/assets/plugins/js-cookie/dist/js.cookie.js"></script>
  @vite(['resources/js/app.js'])
  <!-- ================== END core-js ================== -->

  @stack('scripts')
</body>
</html>

Here is the general option for the each case of page options. You may set the option in your view file.

Option List

@extends('layouts.default', [
  'bodyClass' = > '',
  'appClass' = > '',
  'appTopMenu' => true,
  'appSidebarEnd' => true,
  'appSidebarLight' => true,
  'appSidebarWide' => true,
  'appSidebarHide' => true,
  'appSidebarTransparent' => true,
  'appSidebarMinified' => true,
  'appSidebarTwo' => true,,
  'appSidebarSearch' => true,
  'appContentClass' => '',
  'appContentFullHeight' => true
])

Add the data-bs-theme="dark" attribute to <html> for template_laravel/resources/views/layouts/default.blade.php in order to enable the dark mode.

If you have pre-select the dark-mode option in theme panel, do not forget to clear the browser cookie or remove the theme panel so that it won't affect the dark-mode class while page load.
<html lang="{{ app()->getLocale() }}" data-bs-theme="dark">

Add the dir="rtl" attribute to <html> for /resources/views/layouts/default.blade.php in order to enable Right-To-Left (RTL) layout direction.

<html lang="{{ app()->getLocale() }}" dir="rtl">

This will flip the layout direction of the entire page to support RTL languages like Arabic, Hebrew, or Persian.

To switch the Laravel theme, update the SCSS entry in both template_laravel/vite.config.js and template_laravel/resources/views/layouts/default.blade.php. Keep the theme name the same in both files, then restart the Vite development server or rebuild the assets.

Apple Design

  1. Update the theme entry in template_laravel/vite.config.js and template_laravel/resources/views/layouts/default.blade.php.
    <!-- vite.config.js -->
    'resources/scss/apple/styles.scss',
    
    <!-- resources/views/layouts/default.blade.php -->
    @vite(['resources/scss/apple/styles.scss'])
    
  2. No additional icon script is required for the current Iconify-based components.
    <!-- No additional icon script is required. -->
    
  3. The current component uses Iconify icons, so no additional icon-library change is required.
    <div class="menu-icon">
      <iconify-icon icon="solar:pulse-bold-duotone"></iconify-icon>
    </div>
    

Facebook Design

  1. Update the theme entry in template_laravel/vite.config.js and template_laravel/resources/views/layouts/default.blade.php.
    <!-- vite.config.js -->
    'resources/scss/facebook/styles.scss',
    
    <!-- resources/views/layouts/default.blade.php -->
    @vite(['resources/scss/facebook/styles.scss'])
    
  2. Keep the existing .app-header markup; the Facebook stylesheet supplies the theme-specific header styling.
    <div id="appHeader" class="app-header">
      ...
    </div>
    

Transparent Design

  1. Update the theme entry in template_laravel/vite.config.js and template_laravel/resources/views/layouts/default.blade.php.
    <!-- vite.config.js -->
    'resources/scss/transparent/styles.scss',
    
    <!-- resources/views/layouts/default.blade.php -->
    @vite(['resources/scss/transparent/styles.scss'])
    
  2. Add the .app-cover next to the <body> tag in template_laravel/resources/views/layouts/default.blade.php.
    <body>
      <!-- BEGIN page-cover -->
      <div class="app-cover"></div>
      <!-- END page-cover -->
      
      ...
    </body>
    

Google Design

  1. Update the theme entry in template_laravel/vite.config.js and template_laravel/resources/views/layouts/default.blade.php.
    <!-- vite.config.js -->
    'resources/scss/google/styles.scss',
    
    <!-- resources/views/layouts/default.blade.php -->
    @vite(['resources/scss/google/styles.scss'])
    
  2. The current component uses Iconify icons, so no additional icon-library change is required.
    <div class="menu-icon">
      <iconify-icon icon="solar:home-2-bold-duotone"></iconify-icon>
    </div>
    
  3. Add the class .app-with-wide-sidebar to the .app container in template_laravel/resources/views/layouts/default.blade.php.
    <div id="app" class="app app-header-fixed app-sidebar-fixed app-with-wide-sidebar">
      ...
    </div>
    
  4. Add the navbar desktop toggler to the .app-header in template_laravel/resources/views/includes/header.blade.php.
    <!-- BEGIN #appHeader -->
    <div id="appHeader" class="app-header">
      <!-- BEGIN brand -->
      <div class="brand">
        <button type="button" class="menu-toggler" data-toggle-class="app-sidebar-minified" data-toggle-target=".app">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <button type="button" class="menu-toggler" data-toggle-class="app-sidebar-mobile-toggled" data-toggle-target=".app">
          ...
        </button>
        <a href="index.html" class="brand-logo">
          Color Admin
        </a>
      </div>
      <!-- END brand -->
      ...
    </div>
    

Material Design

  1. Update the theme entry in template_laravel/vite.config.js and template_laravel/resources/views/layouts/default.blade.php.
    <!-- vite.config.js -->
    'resources/scss/material/styles.scss',
    
    <!-- resources/views/layouts/default.blade.php -->
    @vite(['resources/scss/material/styles.scss'])
    
  2. The current component uses Iconify icons, so no additional icon-library change is required.
    <div class="menu-icon">
      <iconify-icon icon="solar:home-2-bold-duotone"></iconify-icon>
    </div>
    
  3. Add the class .app-with-wide-sidebar to the .app container in template_laravel/resources/views/includes/sidebar.blade.php.
    <div id="app" class="app app-header-fixed app-sidebar-fixed app-with-wide-sidebar">
      ...
    </div>
    
  4. Add the navbar desktop toggler to the .app-header in template_laravel/resources/views/includes/header.blade.php.
    <!-- BEGIN #appHeader -->
    <div id="appHeader" class="app-header">
      <!-- BEGIN brand -->
      <div class="brand">
        <button type="button" class="menu-toggler" data-toggle-class="app-sidebar-minified" data-toggle-target=".app">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <button type="button" class="menu-toggler" data-toggle-class="app-sidebar-mobile-toggled" data-toggle-target=".app">
          ...
        </button>
        <a href="index.html" class="brand-logo">
          Color Admin Material
        </a>
      </div>
      <!-- END brand -->
      ...
    </div>
    
  5. Customize the existing header search form in template_laravel/resources/views/includes/header.blade.php. Do not add a second search form.
    <!-- BEGIN #appHeader -->
    <div id="appHeader" class="app-header">
      <!-- BEGIN header-nav -->
      <div class="menu">
        <div class="menu-item">
          <a href="#" class="menu-link icon">
            <i class="material-icons">search</i>
          </a>
          
          <!-- EXISTING SEARCH FORM -->
          <div class="menu-item menu-item-form">
            ...
          </div>
        </div>
        ...
      </div>
      <!-- END header-nav -->
      
      <div class="menu-item-form">
        <button class="search-btn" type="submit"><i class="material-icons">search</i></button>
        <input type="text" class="form-control" placeholder="Search Something..." />
        <a href="#" class="close">
          <i class="material-icons">close</i>
        </a>
      </div>
    </div>
    
  6. Change the .app-loader in template_laravel/resources/views/includes/component/page-loader.blade.php.
    <!-- BEGIN #loader -->
    <div id="loader" class="app-loader">
      <div class="material-loader">
        <svg class="circular" viewBox="25 25 50 50">
          <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"></circle>
        </svg>
        <div class="message">Loading...</div>
      </div>
    </div>
    <!-- END #loader -->
    

Laravel version now is fully scss configured. You may switch the Color Admin theme by changing the variable name in vite.config.js.

const theme = 'default';
 
<!-- theme option -->
const theme = 'apple';
const theme = 'facebook';
const theme = 'google';
const theme = 'material';
const theme = 'transparent';

Below is the list of package that has been installed in this project. You may use the following example to find the package from their official website. https://www.npmjs.com/package/Vite

{
  "private": true,
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "plugins": "node plugins.js"
  },
  "devDependencies": {
    "axios": "^1.10.0",
    "fs-extra": "^11.3.0",
    "husky": "^9.1.7",
    "laravel-vite-plugin": "^3.1.3",
    "lodash": "^4.17.21",
    "postcss": "^8.5.6",
    "resolve-url-loader": "^5.0.0",
    "sass": "1.77.7",
    "sass-loader": "^16.0.5",
    "vite": "^8.2.0",
    "vue": "^3.5.40",
    "webpack": "^5.99.9"
  },
  "dependencies": {
    "@fortawesome/fontawesome-free": "^7.3.1",
    "@fullcalendar/bootstrap": "^6.1.21",
    "@fullcalendar/core": "^6.1.21",
    "@fullcalendar/daygrid": "^6.1.21",
    "@fullcalendar/interaction": "^6.1.21",
    "@fullcalendar/list": "^6.1.21",
    "@fullcalendar/timegrid": "^6.1.21",
    "@highlightjs/cdn-assets": "^11.11.1",
    "abpetkov-powerange": "github:npmcomponent/abpetkov-powerange",
    "angular": "^1.8.3",
    "angular-ui-bootstrap": "^2.5.6",
    "angular-ui-router": "^1.0.30",
    "animate.css": "^4.1.1",
    "apexcharts": "6.6",
    "blueimp-file-upload": "^10.32.0",
    "blueimp-gallery": "^3.4.0",
    "bootstrap": "^5.3.8",
    "bootstrap-datepicker": "^1.10.0",
    "bootstrap-daterangepicker": "^3.1.0",
    "bootstrap-datetime-picker": "^2.4.4",
    "bootstrap-icons": "^1.13.1",
    "bootstrap-social": "^5.1.1",
    "bootstrap-timepicker": "^0.5.2",
    "bootstrap3-wysihtml5-bower": "^0.3.3",
    "chart.js": "^4.5.0",
    "clipboard": "^2.0.11",
    "d3": "^3.5.17",
    "datatables.net": "^2.3.2",
    "datatables.net-autofill": "^2.7.0",
    "datatables.net-autofill-bs5": "^2.7.0",
    "datatables.net-bs5": "^2.3.2",
    "datatables.net-buttons": "^3.2.4",
    "datatables.net-buttons-bs5": "^3.2.4",
    "datatables.net-colreorder": "^2.1.1",
    "datatables.net-colreorder-bs5": "^2.1.1",
    "datatables.net-fixedcolumns": "^5.0.4",
    "datatables.net-fixedcolumns-bs5": "^5.0.4",
    "datatables.net-fixedheader": "^4.0.3",
    "datatables.net-fixedheader-bs5": "^4.0.3",
    "datatables.net-keytable": "^2.12.1",
    "datatables.net-keytable-bs5": "^2.12.1",
    "datatables.net-responsive": "^3.0.5",
    "datatables.net-responsive-bs5": "^3.0.5",
    "datatables.net-rowreorder": "^1.5.0",
    "datatables.net-rowreorder-bs5": "^1.5.0",
    "datatables.net-scroller": "^2.4.3",
    "datatables.net-scroller-bs5": "^2.4.3",
    "datatables.net-select": "^3.0.1",
    "datatables.net-select-bs5": "^3.0.1",
    "datepickk": "^1.4.1",
    "dropzone": "^5.9.3",
    "flag-icons": "^7.5.0",
    "flot": "^4.2.6",
    "gritter": "^1.7.4",
    "intro.js": "^7.2.0",
    "ion-rangeslider": "^2.3.1",
    "ionicons": "^7.4.0",
    "isotope-layout": "^3.0.6",
    "jquery": "^3.7.1",
    "jquery-knob": "^1.2.11",
    "jquery-migrate": "^3.5.2",
    "jquery-mockjax": "^2.6.1",
    "jquery-sparkline": "^2.4.0",
    "jquery-ui-dist": "^1.13.3",
    "jquery.maskedinput": "^1.4.1",
    "js-cookie": "^3.0.5",
    "jstree": "^3.3.17",
    "jszip": "^3.10.1",
    "jvectormap-content": "^0.1.0",
    "jvectormap-next": "^3.1.1",
    "kbw-countdown": "^2.1.1",
    "lightbox2": "^2.11.5",
    "lity": "^2.4.1",
    "masonry-layout": "^4.2.2",
    "moment": "^2.30.1",
    "nvd3": "^1.8.6",
    "oclazyload": "^1.1.0",
    "pace-js": "^1.2.4",
    "parsleyjs": "^2.9.2",
    "pdfmake": "^0.2.20",
    "perfect-scrollbar": "^1.5.6",
    "photoswipe": "^5.4.4",
    "quill": "^2.0.3",
    "raphael": "^2.3.0",
    "select-picker": "^0.3.2",
    "select2": "^4.0.13",
    "simple-line-icons": "^2.5.5",
    "spectrum-colorpicker2": "^2.0.10",
    "summernote": "^0.9.1",
    "sweetalert": "^2.1.2",
    "swiper": "^11.2.10",
    "switchery": "github:abpetkov/switchery",
    "tag-it": "^2.0.0",
    "x-editable-bs4": "^1.5.6"
  }
}