General Configuration

These settings allow you to customize the features, layout, branding, and appearance of your admin panel.

The general settings are managed in the config/ladmin/main.php file. If this file does not exist, you can publish it by running the following command in the root folder of your Laravel application:

bash

php artisan vendor:publish --tag="ladmin-config"

Basic Information

The basic section allows you to define essential metadata for your admin panel. This information is primarily used in the footer (by default) and potentially in other components such as "About" modals or system metadata sections.

Quick Config Example

php

'basic' => [
    'company' => 'Acme Inc.',
    'company_url' => 'https://acme.example',
    'start_year' => 2024,
    'version' => '2.1.0',
]

company:

Type: string
Example: 'company' => 'Acme Inc.'

The name of the company or organization that owns and develops the Laravel admin panel. Displayed in the footer or anywhere a company reference is needed.

company_url:

Type: string (URL)
Example: 'company_url' => 'https://acme.example'

The link to the company website. It is typically shown next to or below the company name. Useful for users to quickly navigate to the company's homepage from the panel UI.

start_year:

Type: int | string
Example: 'start_year' => 2024

version:

Type: string
Example: 'version' => '2.1.0'

The current version number of your admin panel. Displayed in the footer or a custom "About" section. It helps administrators know what version is deployed.

Favicons

This configuration block defines how your application declares and serves favicon assets (those small icons displayed in browser tabs, bookmarks, home screen shortcuts, and other interfaces). Please, note that this configuration does not generate any favicon files; it only helps produce the appropriate HTML markup to reference the favicon files you’ve already prepared.

Example 1: Setup Minimal Favicon Support

Favicons ConfigGenerated HTML

php

'favicons' => [
    'full_support' => false,
    'brand_logo_color' => '#6f42c1', // Still present, but ignored
    'brand_background_color' => '#ffffff', // Ignored too
    'png_sizes' => ['16x16', '32x32', '96x96'], // Ignored too
],

html

<!-- Standard favicon (fallback for older browsers) -->
<link rel="icon" type="image/x-icon" href="{asset_url}/favicons/favicon.ico">

Example 2: Setup Full Favicon Support

Favivons ConfigGenerated HTML

php

'favicons' => [
    'full_support' => true,
    'brand_logo_color' => '#6f42c1',
    'brand_background_color' => '#ffffff',
    'png_sizes' => ['16x16', '32x32', '96x96'],
],

html

<!-- Standard favicon (fallback for older browsers) -->
<link rel="icon" type="image/x-icon" href="{asset_url}/favicons/favicon.ico">

<!-- PNG icons (most modern browsers) -->
<link rel="icon" type="image/png" sizes="16x16" href="{asset_url}/favicons/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="{asset_url}/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="{asset_url}/favicons/favicon-96x96.png">

<!-- Apple Touch Icon (iOS, Safari) -->
<link rel="apple-touch-icon" sizes="180x180" href="{asset_url}/favicons/apple-touch-icon.png">

<!-- Web App Manifest -->
<link rel="manifest" href="{asset_url}/favicons/site.webmanifest">

<!-- Safari pinned tab icon (macOS) -->
<link rel="mask-icon" href="{asset_url}/favicons/safari-pinned-tab.svg" color="#6f42c1">

<!-- Windows tiles -->
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="{asset_url}/favicons/mstile-144x144.png">

<!-- Mobile browser address bar color -->
<meta name="theme-color" content="#ffffff">

INFO: About {asset_url} Placeholder

The {asset_url} placeholder in the examples represents the base URL used for serving assets in your Laravel application. It corresponds to the value returned by Laravel’s asset() helper, which uses the ASSET_URL environment variable if defined, or falls back to APP_URL by default. All asset paths typically resolve to files stored in the public directory.

Here’s an example of how your public/favicons directory (or the directory resolved by {asset_url}) should be structured when full_support is enabled:

bash

public/favicons/
├── apple-touch-icon.png            # iOS home screen icon (180x180)
├── favicon-16x16.png               # Standard favicon (16x16)
├── favicon-32x32.png               # Standard favicon (32x32)
├── favicon.ico                     # Legacy favicon (ICO format)
├── mstile-144x144.png              # Windows tile icon (144x144)
├── safari-pinned-tab.svg           # Safari pinned tab icon (SVG)
└── site.webmanifest                # Web App Manifest for PWA support

WARNING: Favicons Storing Folder

To ensure this configuration works correctly, all favicon files must be placed in the public/favicons directory (or in the favicons folder of the corresponding path resolved by your ASSET_URL setting). Additionally, make sure each file follows the expected naming convention, such as favicon-32x32.png, to match the declared sizes in the configuration.

full_support:

Type: bool
Example: 'full_support' => true

Determines whether your application should output a full set of <link> and <meta> tags to maximize favicon and branding support across multiple platforms (iOS, Android Chrome, Windows tiles, Safari pinned tabs, etc.).

When set to true, the configuration will generate all recommended tags for broad compatibility, leveraging the other favicon options you configure. When set to false, only a minimal favicon declaration will be included:

html

<link rel="icon" type="image/x-icon" href="{asset_url}/favicons/favicon.ico">

Use true for best cross-platform appearance, or false if you only need basic favicon support.

brand_logo_color:

Type: string (any HTML color)
Example: 'brand_logo_color' => '#6f42c1'

Defines the foreground color of your app's logo. Used in some environments like Android's maskable icons or Safari pinned tabs. Use a color that provides strong contrast with the background and is visually consistent with your branding.

brand_background_color:

Type: string (any HTML color)
Example: 'brand_background_color' => '#ffffff'

Specifies the background color used in various contexts, including:

Windows 10 live tiles (msapplication-TileColor)
Android Chrome theme color (theme-color)
iOS launch screen backgrounds

Choose a color that complements your logo and maintains readability.

png_sizes:

Type: array<string>
Example: 'png_sizes' => ['16x16', '32x32', '96x96']

An array listing the favicon image sizes (in pixels) that you have included in the favicons directory. These will be automatically referenced in the markup like:

html

<link rel="icon" type="image/png" sizes="32x32" href="{asset_url}/favicons/favicon-32x32.png">

These sizes ensure compatibility with various browser requirements.

TIP: Favicons Generator Tools

To easily generate a complete set of favicon files from your brand logo, use online tools such as favicon.io or RealFaviconGenerator. These services create all the recommended favicon formats and sizes for modern browsers and platforms. After generating the files, download and place them in your public/favicons (or {asset_url/favicons}) directory as described above.

Brand Logo

The logo section allows you to configure the brand logo displayed in the admin panel. The logo appears in the top-left corner of the layout and helps visually identify your panel or application.

Quick Config Example

php

'logo' => [
    'image' => 'vendor/ladmin/img/LaradminLTE.png',
    'image_alt' => 'LaradminLTE Logo',
    'image_classes' => ['rounded-circle', 'shadow'],
    'text' => 'LaradminLTE',
    'text_classes' => ['fw-bold'],
    'url' => '/home',
]

image:

Type: string (path | URL)
Example: 'image' => 'vendor/ladmin/img/LaradminLTE.png'

The path or URL to the logo image file. You can use a relative path (from the public/ directory) or an absolute URL. This image is used as the main brand icon in the admin panel header.

image_alt:

Type: string
Example: 'image_alt' => 'LaradminLTE Logo'

Alternative text for the logo image, which improves accessibility and SEO (Search Engine Optimization). It's displayed when the image cannot be loaded and is also used by screen readers.

image_classes:

Type: array<string>
Example: 'image_classes' => ['rounded-circle', 'shadow']

An array of CSS utility classes (e.g., from Bootstrap or custom styles) that are applied to the logo image element. These allow you to visually style the image with effects such as borders, shadows, or rounded corners.

text:

Type: string
Example: 'text' => 'LaradminLTE'

The textual portion of the brand logo, displayed next to the image. This is helpful for adding your application name or a short label to the header.

text_classes:

Type: array<string>
Example: 'text_classes' => ['fw-bold']

An array of CSS utility classes applied to the logo text. This lets you control its typography and visual presentation, such as font weight, color, spacing, etc.

url:

Type: string (path | URL)
Example: 'url' => '/home'

The URL path or absolute URL where users will be directed when they click on the logo. This is typically set to the dashboard or homepage of your admin panel, providing a quick way for users to return to the main interface. You can use the '#' placeholder to disable the link if you don't want the logo to be clickable.

Layout

The layout section lets you customize the overall structure and appearance of your admin panel. These options affect the positioning of interface components like the header, sidebar, and footer, and support both light and dark themes.

Quick Config Example

php

'layout' => [
    'bootstrap_theme' => 'light',
    'compact_mode' => false,
    'fixed_footer' => false,
    'fixed_navbar' => true,
    'fixed_sidebar' => true,
    'rtl' => false,
]

bootstrap_theme:

Type: string ('light' | 'dark')
Example: 'bootstrap_theme' => 'light'

Defines the visual theme used by Bootstrap across the panel. Choose between 'light' for a bright interface or 'dark' for a darker appearance, depending on your brand or user preference.

compact_mode:

Type: bool
Example: 'compact_mode' => false

When enabled (true), the layout will use a more compact spacing and sizing for elements like the navbar and sidebar. This is ideal for users who prefer a denser interface or have limited screen space. When set to false, the layout will have more generous spacing for a more open and airy feel.

Type: bool
Example: 'fixed_footer' => false

Controls whether the footer stays fixed at the bottom of the viewport as the user scrolls. Useful for keeping persistent actions or status indicators visible.

Type: bool
Example: 'fixed_navbar' => true

Determines if the top navigation bar remains fixed at the top while scrolling. This helps maintain access to navigation or user actions at all times.

Type: bool
Example: 'fixed_sidebar' => true

Enables a fixed sidebar that stays in place while the main content scrolls. A fixed sidebar is useful for dashboards or admin panels with extensive navigation.

rtl:

Type: bool
Example: 'rtl' => false

Enables support for right-to-left (RTL) layouts. Useful for languages like Arabic, Hebrew, or Persian. When set to true, the layout direction is reversed to suit RTL writing systems.

The navbar section allows you to customize the appearance of the top navigation bar in your admin panel. You can use this to control its styling using Bootstrap utility classes or your own custom classes.

Quick Config Example

php

'navbar' => [
    'classes' => ['bg-body'],
]

classes:

Type: array<string>
Example: 'classes' => ['bg-body']

An array of CSS classes applied to the <nav> element of the top navbar. These classes typically define background color, text color, borders, spacing, or other visual properties. For example, you might use bg-primary-subtle and navbar-light to get a light blue navbar.

TIP: Try AdminLTE v4 Theme Tool

You can experiment with different navbar styles using the AdminLTE v4 Theme Tool. This interactive tool lets you preview and select Bootstrap classes for your navbar, making it easy to customize the appearance before applying the classes to your configuration.

The sidebar section provides full control over the behavior and appearance of the sidebar navigation in your admin panel. You can configure visual styles, layout responsiveness, collapsibility, and interactive features like accordion menus and mini-sidebar mode.

Quick Config Example

php

'sidebar' => [
    'accordion' => false,
    'bootstrap_theme' => 'dark',
    'classes' => ['bg-body-secondary', 'shadow'],
    'default_collapsed' => false,
    'expand_breakpoint' => 'lg',
    'mini_sidebar' => true,
    'treeview_animation_speed' => 300,
]

accordion:

Type: bool
Example: 'accordion' => false

When enabled (true), opening one sidebar submenu will automatically collapse any other open submenus. Useful for reducing clutter in navigation-heavy panels.

bootstrap_theme:

Type: string ('light' | 'dark') | null
Example: 'bootstrap_theme' => 'dark'

Sets the visual theme of the sidebar independently from the global layout. Use 'light' or 'dark' to apply a specific Bootstrap theme, or null to inherit from the layout’s theme setting.

classes:

Type: array<string>
Example: 'classes' => ['bg-body-secondary', 'shadow']

An array of CSS classes applied to the sidebar container. These control visual styling such as background color and shadows using Bootstrap utility classes or custom styles. AdminLTE v4 offers us some built-in classes that can be used here, such as:

nav-indent: Adds indentation to submenu items for better visual hierarchy.
nav-compact: Reduces padding and margins for a more compact sidebar design.

TIP: Try AdminLTE v4 Theme Tool

You can experiment with different sidebar styles using the AdminLTE v4 Theme Tool. This interactive tool lets you preview and select Bootstrap classes for your sidebar, making it easy to customize the appearance before applying the classes to your configuration.

default_collapsed:

Type: bool
Example: 'default_collapsed' => false

If set to true, the sidebar will be collapsed by default when the page loads. This is useful for saving screen space, especially on smaller devices or in minimalist UIs.

expand_breakpoint:

Type: string ('sm' | 'md' | 'lg' | 'xl' | 'xxl')
Example: 'expand_breakpoint' => 'lg'

Determines the Bootstrap breakpoint at which the sidebar automatically expands or collapses. Below the specified size, the sidebar may be hidden or minimized for responsive behavior.

Type: bool
Example: 'mini_sidebar' => true

Enables a compact mini sidebar mode when the sidebar is manually collapsed. Instead of hiding completely, the sidebar shrinks to show only icons. A useful feature for experienced users familiar with the menu structure.

treeview_animation_speed:

Type: int (> 0)
Example: 'treeview_animation_speed' => 300

Specifies the duration (in milliseconds) of the expand/collapse animation for sidebar treeview menus. Adjust this value to control how quickly submenu items appear or disappear when toggling treeview sections. Higher values result in slower, smoother transitions, while lower values make the animation faster.

The footer section allows you to customize the appearance of the bottom footer in your admin panel. This typically includes background styling, shadows, or spacing using Bootstrap utility classes.

Quick Config Example

php

'footer' => [
    'classes' => ['bg-body'],
]

classes:

Type: array<string>
Example: 'classes' => ['bg-body']

An array of CSS classes applied to the <footer> element. You can use Bootstrap utility classes or custom styles to define background color, borders, or other visual features of the footer.

TIP: Try AdminLTE v4 Theme Tool

You can experiment with different footer styles using the AdminLTE v4 Theme Tool. This interactive tool lets you preview and select Bootstrap classes for your footer, making it easy to customize the appearance before applying the classes to your configuration.

Main Content

The main content section controls the styling of the central content area where most pages, widgets, and dashboards are rendered.

Quick Config Example

php

'main_content' => [
    'classes' => ['bg-body-tertiary'],
]

classes:

Type: array<string>
Example: 'classes' => ['bg-body-tertiary']

A list of CSS classes applied to the main content container. These classes affect the background color and general styling of the page body. Useful for aligning your content area with your overall design theme.

The menu translations section allows you to enable and configure the localization system for menu items. When enabled, some attributes in the menu items (like the label and badge) will be translated automatically using Laravel's translation features, supporting both PHP array and JSON-based translations. This helps create multilingual admin panels more easily.

Quick Config Example

php

'menu_translations' => [
    'enabled' => true,
    'php_file' => 'ladmin_menu',
]

For usage details, review the Menu > Translations section.

enabled:

Type: bool
Example: 'enabled' => true

Specifies whether to enable automatic translation of menu item attributes such as label and badge. When set to true, these attributes will be passed through Laravel’s translation utilities, allowing your menu to support multiple languages. If set to false, the original values will be displayed without translation.

php_file:

Type: string
Example: 'php_file' => 'ladmin_menu'

Specifies the name of the PHP language file used for translating menu items properties defined with short keys. When a menu item's label or badge is set to a short key (for example, 'dashboard'), it will be resolved as '{php_file}.dashboard' using the translations defined in that file. This option is only relevant when the value is not a full translation string and you prefer to use Laravel’s PHP array translation files instead of JSON-based translations.

Vite Support

The vite section allows you to enable the support for Assets Bundling with Vite. Vite is a modern frontend build tool that provides fast and efficient development and production builds for your CSS and JavaScript assets. Enabling this option will automatically include the necessary Vite directives in your admin panel layout, allowing you to manage your assets using Vite's powerful features. If you are not familiarized with Vite, we suggest you to read the official Laravel documentation on Vite to understand how to set up and use Vite in your Laravel application.

IMPORTANT: Plugins configuration when using Vite

When using Vite, the Plugins Configuration of this package will be ignored completely, as you will be responsible for including the necessary CSS and JavaScript files for the plugins you want to use in your Vite entry points (e.g., resources/js/app.js or resources/css/app.css). This means that you need to manually import the plugin assets, mostly from NPM packages, in your Vite entry files to ensure they are included in your build process and available in your admin panel.

Quick Config Example

php

'vite' => [
    'enabled' => true,
    'input' => [
        'resources/css/app.css',
        'resources/js/app.js',
    ],
]

enabled:

Type: bool
Example: 'enabled' => true

Determines whether to enable Vite support in your admin panel. When set to true, the layout will include the necessary Vite directives to load your assets, and you will need to manage your asset imports in your Vite entry files. If set to false, the package will use its default asset loading mechanism, and the plugins configuration will be applied as usual.

input:

Type: array<string>
Example: 'input' => ['resources/css/app.css', 'resources/js/app.js']

An array of file paths that serve as entry points for Vite to bundle your assets. These should point to your main CSS and JavaScript files where you import your styles and scripts, including any plugin assets. The paths are relative to the root of your Laravel application, and they will be processed by Vite according to your configuration in vite.config.js. These entry points should match the ones that are defined in your vite.config.js file to ensure that Vite can correctly bundle and serve your assets in both development and production environments.

Using Vite with LaradminLTE (Quick Setup Guide)

To use Vite with LaradminLTE, you first need to enable the Vite support in the package configuration and set up your Vite entry points paths as previously explained. Once you have done this, follow the next steps to complete the setup:

1. Install LaradminLTE's NPM Dependencies

Use NPM to install the required dependencies for LaradminLTE in your project. This typically includes Bootstrap, OverlayScrollbars, and other plugins that the package and AdminLTE v4 relies on. For this, execute the following command in your terminal:

bash

npm install bootstrap @popperjs/core bootstrap-icons overlayscrollbars @fontsource/source-sans-3

Note this package already installs AdminLTE v4 distribution files in the public/vendor/ladmin directory, so you don't need to install AdminLTE via NPM unless you prefer to manage it fully through NPM. In this latest case, you can install AdminLTE via NPM as well:

bash

npm install admin-lte

WARNING: AdminLTE v4 Compatibility

Take into consideration that while the distribution files of AdminLTE v4 installed by this package are known to be compatible and work correctly with the package, the AdminLTE version installed via NPM is not guaranteed to be fully compatible.

2. Import Dependencies in Your Vite Entry Files

In your Vite entry files (e.g., resources/js/app.js and resources/css/app.css), you need to import the necessary CSS and JavaScript files for the plugins we installed previously, including AdminLTE if you choose to install it via NPM. This ensures that these assets are included in your build process and available in your admin panel. To get you started, we created an initial template for both app.js and app.css files, which you can copy and modify as needed:

resources/js/app.jsresources/css/app.css

// Popper (required by Bootstrap 5).
import '@popperjs/core';

// Bootstrap 5.
// Make the bootstrap module available in the global window scope, as it's
// used by LaradminLTE package.
import * as bootstrap from 'bootstrap';
window.bootstrap = bootstrap;

// OverlayScrollbars.
// Make OverlayScrollbars available in the global window scope, as it's
// used by LaradminLTE package.
import { OverlayScrollbars } from 'overlayscrollbars';
window.OverlayScrollbarsGlobal = { OverlayScrollbars };

// AdminLTE 4 (compatible version from public vendor).
import '/public/vendor/ladmin/js/adminlte.min.js';

// Or AdminLTE 4 from NPM (if you prefer to go fully with npm).
// import 'admin-lte';

css

/* Fonts */
@import "@fontsource/source-sans-3/index.css";

/* Bootstrap 5 */
@import "bootstrap/dist/css/bootstrap.css";

/* Bootstrap Icons */
@import "bootstrap-icons/font/bootstrap-icons.css";

/* OverlayScrollbars */
@import "overlayscrollbars/styles/overlayscrollbars.css";

/* AdminLTE 4 (compatible version from public vendor) */
@import "/public/vendor/ladmin/css/adminlte.min.css";

/* Or AdminLTE 4 RTL (compatible version from public vendor) */
/* @import "/public/vendor/ladmin/css/adminlte.rtl.min.css"; */

/* Or AdminLTE 4 from NPM (if you prefer to go fully with npm) */
/* @import "admin-lte/dist/css/adminlte.css"; */

You can customize these files further by adding your own styles or importing additional plugins as needed. Then you can use the next command (if available in your environment) to start both Vite and Laravel development servers:

bash

composer run dev

Or you can start them separately with next commands:

bash

# Start Vite development server in one terminal
npm run dev

bash

# Start Laravel development server in another terminal
php artisan serve

General Configuration ​

Basic Information ​

company: ​

company_url: ​

start_year: ​

version: ​

Favicons ​

full_support: ​

brand_logo_color: ​

brand_background_color: ​

png_sizes: ​

Brand Logo ​

image: ​

image_alt: ​

image_classes: ​

text: ​

text_classes: ​

url: ​

Layout ​

bootstrap_theme: ​

compact_mode: ​

fixed_footer: ​

fixed_navbar: ​

fixed_sidebar: ​

rtl: ​

Navbar ​

classes: ​

Sidebar ​

accordion: ​

bootstrap_theme: ​

classes: ​

default_collapsed: ​

expand_breakpoint: ​

mini_sidebar: ​

treeview_animation_speed: ​

Footer ​

classes: ​

Main Content ​

classes: ​

Menu Translations ​

enabled: ​

php_file: ​

Vite Support ​

enabled: ​

input: ​

Using Vite with LaradminLTE (Quick Setup Guide) ​

1. Install LaradminLTE's NPM Dependencies ​

2. Import Dependencies in Your Vite Entry Files ​

General Configuration

Basic Information

company:

company_url:

start_year:

version:

Favicons

full_support:

brand_logo_color:

brand_background_color:

png_sizes:

Brand Logo

image:

image_alt:

image_classes:

text:

text_classes:

url:

Layout

bootstrap_theme:

compact_mode:

fixed_footer:

fixed_navbar:

fixed_sidebar:

rtl:

Navbar

classes:

Sidebar

accordion:

bootstrap_theme:

classes:

default_collapsed:

expand_breakpoint:

mini_sidebar:

treeview_animation_speed:

Footer

classes:

Main Content

classes:

Menu Translations

enabled:

php_file:

Vite Support

enabled:

input:

Using Vite with LaradminLTE (Quick Setup Guide)

1. Install LaradminLTE's NPM Dependencies

2. Import Dependencies in Your Vite Entry Files