Nalika Admin Template

A dark-design Bootstrap 5 admin dashboard with 48 pages — dashboards, e-commerce, charts, forms, tables, mailbox, editors, calendar, kanban board, and more. Fully modernized with zero jQuery.

Template Info

Author Colorlib

License MIT

HTML Pages 48

Build System None required

Technology Stack

CSS Framework Bootstrap 5.3.8

JavaScript Vanilla JS (no jQuery)

Icons Bootstrap Icons 1.13

Charts ApexCharts 5.3

Font Google Fonts Roboto

Animations AOS 2.3

Getting Started

Unzip the downloaded archive
Open the nalika/ folder
Open any .html file directly in a browser
Edit HTML files and CSS directly — no build step or npm needed

All asset paths are relative to nalika/. Third-party libraries load from CDN, so an internet connection is needed for first load (browsers cache them afterward).

What's Included

3

Dashboard layouts

7

Chart pages

5

E-commerce pages

6

Form pages

6

UI component pages

6

Auth & error pages

Theme Colors

Nalika uses a dark color scheme throughout:

#152036

Main background

#1b2a47

Sidebar

#ec4445

Accent / hover

#00c292

Success / chart

#ab8ce4

Purple / chart

Page Catalog

All 48 pages organized by category. Each page uses the shared sidebar layout except auth and error pages, which use a minimal full-screen layout.

Dashboards 3

Dashboard V.1 Dashboard V.2 Dashboard V.3

Feature ApexCharts, Swiper carousel, counter animations, and sparkline mini-charts.

Charts 7

Analytics Area Charts Bar Charts Line Charts C3 Charts Rounded Charts Sparkline

Powered by ApexCharts and Chart.js with area, line, bar, donut, radial, heatmap, and sparkline chart types.

E-Commerce 5

Product List Product Detail Product Edit Shopping Cart Payment

Forms 6

Basic Forms Advanced Forms Multi Upload Password Meter Image Cropper Dual List Box

Uses Tom Select, noUiSlider, Pickr colorpicker, native HTML5 date/time pickers, Cropper.js, and Dropzone.

Tables 2

Static Table Data Table

Simple-DataTables 10 with sorting, pagination, and search — no jQuery required.

Mailbox 3

Inbox Mail View Compose

UI Components 6

Accordion Alerts Buttons Modals Notifications Tabs

Blog 2

Blog List Blog Details

Editors 2

Code Editor WYSIWYG Editor

CodeMirror 5 for code editing, Quill 2 for rich text.

Apps & Tools 6

Calendar Kanban Board Activity Timeline File Manager PDF Viewer Widgets

Calendar uses FullCalendar 6 with event modals, category filtering, and drag-and-drop. Kanban Board uses SortableJS for drag-and-drop task management.

Auth & Error 6

Login Register Lock Screen Password Recovery 404 Error 500 Error

These pages use a minimal full-screen layout without the sidebar.

File Structure

All template files live inside the nalika/ directory. Third-party libraries load from CDN — no node_modules or build tools required.

nalika/
- style.css — main theme stylesheet (dark theme + BS5 overrides)
- *.html (48 pages)
- css/ — component styles
  - main.css — base/utility styles
  - responsive.css — breakpoints (768, 992, 1169px)
  - nalika-icon.css — custom icon font
  - accordions.css, alerts.css, buttons.css, modals.css, tabs.css
  - form/, colorpicker/ — component-specific styles
- js/
  - main.js — central vanilla JS init (~746 lines, modular)
- fonts/ — custom nalika icon font
  - nalika.{svg,ttf,woff}
- img/ — SVG placeholder images by feature
  - logo/, blog-details/, contact/, product/, new-product/, notification/, cropper/
  - favicon.ico
- pdf/ — sample PDF for viewer page
  - sample.pdf

Key Files

`style.css`	Main theme stylesheet — dark color scheme, sidebar, header, cards, layout, Bootstrap 5 dark theme overrides
`js/main.js`	Central init script (~746 lines) — sidebar, sticky header, scroll-to-top, counters, AOS, Swiper, FullCalendar, ApexCharts, analytics dashboard, project dashboard
`css/responsive.css`	Responsive breakpoints at 768px, 992px, 1169px
`css/main.css`	Base and utility styles
`css/nalika-icon.css`	Custom nalika icon font definitions
`index.html`	Primary dashboard — ApexCharts area/line/bar charts, Swiper product carousel, sparkline widgets

CDN vs. Local Assets

All major libraries load from jsDelivr CDN. Local files are limited to the theme and component styles. The active dependency chain for any page is:

CDN (cached by browser)
 ├── Bootstrap 5.3.8 CSS + JS
 ├── Bootstrap Icons 1.13.1
 ├── AOS 2.3.4
 ├── SimpleBar 6.2.7
 └── Page-specific: ApexCharts, Swiper, FullCalendar, Simple-DataTables, etc.

Local files
 ├── style.css          (theme + BS5 dark overrides)
 ├── css/main.css       (base)
 ├── css/responsive.css (breakpoints)
 ├── css/nalika-icon.css (custom icons)
 └── js/main.js         (initialization)

HTML Structure

All pages follow a consistent two-column layout. Auth and error pages use a minimal full-screen layout instead.

Standard Page Layout

Every dashboard page uses this structure:

<!-- Left Sidebar -->
<div class="left-sidebar-pro">
    <nav id="sidebar">
        <div class="sidebar-header">
            <a href="index.html"><img src="img/logo/logo.png"></a>
        </div>
        <div class="nalika-profile">...</div>
        <div class="left-custom-menu-adm-wrap">
            <ul class="nav nav-tabs" id="menu1">
                <li class="active">
                    <a class="has-arrow" href="#">Dashboard</a>
                    <ul class="submenu-angle">
                        <li><a href="index.html">Dashboard v.1</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </nav>
</div>

<!-- Main Content -->
<div class="all-content-wrapper">
    <div class="header-advance-area">
        <!-- Top header with search, notifications, profile -->
    </div>
    <div class="breadcome-area">...</div>

    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <!-- Page content here -->
            </div>
        </div>
    </div>

    <div class="footer-copyright-area">...</div>
</div>

Grid System (Bootstrap 5)

The template uses Bootstrap 5's grid with col-*, col-sm-*, col-md-*, col-lg-*, and col-xl-*:

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-6 col-md-6 col-12">
            <!-- Half-width column -->
        </div>
        <div class="col-lg-6 col-md-6 col-12">
            <!-- Half-width column -->
        </div>
    </div>
</div>

Bootstrap 5 Data Attributes

All interactive components use the data-bs-* prefix:

<!-- Dropdown -->
<a data-bs-toggle="dropdown">...</a>

<!-- Modal -->
<button data-bs-toggle="modal" data-bs-target="#myModal">...</button>

<!-- Collapse (sidebar submenu) -->
<a data-bs-toggle="collapse" data-bs-target="#submenu1">...</a>

<!-- Tooltip -->
<span data-bs-toggle="tooltip" title="Help text">...</span>

Sidebar Toggle

The sidebar is 205px wide and collapses to 80px. The toggle button (#sidebarCollapse) adds .active to #sidebar and .mini-navbar to body. On mobile (<992px), it toggles .sidebar-mobile-open on body with a backdrop overlay. All handled in js/main.js with vanilla JS.

Minimal Layout (Auth / Error Pages)

Login, register, lock screen, password recovery, 404, and 500 pages use a simpler layout without the sidebar:

<!-- No sidebar wrapper -->
<div class="login-content">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-5">
                <!-- Login form card -->
            </div>
        </div>
    </div>
</div>

Common Head Template

Every page loads a consistent set of base dependencies:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page Title | Nalika</title>
    <link rel="shortcut icon" href="img/favicon.ico">

    <!-- Bootstrap 5.3.8 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap Icons 1.13.1 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css" rel="stylesheet">
    <!-- AOS Animations -->
    <link href="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.css" rel="stylesheet">
    <!-- SimpleBar -->
    <link href="https://cdn.jsdelivr.net/npm/simplebar@6.2.7/dist/simplebar.min.css" rel="stylesheet">

    <!-- Theme styles -->
    <link rel="stylesheet" href="css/nalika-icon.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="css/responsive.css">

    <!-- Page-specific CSS here -->
</head>

JavaScript Architecture

All JavaScript is vanilla JS — no jQuery required. The central js/main.js file (~746 lines) uses a modular one-function-per-feature pattern.

Design Principles

One function per feature — initSidebar(), initStickyHeader(), initDashboardCharts(), etc.
Guard clauses — every function starts with if (!el) return to gracefully skip on pages where the element doesn't exist
No global state — library instances are scoped within their init function
Modern APIs — IntersectionObserver, requestAnimationFrame, classList, querySelectorAll
AOS initialized outside DOMContentLoaded — since scripts are at the body bottom, AOS must run immediately

Function Reference

initTooltips() Initializes Bootstrap 5 tooltips via JS API
initPopovers() Initializes Bootstrap 5 popovers via JS API
initSidebar() Sidebar collapse/expand toggle with mobile backdrop overlay
initSidebarNav() Submenu accordion, active page highlighting. Replaces metisMenu
initStickyHeader() Header sticks on scroll using scroll listener
initScrollToTop() Scroll-to-top button with fade animation
initCounters() Animated number counters using IntersectionObserver + requestAnimationFrame
initScrollbars() Custom scrollbar via SimpleBar 6 for sidebar and notification panels
initAOS() Scroll-reveal animations via AOS 2.3 (fade, slide, zoom)
initProductCarousel() Product slider using Swiper 12 with responsive breakpoints
initPriceSlider() Price range slider using noUiSlider 15
initDropdownBehavior() Prevents header dropdown menus from closing on inner click
initCalendar() FullCalendar 6 with month/week/day views (used on dashboard widgets)
initDashboardCharts() ApexCharts area, line, bar, and sparkline charts for Dashboard V.1
initAnalyticsDashboard() Analytics page charts: audience area, traffic donut, server health radial, response time, error rate bar, activity heatmap
initProjectDashboard() Project dashboard: radial summary cards, task status stacked bar, sprint burndown line chart
initProjectCalendar() Mini list-week calendar for project dashboard using FullCalendar 6
initProjectKanban() Mini kanban board for project dashboard using SortableJS

Initialization Order

// AOS must be initialized outside DOMContentLoaded
// when scripts are loaded at body bottom
initAOS();

document.addEventListener('DOMContentLoaded', function () {
    initTooltips();
    initPopovers();
    initSidebar();
    initSidebarNav();
    initStickyHeader();
    initScrollToTop();
    initCounters();
    initScrollbars();
    initProductCarousel();
    initPriceSlider();
    initCalendar();
    initDashboardCharts();
    initAnalyticsDashboard();
    initProjectDashboard();
    initProjectCalendar();
    initProjectKanban();
});

Page-Specific Scripts

Some pages include additional inline JavaScript for page-specific functionality:

calendar.html — enhanced FullCalendar with event modals, category filtering, event creation/deletion (~240 lines)
kanban-board.html — SortableJS initialization for drag-and-drop task columns
advance-form-element.html — Tom Select, noUiSlider, Pickr initialization
data-table.html — Simple-DataTables initialization
code-editor.html — CodeMirror initialization
tinymc.html — Quill editor initialization

These scripts appear in <script> tags after js/main.js at the bottom of each page.

Script Loading Order

Scripts are loaded at the bottom of every page in this order:

<!-- 1. Bootstrap 5 Bundle (includes Popper) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>

<!-- 2. Core libraries -->
<script src="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.js"></script>
<script src="https://cdn.jsdelivr.net/npm/simplebar@6.2.7/dist/simplebar.min.js"></script>

<!-- 3. Page-specific libraries (only when needed) -->
<script src="https://cdn.jsdelivr.net/npm/apexcharts@5.3.6/dist/apexcharts.min.js"></script>

<!-- 4. Main init script (always last) -->
<script src="js/main.js"></script>

<!-- 5. Page-specific inline scripts (optional) -->

Libraries & Dependencies

All libraries load from jsDelivr CDN. No local vendor files, no node_modules, no build step. This section lists every dependency and which pages use it.

Core Stack (Every Page)

Library	Version	Purpose
Bootstrap	5.3.8	CSS framework + JS components (dropdowns, modals, tooltips, collapse)
Bootstrap Icons	1.13.1	2,000+ SVG icons via CSS classes (`bi bi-*`)
AOS	2.3.4	Scroll-reveal animations (fade, slide, zoom)
SimpleBar	6.2.7	Custom scrollbar for sidebar and notification panels

Dashboard & Charts

Library	Version	Used On
ApexCharts	5.3.6	Dashboards, analytics, all chart pages, widgets (12+ pages)
FullCalendar	6.1.20	Calendar page (standalone with modals & categories), project dashboard widget
Swiper	12	Dashboard product carousel (3 pages)
Chart.js	4.5.0	Additional chart types on chart pages

Forms & Inputs

Library	Version	Purpose
Tom Select	2.4.6	Searchable select boxes (replaces Select2 / Chosen)
Native HTML5	—	Date/time pickers (`type="date"`, `type="time"`, `type="datetime-local"`, `type="month"`, `type="week"`)
noUiSlider	15.8.1	Range sliders (replaces Ion.RangeSlider)
Pickr	1.9.1	Color picker (replaces Spectrum)
Dropzone	5.9.3	File upload with drag & drop
Cropper.js	2.1.0	Image cropping

Tables & Data

Library	Version	Notes
Simple-DataTables	10.1.0	Lightweight data tables with sorting, search, pagination — no jQuery required

Editors

Library	Version	Purpose
CodeMirror	5.65.18	Code editor with syntax highlighting
Quill	2.0.3	WYSIWYG rich text editor (replaces Summernote)

Apps & Utilities

Library	Version	Purpose
SortableJS	1.15.6	Drag-and-drop for Kanban Board and Dual List Box
SweetAlert2	11	Beautiful alert dialogs and toast notifications

Customization

How to modify the template's appearance and behavior to match your project.

Changing Theme Colors

Open style.css and find the color definitions near the top. The main colors to change are:

/* style.css — Main background */
html, body {
    background: #152036;  /* Change this for overall background */
}

/* Sidebar background */
.left-sidebar-pro {
    background: #1b2a47;  /* Change this for sidebar */
}

/* Accent color (used for hover, active states, links) */
/* Search for #ec4445 and replace globally */

For chart colors, edit the color arrays inside the initDashboardCharts() function in js/main.js:

// In js/main.js — initDashboardCharts()
colors: ['#00c292', '#ab8ce4'],  // Change chart series colors
// ...
grid: { borderColor: '#1e3154' }, // Change chart grid lines

Dark Theme for Native Inputs

Native HTML5 date/time inputs use color-scheme: dark on .form-control in style.css to match the dark theme automatically:

/* style.css — Bootstrap 5 compatibility section */
.form-control {
    color-scheme: dark;
}

Adding a New Page

Copy an existing page (e.g. static-table.html) as your starting point
Update the <title> tag and breadcrumb text
Replace the content area inside .container-fluid
Add a link to the sidebar navigation in the #menu1 list on all sidebar pages
If your page needs extra libraries, add them before js/main.js

<!-- Adding a page-specific library -->
<script src="https://cdn.jsdelivr.net/npm/some-library/dist/library.min.js"></script>
<script src="js/main.js"></script> <!-- Always load last -->

Working with Icons

The template uses two icon sets:

<!-- Bootstrap Icons (primary) -->
<i class="bi bi-house-door"></i>
<i class="bi bi-envelope"></i>
<i class="bi bi-bell"></i>

<!-- Custom Nalika icons (sidebar, social) -->
<i class="icon nalika-home"></i>
<i class="icon nalika-facebook"></i>

Browse all 2,000+ Bootstrap Icons at icons.getbootstrap.com.

Sidebar Navigation

The sidebar menu is a nested <ul> with class .submenu-angle for sub-items. To add a new menu section:

<li>
    <a class="has-arrow" href="#">
        <i class="icon nalika-bar-chart"></i>
        <span class="mini-click-non">Reports</span>
    </a>
    <ul class="submenu-angle">
        <li><a href="monthly-report.html">Monthly Report</a></li>
        <li><a href="annual-report.html">Annual Report</a></li>
    </ul>
</li>

The initSidebarNav() function in js/main.js automatically handles submenu toggling and active-page highlighting. Remember to add the link to all sidebar-bearing pages (42 files).

Adding Charts

ApexCharts makes it easy to add new charts. Include the library and add a container:

<!-- 1. Add a container with a unique ID -->
<div id="myChart"></div>

<!-- 2. Initialize in a script block -->
<script>
var chart = new ApexCharts(document.getElementById('myChart'), {
    chart: { type: 'bar', height: 350, background: 'transparent' },
    series: [{ name: 'Sales', data: [30, 40, 35, 50, 49, 60, 70] }],
    xaxis: { categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] },
    colors: ['#00c292'],
    tooltip: { theme: 'dark' },
    grid: { borderColor: '#1e3154' }
});
chart.render();
</script>

Responsive Breakpoints

The layout adapts at three breakpoints defined in css/responsive.css:

1169px and below	Content area adjusts, some columns stack
992px and below	Sidebar hides, mobile menu activates with backdrop overlay
768px and below	Single-column layout, cards stack vertically

Sources & Credits

Third-party libraries and resources used in this template.

Framework & Icons

Charts & Data Visualization

UI & Layout

Forms & Inputs

Tom Select
Native HTML5 date/time inputs
noUiSlider
Pickr
Dropzone
Cropper.js

Editors

Support

Thank you for using Nalika. If you have any questions or run into issues, we're here to help.

Need Help?

Our support team is happy to assist with questions about setup, customization, or troubleshooting.

Contact Colorlib