Setup | Lexa - Responsive Bootstrap 5 Admin Dashboard

Setup Ajax

Introduction

Lexa – Ajax is a simple and beautiful admin template built with Bootstrap 5.3.2 and jQuery Ajax. It has 7+ different layouts and 3 modes ( Dark, Light & RTL ). You can simply change to any layouts or modes by changing a couple of lines code. You can start small and large projects or update design in your existing project using Lexa Ajax. It is very quick and easy as it is beautiful, adroit, and delivers the ultimate user experience.

📁 Folder & Files Structure

AJAX

├── Admin
├── Documentation
├── Starterkit


├── Admin
      ├── ajax 
      ├── assets
            ├── css
            ├── fonts
            ├── images
            ├── js
            └── libs
      └── All html pages

Server Requirements

Need WAMP or LAMP or XAMPP or NGINX or Apache setup on your server or machine.

How to add-new/change menu items?

To add, change or remove menu items from the left side navigation, simply edit in the index.html file.

How to use pre-built layouts?

For Vertical layout, Each of the layout options is provided below with steps you would need to perform in the index.html file:

Light Sidebar & Topbar Dark

Remove data attribute data-sidebar="light" body element to have light sidebar. Add data attribute data-topbar="dark" body element to have a dark topbar.

Compact Sidebar

Keep your body element with data attribute data-sidebar-size="small" i.e. <body data-sidebar-size="small"> to have small sidebar.

Icon Sidebar

Keep your body element with class vertical-collpsed" i.e. <body class="vertical-collpsed"> to have icon sidebar.

Boxed Layout

Keep your body element with class vertical-collpsed and data attribute

data-layout-size="boxed"
                                                                    data-keep-enlarged="true"

i.e.

 <body class="vertical-collpsed"
                                                                    data-layout-size="boxed"
                                                                    data-keep-enlarged="true">

to have boxed layout with icon view sidebar.

Colored Sidebar

Keep your body element with data attribute data-topbar="colored" i.e. <body data-topbar="colored"> to have colored sidebar.

Preloader

In order to add pre-loader in your page, include following html after body element.

<div id="preloader">
                                                                    <div id="status">
                                                                        <div class="spinner-chase">
                                                                            <div class="chase-dot"></div>
                                                                            <div class="chase-dot"></div>
                                                                            <div class="chase-dot"></div>
                                                                            <div class="chase-dot"></div>
                                                                            <div class="chase-dot"></div>
                                                                            <div class="chase-dot"></div>
                                                                        </div>
                                                                    </div>
                                                                </div>

For Horizontal layout, Use the structure of the layouts-horizontal.html file.
Each of the layout options is provided below with steps you would need to perform in the layouts-horizontal.html or index.html file:

Topbar Light

Keep your body element with data attribute

data-topbar="light"
                                                                    data-layout="horizontal"

i.e.

 <body
                                                                    data-topbar="light"
                                                                    data-layout="horizontal">

to have light topbar and dark menubar.

Topbar Dark

Keep your body element with data attribute

data-topbar="dark"
                                                                    data-layout="horizontal"

i.e.

 <body
                                                                    data-topbar="dark"
                                                                    data-layout="horizontal">

to have dark topbar and dark menubar.

Boxed Layout

Keep your body element with data attribute

data-layout-size="boxed"
                                                                    data-layout="horizontal"

i.e.

 <body
                                                                    data-layout-size="boxed"
                                                                    data-layout="horizontal">

to have boxed layout.

Preloader

In order to add pre-loader in your page, include following html after body element.

<div id="preloader">
                                                                    <div id="status">
                                                                        <div class="spinner-chase">
                                                                            <div class="chase-dot"></div>
                                                                            <div class="chase-dot"></div>
                                                                            <div class="chase-dot"></div>
                                                                            <div class="chase-dot"></div>
                                                                            <div class="chase-dot"></div>
                                                                            <div class="chase-dot"></div>
                                                                        </div>
                                                                    </div>
                                                                </div>

Red Color Layout

Vertical

Horizontal

Teal Color Layout

Vertical

Horizontal

Change Theme Color

To have default mode enabled, Keep your body element with data attribute data-theme-mode="default" in the html tag
<html lang="en" data-theme-mode="default">

To have red mode enabled, Keep your body element with data attribute data-theme-mode="red" in the html tag
<html lang="en" data-theme-mode="red">

To have teal mode enabled, Keep your body element with data attribute data-theme-mode="teal" in the html tag
<html lang="en" data-theme-mode="teal">

Tips

CSS: We suggest you do not change any scss files from the assets/scss/custom folders because to get new updates will break your CSS changes if any you have made. We strongly suggest you create a new custom.css file and use that instead of overwriting any template's custom CSS files.