bootstrap 5 dashboard layout with sidebar and top navbar
hunzala
Created Nov 01, 2025
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
<script type="module" src="https://cdnjs.cloudflare.com/ajax/libs/ionicons/7.1.0/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://cdnjs.cloudflare.com/ajax/libs/ionicons/7.1.0/ionicons/ionicons.js"></script>
<!-- Top Navbar -->
<nav class="top-navbar">
<button class="sidebar-toggle" onclick="toggleSidebar()">
<ion-icon name="menu"></ion-icon>
</button>
<a href="#" class="navbar-brand">
<ion-icon name="layers"></ion-icon>
Dashboard
</a>
<div class="navbar-search">
<input type="text" placeholder="Search...">
<ion-icon name="search" class="search-icon"></ion-icon>
</div>
<div class="navbar-actions">
<button class="navbar-icon-btn">
<ion-icon name="notifications"></ion-icon>
<span class="notification-badge">5</span>
</button>
<button class="navbar-icon-btn">
<ion-icon name="mail"></ion-icon>
<span class="notification-badge">3</span>
</button>
<div class="user-avatar">JD</div>
</div>
</nav>
<!-- Sidebar -->
<aside class="sidebar" id="sidebar">
<div class="sidebar-menu">
<div class="menu-section">
<div class="menu-section-title">Main Menu</div>
<a href="#" class="menu-item active">
<ion-icon name="home"></ion-icon>
<span class="menu-item-text">Dashboard</span>
</a>
<a href="#" class="menu-item">
<ion-icon name="bar-chart"></ion-icon>
<span class="menu-item-text">Analytics</span>
</a>
<a href="#" class="menu-item">
<ion-icon name="people"></ion-icon>
<span class="menu-item-text">Users</span>
<span class="menu-badge">24</span>
</a>
<a href="#" class="menu-item">
<ion-icon name="briefcase"></ion-icon>
<span class="menu-item-text">Projects</span>
</a>
<a href="#" class="menu-item">
<ion-icon name="document-text"></ion-icon>
<span class="menu-item-text">Reports</span>
</a>
</div>
<div class="menu-section">
<div class="menu-section-title">Applications</div>
<a href="#" class="menu-item">
<ion-icon name="mail"></ion-icon>
<span class="menu-item-text">Messages</span>
<span class="menu-badge">3</span>
</a>
<a href="#" class="menu-item">
<ion-icon name="calendar"></ion-icon>
<span class="menu-item-text">Calendar</span>
</a>
<a href="#" class="menu-item">
<ion-icon name="folder"></ion-icon>
<span class="menu-item-text">Files</span>
</a>
<a href="#" class="menu-item">
<ion-icon name="cart"></ion-icon>
<span class="menu-item-text">Orders</span>
</a>
</div>
<div class="menu-section">
<div class="menu-section-title">Settings</div>
<a href="#" class="menu-item">
<ion-icon name="person"></ion-icon>
<span class="menu-item-text">Profile</span>
</a>
<a href="#" class="menu-item">
<ion-icon name="settings"></ion-icon>
<span class="menu-item-text">Settings</span>
</a>
<a href="#" class="menu-item">
<ion-icon name="help-circle"></ion-icon>
<span class="menu-item-text">Help & Support</span>
</a>
<a href="#" class="menu-item">
<ion-icon name="log-out"></ion-icon>
<span class="menu-item-text">Logout</span>
</a>
</div>
</div>
</aside>
<!-- Sidebar Overlay for Mobile -->
<div class="sidebar-overlay" id="sidebarOverlay" onclick="closeSidebar()"></div>
<!-- Main Content -->
<main class="main-content" id="mainContent">
<!-- Page Header -->
<div class="page-header">
<h1>Welcome Back, John!</h1>
<p>Here's what's happening with your projects today</p>
</div>
<!-- Stats Grid -->
<div class="stats-grid">
<div class="stat-card">
<div class="stat-header">
<div class="stat-icon primary">
<ion-icon name="people"></ion-icon>
</div>
<div class="stat-change up">+12%</div>
</div>
<div class="stat-value">2,543</div>
<div class="stat-label">Total Users</div>
</div>
<div class="stat-card">
<div class="stat-header">
<div class="stat-icon success">
<ion-icon name="trending-up"></ion-icon>
</div>
<div class="stat-change up">+8%</div>
</div>
<div class="stat-value">$45,678</div>
<div class="stat-label">Revenue</div>
</div>
<div class="stat-card">
<div class="stat-header">
<div class="stat-icon warning">
<ion-icon name="cart"></ion-icon>
</div>
<div class="stat-change down">-3%</div>
</div>
<div class="stat-value">1,234</div>
<div class="stat-label">Orders</div>
</div>
<div class="stat-card">
<div class="stat-header">
<div class="stat-icon danger">
<ion-icon name="bar-chart"></ion-icon>
</div>
<div class="stat-change up">+15%</div>
</div>
<div class="stat-value">89.5%</div>
<div class="stat-label">Growth Rate</div>
</div>
</div>
<!-- Content Cards Row -->
<div class="row g-4">
<div class="col-lg-8">
<div class="content-card">
<h4>Recent Activity</h4>
<div class="activity-item">
<div class="activity-icon">
<ion-icon name="person-add"></ion-icon>
</div>
<div class="activity-content">
<div class="activity-title">New user registered</div>
<div class="activity-time">2 minutes ago</div>
</div>
</div>
<div class="activity-item">
<div class="activity-icon">
<ion-icon name="cart"></ion-icon>
</div>
<div class="activity-content">
<div class="activity-title">New order received (#1234)</div>
<div class="activity-time">15 minutes ago</div>
</div>
</div>
<div class="activity-item">
<div class="activity-icon">
<ion-icon name="checkmark-circle"></ion-icon>
</div>
<div class="activity-content">
<div class="activity-title">Project milestone completed</div>
<div class="activity-time">1 hour ago</div>
</div>
</div>
<div class="activity-item">
<div class="activity-icon">
<ion-icon name="mail"></ion-icon>
</div>
<div class="activity-content">
<div class="activity-title">New message from support team</div>
<div class="activity-time">3 hours ago</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="content-card">
<h4>Quick Actions</h4>
<div class="d-grid gap-3">
<button class="btn btn-primary">
<ion-icon name="add-circle"></ion-icon>
Create New Project
</button>
<button class="btn btn-outline-primary">
<ion-icon name="person-add"></ion-icon>
Invite Team Member
</button>
<button class="btn btn-outline-primary">
<ion-icon name="document-text"></ion-icon>
Generate Report
</button>
</div>
</div>
</div>
</div>
</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
* {
font-family: 'Roboto', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #f8f9fa;
}
/* Top Navbar */
.top-navbar {
background: white;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
position: fixed;
top: 0;
left: 0;
right: 0;
height: 70px;
z-index: 1000;
display: flex;
align-items: center;
padding: 0 25px;
transition: all 0.3s ease;
}
.navbar-brand {
font-size: 1.5rem;
font-weight: 700;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
background-clip: text;
text-decoration: none;
display: flex;
align-items: center;
gap: 10px;
margin-right: 30px;
}
.navbar-brand ion-icon {
font-size: 32px;
color: #667eea;
}
.sidebar-toggle {
background: transparent;
border: none;
font-size: 24px;
color: #2c3e50;
cursor: pointer;
padding: 8px;
border-radius: 8px;
transition: all 0.3s ease;
margin-right: 20px;
}
.sidebar-toggle:hover {
background: #f8f9fa;
}
.navbar-search {
flex: 1;
max-width: 500px;
position: relative;
}
.navbar-search input {
width: 100%;
padding: 10px 45px 10px 20px;
border: 2px solid #e0e0e0;
border-radius: 50px;
transition: all 0.3s ease;
}
.navbar-search input:focus {
outline: none;
border-color: #667eea;
}
.search-icon {
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
color: #7f8c8d;
font-size: 20px;
}
.navbar-actions {
display: flex;
align-items: center;
gap: 15px;
margin-left: auto;
}
.navbar-icon-btn {
width: 40px;
height: 40px;
border-radius: 50%;
background: #f8f9fa;
border: none;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
}
.navbar-icon-btn:hover {
background: #667eea;
color: white;
}
.navbar-icon-btn ion-icon {
font-size: 20px;
}
.notification-badge {
position: absolute;
top: -5px;
right: -5px;
background: #f5576c;
color: white;
width: 20px;
height: 20px;
border-radius: 50%;
font-size: 11px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
}
.user-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
cursor: pointer;
transition: all 0.3s ease;
}
.user-avatar:hover {
transform: scale(1.1);
}
/* Sidebar */
.sidebar {
position: fixed;
left: 0;
top: 70px;
bottom: 0;
width: 260px;
background: white;
box-shadow: 2px 0 10px rgba(0,0,0,0.1);
overflow-y: auto;
transition: all 0.3s ease;
z-index: 999;
}
.sidebar.collapsed {
width: 80px;
}
.sidebar::-webkit-scrollbar {
width: 6px;
}
.sidebar::-webkit-scrollbar-thumb {
background: #667eea;
border-radius: 10px;
}
.sidebar-menu {
padding: 20px 0;
}
.menu-section {
margin-bottom: 30px;
}
.menu-section-title {
font-size: 11px;
text-transform: uppercase;
color: #7f8c8d;
font-weight: 600;
padding: 0 20px;
margin-bottom: 10px;
letter-spacing: 0.5px;
}
.sidebar.collapsed .menu-section-title {
opacity: 0;
height: 0;
overflow: hidden;
}
.menu-item {
display: flex;
align-items: center;
padding: 12px 20px;
color: #2c3e50;
text-decoration: none;
transition: all 0.3s ease;
position: relative;
gap: 15px;
}
.menu-item ion-icon {
font-size: 22px;
flex-shrink: 0;
}
.menu-item-text {
font-weight: 500;
font-size: 15px;
white-space: nowrap;
}
.sidebar.collapsed .menu-item-text {
opacity: 0;
width: 0;
overflow: hidden;
}
.menu-item:hover {
background: rgba(102, 126, 234, 0.1);
color: #667eea;
}
.menu-item.active {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
.menu-item.active::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background: white;
}
.menu-badge {
margin-left: auto;
background: #f5576c;
color: white;
padding: 3px 10px;
border-radius: 12px;
font-size: 11px;
font-weight: 600;
}
.sidebar.collapsed .menu-badge {
display: none;
}
/* Main Content */
.main-content {
margin-left: 260px;
margin-top: 70px;
padding: 30px;
transition: all 0.3s ease;
min-height: calc(100vh - 70px);
}
.main-content.expanded {
margin-left: 80px;
}
/* Dashboard Cards */
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 25px;
margin-bottom: 30px;
}
.stat-card {
background: white;
padding: 25px;
border-radius: 15px;
box-shadow: 0 2px 10px rgba(0,0,0,0.08);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.stat-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}
.stat-card::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 100px;
height: 100px;
background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
border-radius: 50%;
transform: translate(30%, -30%);
}
.stat-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 15px;
}
.stat-icon {
width: 50px;
height: 50px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
color: white;
}
.stat-icon.primary { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.stat-icon.success { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); }
.stat-icon.warning { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); }
.stat-icon.danger { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
.stat-change {
font-size: 14px;
font-weight: 600;
padding: 4px 10px;
border-radius: 20px;
}
.stat-change.up {
background: #d4edda;
color: #155724;
}
.stat-change.down {
background: #f8d7da;
color: #721c24;
}
.stat-value {
font-size: 2rem;
font-weight: 700;
color: #2c3e50;
margin-bottom: 5px;
}
.stat-label {
font-size: 14px;
color: #7f8c8d;
font-weight: 500;
}
/* Content Card */
.content-card {
background: white;
border-radius: 15px;
padding: 25px;
box-shadow: 0 2px 10px rgba(0,0,0,0.08);
margin-bottom: 25px;
}
.content-card h4 {
font-size: 1.3rem;
font-weight: 700;
color: #2c3e50;
margin-bottom: 20px;
}
/* Page Header */
.page-header {
margin-bottom: 30px;
}
.page-header h1 {
font-size: 2rem;
font-weight: 700;
color: #2c3e50;
margin-bottom: 5px;
}
.page-header p {
color: #7f8c8d;
margin: 0;
}
/* Responsive */
@media (max-width: 768px) {
.sidebar {
transform: translateX(-100%);
}
.sidebar.show {
transform: translateX(0);
}
.main-content {
margin-left: 0;
}
.navbar-search {
display: none;
}
.stats-grid {
grid-template-columns: 1fr;
}
.top-navbar {
padding: 0 15px;
}
}
/* Overlay for mobile */
.sidebar-overlay {
display: none;
position: fixed;
top: 70px;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.5);
z-index: 998;
}
.sidebar-overlay.show {
display: block;
}
/* Recent Activity */
.activity-item {
display: flex;
gap: 15px;
padding: 15px 0;
border-bottom: 1px solid #e0e0e0;
}
.activity-item:last-child {
border-bottom: none;
}
.activity-icon {
width: 40px;
height: 40px;
border-radius: 50%;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
display: flex;
align-items: center;
justify-content: center;
color: white;
flex-shrink: 0;
}
.activity-content {
flex: 1;
}
.activity-title {
font-weight: 600;
color: #2c3e50;
margin-bottom: 3px;
}
.activity-time {
font-size: 13px;
color: #7f8c8d;
}
function toggleSidebar() {
const sidebar = document.getElementById('sidebar');
const mainContent = document.getElementById('mainContent');
const overlay = document.getElementById('sidebarOverlay');
if (window.innerWidth <= 768) {
sidebar.classList.toggle('show');
overlay.classList.toggle('show');
} else {
sidebar.classList.toggle('collapsed');
mainContent.classList.toggle('expanded');
}
}
function closeSidebar() {
const sidebar = document.getElementById('sidebar');
const overlay = document.getElementById('sidebarOverlay');
sidebar.classList.remove('show');
overlay.classList.remove('show');
}
// Close sidebar when window is resized to desktop
window.addEventListener('resize', () => {
if (window.innerWidth > 768) {
closeSidebar();
}
});
Comments (0)
Login to leave a comment
Login
No comments yet. Be the first!