Introduction

What's in the box, and how this documentation is organized.

AdminPro is an HTML, CSS and vanilla JavaScript admin dashboard template. It ships as two complete layouts — a collapsible left sidebar and a horizontal top navigation — covering 29 unique page templates each, plus a shared design system so both layouts always look and behave consistently.

There's no build step, no framework and no package manager involved. Every page is a plain .html file you can open directly in a browser, edit in any code editor, and deploy to any static host.

Installation

There's nothing to install — open it and go.

1. Unzip the package you downloaded.
2. Open landing.html in a browser to see the overview page, or open any page inside sidebar/ or horizontal/ directly.
3. To deploy, upload the whole folder to any static host (Netlify, Vercel, S3, cPanel, GitHub Pages) — no server-side runtime is required.

Requirements

• Any modern code editor (VS Code, Sublime, etc.) — no IDE-specific setup needed.
• An evergreen browser (Chrome, Edge, Firefox, Safari) for previewing.
• An internet connection on first load, for the Google Fonts, Bootstrap Icons and Chart.js CDN links — see Credits to self-host them instead.

Folder structure

Where everything lives in the package.

Sidebar vs. horizontal

Both cover the same 29 pages with the same components — the difference is purely navigational.

Every other page name in horizontal/ matches its sidebar/ counterpart with a -horizontal suffix — for example sidebar/orders.html and horizontal/orders-horizontal.html are the same screen, built on each shell.

CSS architecture

One shared stylesheet, one small file per page.

Each layout folder's assets/css/style.css holds everything shared across every page: CSS custom properties (colors, radius, shadow, spacing), resets, typography, the sidebar/nav shell, buttons, cards, badges, tables, avatars and the preloader.

Every page then loads one additional, small CSS file with only what's unique to that page — for example orders.css holds just the order-status colors and the stock-badge styling that orders.html needs.

<!-- in orders.html -->
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/orders.css">Copy

Naming convention

A page's own CSS file always matches its HTML filename: settings.html → assets/css/settings.css, orders-horizontal.html → assets/css/orders-horizontal.css. If a page needs no unique styling at all (like the dashboard, which is built entirely from shared components), it simply doesn't load a page CSS file.

CSS custom properties

Every color, radius and shadow in the template is a variable, defined once in style.css:

To rebrand the template, change the --ap-primary group in style.css — every button, active nav item and focus ring updates automatically, in both light and dark mode.

JavaScript architecture

One shared script, one small file per page — mirroring the CSS.

assets/js/script.js runs on every page and handles the behavior that's identical everywhere:

• Fixing dropdown menus so they aren't clipped inside scrollable tables
• Sidebar collapse (desktop) and slide-out drawer (mobile)
• Sidebar sub-menu expand/collapse (sidebar layout only)
• Light/dark theme toggle
• Fullscreen toggle
• Hiding the preloader once the page has loaded

Each page then loads one page-specific file — orders.js, users.js, and so on — containing only the data and logic that page needs: table rendering, search/filter/pagination, and any Chart.js instances.

<!-- always in this order, at the end of the page -->
<script src="assets/js/script.js"></script>
<script src="assets/js/orders.js"></script>Copy

Colors & dark mode

Both driven by the same set of CSS variables — nothing to duplicate.

Dark mode is not a second set of pages or a separate stylesheet. It's the same variables, redefined once inside a [data-theme="dark"] block:

:root {
  --ap-surface: #FFFFFF;
  --ap-bg: #F5F7FB;
  --ap-text: #475569;
}

[data-theme="dark"] {
  --ap-surface: #151B2C;
  --ap-bg: #0B1120;
  --ap-text: #93A0B8;
}Copy

Clicking the theme toggle in the topbar sets data-theme="dark" on the <html> element; every component repaints instantly because it was already reading from the variables above. To make dark mode the default, set data-theme="dark" directly on the <html> tag in your HTML.

Working with charts

Chart.js instances that already know about light and dark mode.

Chart-heavy pages define a small themeColors() helper that reads the current theme and returns a matching color set, and a drawAllCharts() function that destroys and rebuilds every chart on the page:

function themeColors() {
  const dark = root.getAttribute('data-theme') === 'dark';
  return {
    grid: dark ? 'rgba(255,255,255,.06)' : 'rgba(15,23,42,.06)',
    text: dark ? '#93A0B8' : '#64748B',
    primary: '#4F46E5', info: '#0EA5E9'
  };
}Copy

drawAllCharts() is called once on page load, again whenever the theme toggle is clicked, and again whenever a chart's range buttons (Week / Month / Year) are clicked — so any chart you add following the same pattern gets theme-switching and range-switching for free.

Replacing demo data

Every table, chart and list runs on a plain JavaScript array — swap it for a real API call.

Data lives at the top of each page's own JS file as a plain array of objects, for example in orders.js:

const orders = [
  { id: '#ORD-4821', name: 'Meera Shah', amount: '$248.00', status: 'success' },
  // …
];Copy

The rest of the file reads from that array to render rows, filter, sort and paginate. To connect a real backend, replace the array with the result of a fetch() call and call the existing render function once the response arrives — the rendering, search and pagination logic don't need to change.

Page reference

Every page, and where to find it in each layout.

In horizontal/, every filename above (except auth.html) carries a -horizontal suffix. *Lock screen and error pages ship in sidebar/ only, since they're standalone screens with no navigation shell.

Browser support

Tested on the latest evergreen browsers.

Credits

Third-party resources used, and where they're loaded from.

FAQ

Common questions before and after purchase.

Changelog

Version history for this item.