Admin Panel Template
A complete admin panel with sidebar navigation, top bar with search and user menu, and data tables. Ideal for backend management systems.
Template Features
Dark sidebar navigation
Working dropdowns
Stats cards with badges
Striped data tables
Pagination component
Mobile-responsive
Live Preview
Admin Panel Preview - Fully Interactive
User Management
Total Users
1,234
12% from last month
Active Sessions
432
No change
New Signups
89
8% increase
Pending
23
Needs attention
All Users
| Name | Role | Status | Actions | |
|---|---|---|---|---|
| John Doe | john.doe@example.com | Admin | Active | |
| Jane Smith | jane.smith@example.com | User | Active | |
| Mike Wilson | mike.wilson@example.com | Moderator | Pending |
Full Template Code
Copy this complete HTML to use the admin panel template. The template includes custom CSS for the dark sidebar.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin Panel</title>
<link rel="stylesheet" href="path/to/focus-ui.css">
<style>
.admin-sidebar {
background: #34495e;
color: white;
height: 100vh;
position: fixed;
width: 250px;
padding: 1rem;
overflow-y: auto;
}
.admin-main {
margin-left: 250px;
margin-top: 60px;
}
@media (max-width: 768px) {
.admin-sidebar {
transform: translateX(-100%);
transition: transform 0.3s;
z-index: 1000;
}
.admin-sidebar.active {
transform: translateX(0);
}
.admin-main {
margin-left: 0;
}
}
</style>
</head>
<body>
<!-- Top Bar -->
<nav class="focus-navbar focus-navbar-dark focus-navbar-fixed" style="background: #2c3e50;">
<div class="focus-navbar-brand">
<button class="focus-btn focus-btn-text focus-text-white" id="sidebarToggle">
<i class="fa fa-bars"></i>
</button>
<span class="focus-text-white focus-text-bold">Admin Panel</span>
</div>
<div class="focus-navbar-nav">
<div class="focus-form-group focus-mb-0" style="min-width: 300px;">
<input type="search" class="focus-input" placeholder="Search...">
</div>
<div class="focus-dropdown">
<button class="focus-btn focus-btn-text focus-text-white">
<i class="fa fa-bell"></i>
<span class="focus-badge focus-badge-danger" style="position: absolute; top: 8px; right: 8px;">5</span>
</button>
<div class="focus-dropdown-menu focus-dropdown-menu-end">
<div class="focus-dropdown-item"><strong>New user registered</strong></div>
<div class="focus-dropdown-item">Order #12345 completed</div>
<div class="focus-dropdown-item">Server backup completed</div>
</div>
</div>
<div class="focus-dropdown">
<button class="focus-btn focus-btn-text focus-text-white">
<i class="fa fa-user-circle"></i> Admin <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>
<!-- Sidebar -->
<aside class="admin-sidebar" id="adminSidebar">
<div class="focus-text-center focus-mb-4">
<i class="fa fa-user-circle" style="font-size: 4rem;"></i>
<h4 class="focus-mt-2">Admin User</h4>
<p class="focus-text-sm" style="opacity: 0.8;">admin@example.com</p>
</div>
<nav>
<a href="#" class="focus-btn focus-btn-text focus-btn-block focus-text-left focus-mb-2" style="color: white; justify-content: flex-start;">
<i class="fa fa-tachometer-alt focus-mr-2"></i> Dashboard
</a>
<a href="#" class="focus-btn focus-btn-primary focus-btn-block focus-text-left focus-mb-2" style="justify-content: flex-start;">
<i class="fa fa-users focus-mr-2"></i> Users
</a>
<a href="#" class="focus-btn focus-btn-text focus-btn-block focus-text-left focus-mb-2" style="color: white; justify-content: flex-start;">
<i class="fa fa-file-alt focus-mr-2"></i> Content
</a>
<a href="#" class="focus-btn focus-btn-text focus-btn-block focus-text-left focus-mb-2" style="color: white; justify-content: flex-start;">
<i class="fa fa-shopping-cart focus-mr-2"></i> Orders
</a>
<a href="#" class="focus-btn focus-btn-text focus-btn-block focus-text-left focus-mb-2" style="color: white; justify-content: flex-start;">
<i class="fa fa-chart-bar focus-mr-2"></i> Reports
</a>
<a href="#" class="focus-btn focus-btn-text focus-btn-block focus-text-left focus-mb-2" style="color: white; justify-content: flex-start;">
<i class="fa fa-envelope focus-mr-2"></i> Messages
</a>
<a href="#" class="focus-btn focus-btn-text focus-btn-block focus-text-left focus-mb-2" style="color: white; justify-content: flex-start;">
<i class="fa fa-cog focus-mr-2"></i> Settings
</a>
</nav>
</aside>
<!-- Main Content -->
<main class="admin-main">
<div class="focus-container-fluid focus-p-4">
<!-- Page Header -->
<div class="focus-flex focus-justify-between focus-items-center focus-mb-4">
<div>
<h1 class="focus-text-3xl focus-text-bold">User Management</h1>
<nav class="focus-breadcrumb focus-mt-2">
<a href="#" class="focus-breadcrumb-item">Home</a>
<span class="focus-breadcrumb-item focus-breadcrumb-item-active">Users</span>
</nav>
</div>
<button class="focus-btn focus-btn-primary">
<i class="fa fa-plus"></i> Add New User
</button>
</div>
<!-- Stats Cards -->
<div class="focus-row focus-mb-4">
<div class="focus-col-12 focus-col-md-6 focus-col-lg-3">
<div class="focus-card">
<div class="focus-card-body">
<div class="focus-text-secondary focus-text-sm focus-mb-1">Total Users</div>
<div class="focus-text-3xl focus-text-bold">1,234</div>
<div class="focus-text-success focus-text-sm">
<i class="fa fa-arrow-up"></i> 12% from last month
</div>
</div>
</div>
</div>
<div class="focus-col-12 focus-col-md-6 focus-col-lg-3">
<div class="focus-card">
<div class="focus-card-body">
<div class="focus-text-secondary focus-text-sm focus-mb-1">Active Sessions</div>
<div class="focus-text-3xl focus-text-bold">432</div>
<div class="focus-text-info focus-text-sm">
<i class="fa fa-minus"></i> No change
</div>
</div>
</div>
</div>
<div class="focus-col-12 focus-col-md-6 focus-col-lg-3">
<div class="focus-card">
<div class="focus-card-body">
<div class="focus-text-secondary focus-text-sm focus-mb-1">New Signups</div>
<div class="focus-text-3xl focus-text-bold">89</div>
<div class="focus-text-success focus-text-sm">
<i class="fa fa-arrow-up"></i> 8% increase
</div>
</div>
</div>
</div>
<div class="focus-col-12 focus-col-md-6 focus-col-lg-3">
<div class="focus-card">
<div class="focus-card-body">
<div class="focus-text-secondary focus-text-sm focus-mb-1">Pending Approvals</div>
<div class="focus-text-3xl focus-text-bold">23</div>
<div class="focus-text-warning focus-text-sm">
<i class="fa fa-exclamation-triangle"></i> Needs attention
</div>
</div>
</div>
</div>
</div>
<!-- Users Table -->
<div class="focus-card">
<div class="focus-card-header">
<div class="focus-flex focus-justify-between focus-items-center">
<h3 class="focus-card-title">All Users</h3>
<div class="focus-flex focus-gap-2">
<input type="search" class="focus-input" placeholder="Search users..." style="width: 250px;">
<div class="focus-dropdown">
<button class="focus-btn focus-btn-secondary">
<i class="fa fa-filter"></i> Filter
</button>
<div class="focus-dropdown-menu focus-dropdown-menu-end">
<a href="#" class="focus-dropdown-item">All Users</a>
<a href="#" class="focus-dropdown-item">Active Only</a>
<a href="#" class="focus-dropdown-item">Inactive Only</a>
</div>
</div>
</div>
</div>
</div>
<div class="focus-card-body focus-p-0">
<div class="focus-table-container">
<table class="focus-table focus-table-hover">
<thead>
<tr>
<th>
<input type="checkbox" class="focus-form-check">
</th>
<th>Name</th>
<th>Email</th>
<th>Role</th>
<th>Status</th>
<th>Joined</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="focus-form-check"></td>
<td><strong>John Doe</strong></td>
<td>john.doe@example.com</td>
<td><span class="focus-badge focus-badge-primary">Admin</span></td>
<td><span class="focus-badge focus-badge-success">Active</span></td>
<td>Jan 15, 2026</td>
<td>
<button class="focus-btn focus-btn-sm focus-btn-secondary focus-mr-1">
<i class="fa fa-edit"></i>
</button>
<button class="focus-btn focus-btn-sm focus-btn-danger">
<i class="fa fa-trash"></i>
</button>
</td>
</tr>
<tr>
<td><input type="checkbox" class="focus-form-check"></td>
<td><strong>Jane Smith</strong></td>
<td>jane.smith@example.com</td>
<td><span class="focus-badge focus-badge-secondary">User</span></td>
<td><span class="focus-badge focus-badge-success">Active</span></td>
<td>Jan 12, 2026</td>
<td>
<button class="focus-btn focus-btn-sm focus-btn-secondary focus-mr-1">
<i class="fa fa-edit"></i>
</button>
<button class="focus-btn focus-btn-sm focus-btn-danger">
<i class="fa fa-trash"></i>
</button>
</td>
</tr>
<tr>
<td><input type="checkbox" class="focus-form-check"></td>
<td><strong>Mike Wilson</strong></td>
<td>mike.wilson@example.com</td>
<td><span class="focus-badge focus-badge-info">Moderator</span></td>
<td><span class="focus-badge focus-badge-warning">Pending</span></td>
<td>Jan 10, 2026</td>
<td>
<button class="focus-btn focus-btn-sm focus-btn-secondary focus-mr-1">
<i class="fa fa-edit"></i>
</button>
<button class="focus-btn focus-btn-sm focus-btn-danger">
<i class="fa fa-trash"></i>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="focus-card-footer">
<div class="focus-flex focus-justify-between focus-items-center">
<div class="focus-text-secondary">Showing 1 to 3 of 1,234 entries</div>
<nav class="focus-pagination">
<a href="#" class="focus-page-item focus-page-link">Previous</a>
<a href="#" class="focus-page-item focus-page-link focus-active">1</a>
<a href="#" class="focus-page-item focus-page-link">2</a>
<a href="#" class="focus-page-item focus-page-link">3</a>
<a href="#" class="focus-page-item focus-page-link">Next</a>
</nav>
</div>
</div>
</div>
</div>
</main>
<script src="path/to/focus-ui.js"></script>
<script>
// Toggle sidebar on mobile
document.getElementById('sidebarToggle').addEventListener('click', function() {
document.getElementById('adminSidebar').classList.toggle('active');
});
</script>
</body>
</html>Customization Tips
Sidebar Styling
Change sidebar background colors in the custom CSS section. Update background: #34495e to match your brand colors.
Table Features
Enhance tables with .focus-table-striped, .focus-table-hover, or add dropdown filters and search functionality for better UX.
Status Badges
Modify badge colors using .focus-badge-success, .focus-badge-warning, .focus-badge-danger to represent different statuses.
Stats Cards
Add or remove stat cards in the grid. Use icons from FontAwesome and color classes like .focus-text-success for visual indicators.