Patterns
Admin Dashboard
Full admin layout with collapsible sidebar, top bar, stat cards, data tables, filters, and row actions for managing application resources.
Layout Structure
Collapsible sidebar + fixed top bar + scrollable main content. Toggle the sidebar with the menu button.
JS
Dashboard
Users
12,340
Revenue
$89K
Active
1,023
CVR
4.7%
Data Table
Striped table with search input, export button, badge-based status column, and per-row icon actions.
| Name | Role | Status | Actions |
|---|---|---|---|
Alice Johnson alice@example.com | Admin | Active | |
Bob Smith bob@example.com | Editor | Active | |
Carol Davis carol@example.com | Viewer | Inactive |
Stat Cards
Four-column KPI cards with an icon, metric value, and month-over-month delta indicator.
Total Users
12,340
+8% vs last month
Revenue
$89.4K
+12% vs last month
Active Now
1,023
+3% vs last month
Conversion
4.7%
-0.2% vs last month
Best Practices
Do
- Keep primary navigation in a fixed sidebar with
aria-current="page". - Use icon + label pairs in nav links — icon-only sidebars are hard to scan.
- Show delta trends on KPI cards so users grasp direction instantly.
- Include a search bar above tables on any list longer than 10 rows.
Don't
- Do not place destructive actions (delete) without a confirmation step.
- Do not show all columns on mobile — prioritize the most important.
- Do not use more than four top-level nav items without grouping.
- Do not hide the sidebar by default — default to open on desktop.
Accessibility
- Use
<nav>,<main>, and<aside>for landmark regions. - Include a skip-to-main-content link at the very top of the page.
- Label tables with
<caption>and usescopeon header cells. - Icon-only buttons must carry
aria-labelto be announced correctly.