AdminPro is an HTML5 admin template with a full sidebar layout and a full horizontal-nav layout, dark mode built in, and every screen a SaaS product actually needs — from auth to invoices to a kanban board.
Every interaction below is real, working code in the template — not a mockup you have to rebuild.
Every page ships twice — once with a collapsible left sidebar, once with a horizontal top nav — so you pick the shell that fits your product.
A single click swaps the entire palette, including charts, without a page reload. Driven by CSS custom properties, not two separate stylesheets.
Revenue trends, traffic sources, conversion funnels and sparklines, each with range switching (week / month / year) already scripted.
Orders, users, products and customers all include working client-side search, filtering and pagination — no backend required to demo.
The sidebar becomes a slide-out drawer, the horizontal nav scrolls, and every table and card grid reflows cleanly on small screens.
Login, register, lock screen, 404 and 500 pages are included so the edges of your app look as finished as the dashboard.
A drag-friendly kanban layout for projects and a pipeline view for CRM, both built with the same component set as the rest of the kit.
Buttons, badges, alerts, tabs, tooltips, modals and form controls — restyled once, reused everywhere, documented on their own pages.
No React, no build pipeline, no npm install. Open a file and edit it — every page is standalone and easy to hand to any developer.
Both layouts share the same design tokens and components, so switching between them later is a styling decision, not a rebuild.
A classic collapsible left sidebar with nested sub-menus, ideal for apps with deep, hierarchical navigation.
A top navigation bar that keeps the full page width for content — a better fit for wide tables and chart-heavy screens.
Each page below exists in both layouts (sidebar and horizontal), except where noted.
Shared styles live in one stylesheet, shared behavior in one script, and every page keeps only what's unique to it.
No. Every page is plain HTML, CSS and JavaScript. Open any file directly in a browser or drop the folder on a static host — there's nothing to compile.
They share the same components and CSS variables, just arranged differently: one uses a collapsible left sidebar, the other a horizontal top nav. Pick whichever fits your product, or ship both and let users choose.
Yes. Tables, forms and charts currently run on demo data defined at the top of each page's script file — replace those arrays with API calls and the rendering logic keeps working as-is.
No, it's one template. Dark mode is driven entirely by CSS custom properties toggled with a single
data-theme attribute, so there's nothing extra to maintain.
Shared design tokens and behavior live in one style.css and one script.js. Each
page then loads a small, page-specific CSS and JS file for anything unique to it — nothing is duplicated
across the template.
Both layouts are live below — click through the same pages in each and compare.