Dashboard Template
A complete dashboard with fixed sidebar navigation, top navbar with user menu, and responsive card-based content area. Perfect for admin panels and data-heavy applications.
Template Features
Responsive grid layout
Working navbar with dropdown
Functional sidebar navigation
Real data tables
Stats cards with icons
Mobile-first design
Live Preview
Dashboard Preview - Fully Interactive
Dashboard Overview
Total Users
2,543
+12.5%
Revenue
$12.4k
+8.2%
Orders
432
-3.1%
Tasks
89
Recent Orders
| Order ID | Customer | Amount | Status |
|---|---|---|---|
| #12345 | John Smith | $129.99 | Completed |
| #12344 | Sarah Johnson | $89.50 | Pending |
| #12343 | Mike Wilson | $299.00 | Processing |
| #12342 | Emma Davis | $45.00 | Completed |
Full Template Code
Copy this complete HTML to use the dashboard template. Simply replace the placeholder content with your own data.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard - My App</title>
<link rel="stylesheet" href="path/to/focus-ui.css">
</head>
<body>
<!-- Top Navigation Bar -->
<nav class="focus-navbar focus-navbar-primary focus-navbar-fixed">
<div class="focus-navbar-brand">
<a href="#" class="focus-text-white focus-text-bold">My Dashboard</a>
</div>
<div class="focus-navbar-nav">
<div class="focus-dropdown">
<button class="focus-btn focus-btn-text focus-text-white">
<i class="fa fa-user-circle"></i> John Doe <i class="fa fa-caret-down"></i>
</button>
<div class="focus-dropdown-menu focus-dropdown-menu-end">
<a href="#" class="focus-dropdown-item"><i class="fa fa-user"></i> Profile</a>
<a href="#" class="focus-dropdown-item"><i class="fa fa-cog"></i> Settings</a>
<div class="focus-dropdown-divider"></div>
<a href="#" class="focus-dropdown-item focus-text-danger"><i class="fa fa-sign-out-alt"></i> Logout</a>
</div>
</div>
</div>
</nav>
<!-- Dashboard Layout -->
<div class="focus-container-fluid" style="margin-top: 60px;">
<div class="focus-row">
<!-- Sidebar -->
<aside class="focus-col-12 focus-col-md-3 focus-col-lg-2 focus-p-0">
<div class="focus-sidebar" style="height: calc(100vh - 60px); position: sticky; top: 60px;">
<nav class="focus-sidebar-nav">
<a href="#" class="focus-sidebar-item focus-sidebar-item-active">
<i class="fa fa-home"></i><span>Overview</span>
</a>
<a href="#" class="focus-sidebar-item">
<i class="fa fa-chart-bar"></i><span>Analytics</span>
</a>
<a href="#" class="focus-sidebar-item">
<i class="fa fa-users"></i><span>Users</span>
</a>
<a href="#" class="focus-sidebar-item">
<i class="fa fa-shopping-cart"></i><span>Orders</span>
</a>
<a href="#" class="focus-sidebar-item">
<i class="fa fa-box"></i><span>Products</span>
</a>
<a href="#" class="focus-sidebar-item">
<i class="fa fa-cog"></i><span>Settings</span>
</a>
</nav>
</div>
</aside>
<!-- Main Content -->
<main class="focus-col-12 focus-col-md-9 focus-col-lg-10">
<div class="focus-p-4">
<!-- Page Header -->
<div class="focus-mb-4">
<h1 class="focus-text-3xl focus-text-bold">Dashboard Overview</h1>
<p class="focus-text-secondary">Welcome back! Here's what's happening today.</p>
</div>
<!-- Stats Cards -->
<div class="focus-row">
<div class="focus-col-12 focus-col-sm-6 focus-col-lg-3">
<div class="focus-card focus-mb-4">
<div class="focus-card-body">
<div class="focus-flex focus-justify-between focus-items-center">
<div>
<p class="focus-text-secondary focus-text-sm focus-mb-1">Total Users</p>
<h3 class="focus-text-3xl focus-text-bold">2,543</h3>
<span class="focus-badge focus-badge-success">+12.5%</span>
</div>
<div class="focus-text-primary" style="font-size: 3rem;">
<i class="fa fa-users"></i>
</div>
</div>
</div>
</div>
</div>
<div class="focus-col-12 focus-col-sm-6 focus-col-lg-3">
<div class="focus-card focus-mb-4">
<div class="focus-card-body">
<div class="focus-flex focus-justify-between focus-items-center">
<div>
<p class="focus-text-secondary focus-text-sm focus-mb-1">Revenue</p>
<h3 class="focus-text-3xl focus-text-bold">$12.4k</h3>
<span class="focus-badge focus-badge-success">+8.2%</span>
</div>
<div class="focus-text-success" style="font-size: 3rem;">
<i class="fa fa-dollar-sign"></i>
</div>
</div>
</div>
</div>
</div>
<div class="focus-col-12 focus-col-sm-6 focus-col-lg-3">
<div class="focus-card focus-mb-4">
<div class="focus-card-body">
<div class="focus-flex focus-justify-between focus-items-center">
<div>
<p class="focus-text-secondary focus-text-sm focus-mb-1">Orders</p>
<h3 class="focus-text-3xl focus-text-bold">432</h3>
<span class="focus-badge focus-badge-warning">-3.1%</span>
</div>
<div class="focus-text-warning" style="font-size: 3rem;">
<i class="fa fa-shopping-cart"></i>
</div>
</div>
</div>
</div>
</div>
<div class="focus-col-12 focus-col-sm-6 focus-col-lg-3">
<div class="focus-card focus-mb-4">
<div class="focus-card-body">
<div class="focus-flex focus-justify-between focus-items-center">
<div>
<p class="focus-text-secondary focus-text-sm focus-mb-1">Conversion</p>
<h3 class="focus-text-3xl focus-text-bold">3.6%</h3>
<span class="focus-badge focus-badge-success">+0.5%</span>
</div>
<div class="focus-text-info" style="font-size: 3rem;">
<i class="fa fa-chart-line"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Recent Activity -->
<div class="focus-row">
<div class="focus-col-12 focus-col-lg-8">
<div class="focus-card focus-mb-4">
<div class="focus-card-header">
<h3 class="focus-card-title">Recent Orders</h3>
</div>
<div class="focus-card-body focus-p-0">
<div class="focus-table-container">
<table class="focus-table focus-table-hover">
<thead>
<tr>
<th>Order ID</th>
<th>Customer</th>
<th>Amount</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>#12345</td>
<td>John Smith</td>
<td>$129.99</td>
<td><span class="focus-badge focus-badge-success">Completed</span></td>
</tr>
<tr>
<td>#12344</td>
<td>Sarah Johnson</td>
<td>$89.50</td>
<td><span class="focus-badge focus-badge-warning">Pending</span></td>
</tr>
<tr>
<td>#12343</td>
<td>Mike Wilson</td>
<td>$299.00</td>
<td><span class="focus-badge focus-badge-info">Processing</span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="focus-col-12 focus-col-lg-4">
<div class="focus-card focus-mb-4">
<div class="focus-card-header">
<h3 class="focus-card-title">Quick Actions</h3>
</div>
<div class="focus-card-body">
<button class="focus-btn focus-btn-primary focus-btn-block focus-mb-2">
<i class="fa fa-plus"></i> New Order
</button>
<button class="focus-btn focus-btn-secondary focus-btn-block focus-mb-2">
<i class="fa fa-user-plus"></i> Add User
</button>
<button class="focus-btn focus-btn-secondary focus-btn-block">
<i class="fa fa-download"></i> Export Report
</button>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
</div>
<script src="path/to/focus-ui.js"></script>
</body>
</html>Customization Tips
Colors
Change color classes like .focus-badge-success, .focus-text-primary to match your brand.
Grid Layout
Adjust grid columns (e.g., focus-col-md-3 to focus-col-md-4) for different layouts.
Components
Add or remove components like cards, tables, or progress bars as needed.
Responsive
Modify sidebar width or convert to collapsible mobile menu for better mobile experience.