Building a Dashboard Layout

While dashboards often use JavaScript frameworks for their interactive features, the core HTML and CSS layout can also be built from scratch.

A dashboard is a complex layout that gives users control over an application. It allows users to navigate between views, monitor key metrics, manage data, and so on. The most common layout is a sidebar on the left and a main content area on the right. The sidebar usually contains navigation links, while the main content area contains the data and controls for the application.

Below is a simple example of a dashboard layout using HTML and CSS. It features a sidebar navigation, a top bar, stat cards, and a data table. The example uses a dark theme, but it can be easily changed to a light theme by modifying the CSS variables.

The Sidebar + Main Split

As mentioned, many dashboards use the classic sidebar-plus-main structure. The simplest and most robust way to build this is to make the body a flex container, then place the sidebar and the main content area as its two direct children. The sidebar has a fixed width, and the main area uses flex: 1 to consume all remaining space:

Using CSS Variables for Theming

Dashboards frequently support light and dark modes. The best way to manage this is using CSS Custom Properties (variables) at the root level. Every color in the layout reads from these variables, so switching themes is as simple as changing a few values in one place. See How to Create a Dark Mode Toggle for a full walkthrough.

The Stat Cards Grid

The most recognisable dashboard element is a row of stat cards showing key metrics at a glance. These are perfectly suited to grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)), which automatically adjusts the number of cards per row based on available space.

Full Working Example

Below is a full dark-themed dashboard with a sidebar navigation, a top bar, four stat cards, and a recent orders data table complete with color-coded status badges: