Free Admin Dashboard Template (HTML & CSS, 2026)
A responsive admin dashboard template in HTML and CSS — sidebar navigation, top bar, stat cards and a data table — using CSS Grid, accessible and easy to extend.
This free admin dashboard template is a responsive back-office layout in plain HTML and CSS: a sidebar for navigation, a top bar, a row of stat cards and a data table. It uses CSS Grid for the shell, collapses gracefully on mobile, and is themed with CSS variables so you can drop in your brand and data.
What you get
- A CSS Grid app shell: sidebar + top bar + scrollable main content.
- A responsive stat-card row and a clean, accessible data table.
- Mobile-friendly — the sidebar stacks above the content on small screens.
- CSS-variable theming and no dependencies.
Try it live
The complete template runs live below — edit the HTML and CSS and watch the preview update instantly. Open it in XCODX Studio when you want to make it your own.
How it's built
A back-office shell: a fixed sidebar for navigation beside a fluid main area of stat cards and a content region, in a calm dark theme. The layout is pure CSS — a flex row for the shell, a responsive grid for the cards — and the sidebar collapses on narrow screens. It is a starting point you extend with your own widgets, not a component library to learn.
- A flex shell plus an
auto-fitcard grid — no layout framework - A design-token palette at the top of the CSS for instant re-theming
- A sidebar that collapses gracefully on small screens
- Semantic landmarks so the structure stays navigable
How to extend it
- Add pages: each sidebar link points to a route; render different content in
.contentper page. - Real data: replace the static table rows and stats with data fetched from your API — see best HTTP client libraries.
- Charts: drop a chart into a
.panelusing a charting library. - Collapsible sidebar: add a toggle button and a class that narrows the grid’s first column for a slide-in menu.
- Framework version: to make it interactive, rebuild it in React with a starter template and a UI component library.
Frequently asked questions
How is the dashboard layout built?
grid-template-columns: 240px 1fr) — spanning the full viewport height. Inside, the stat cards and table use their own grids and standard flow. On small screens a media query collapses it to a single column and turns the sidebar into a horizontal nav.Is the data table accessible?
<table> semantics with <thead>, <th scope="col"> header cells, and <tbody> rows, which screen readers announce correctly. The table sits in a container with overflow-x: auto so it scrolls horizontally on narrow screens instead of breaking the layout.Can I make the sidebar collapsible?
.app element, and in CSS change the grid’s first column (for example to a narrow icon rail or 0) when that class is present. For a mobile slide-in menu, position the sidebar fixed and translate it in and out with a transform.How do I add real data to the dashboard?
fetch and build the table with template strings or DOM methods. For a larger app, rebuild the dashboard in a framework like React and use a data-fetching library such as TanStack Query to handle loading and caching.Open this dashboard in XCODX Studio to edit it live. See also the React starter template, best charting libraries and the complete guide to CSS Grid.