Project Gallery
Explore Well design Dashboard with Navbar in detail
2
/2
100%
100%
Project Overview
Well design Dashboard with Navbar
Project Description
This dashboard features a modern responsive navbar that replaces the traditional sidebar, ensuring smooth navigation across all devices. The layout is fully responsive, adapting seamlessly from mobile to desktop screens.
It includes stylish gradient dashboard cards that highlight key statistics at a glance, along with interactive charts powered by Chart.js to visualize revenue, product performance, and traffic trends.
An activity feed provides real-time updates with icons and timestamps, keeping users informed about recent actions. The clean and professional UI is enhanced with smooth transitions and subtle hover effects, delivering a modern and engaging user experience
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard with Navbar</title>
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark sticky-top">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<i class="fas fa-chart-line"></i>
DashboardPro
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" href="#"><i class="fas fa-home me-1"></i> Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fas fa-analytics me-1"></i> Analytics</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fas fa-table me-1"></i> Reports</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fas fa-users me-1"></i> Users</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fas fa-cog me-1"></i> Settings</a>
</li>
</ul>
<div class="d-flex">
<div class="dropdown">
<a href="#" class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown">
<i class="fas fa-user-circle me-1"></i> John Doe
</a>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="#"><i class="fas fa-user me-2"></i> Profile</a></li>
<li><a class="dropdown-item" href="#"><i class="fas fa-cog me-2"></i> Settings</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#"><i class="fas fa-sign-out-alt me-2"></i> Logout</a></li>
</ul>
</div>
</div>
</div>
</div>
</nav>
<!-- Main Content -->
<div class="container-fluid main-content">
<!-- Page Header -->
<div class="row mb-4">
<div class="col-12">
<div class="d-flex justify-content-between align-items-center">
<h1 class="display-4 fw-bold">Dashboard</h1>
<button class="btn btn-primary"><i class="fas fa-download me-2"></i> Generate Report</button>
</div>
<p class="text-muted">Welcome to your dashboard. Here's what's happening today.</p>
</div>
</div>
<!-- Stats Cards -->
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="card stats-card stats-card-1">
<div class="card-body">
<div class="d-flex justify-content-between align-items-center">
<div>
<h5 class="card-title">Revenue</h5>
<h2 class="card-text">$24,820</h2>
<p><i class="fas fa-arrow-up me-1"></i> 18.2% increase</p>
</div>
<div class="stats-icon">
<i class="fas fa-dollar-sign"></i>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="card stats-card stats-card-2">
<div class="card-body">
<div class="d-flex justify-content-between align-items-center">
<div>
<h5 class="card-title">Users</h5>
<h2 class="card-text">4,390</h2>
<p><i class="fas fa-arrow-up me-1"></i> 8.7% increase</p>
</div>
<div class="stats-icon">
<i class="fas fa-users"></i>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="card stats-card stats-card-3">
<div class="card-body">
<div class="d-flex justify-content-between align-items-center">
<div>
<h5 class="card-title">Conversion</h5>
<h2 class="card-text">3.28%</h2>
<p><i class="fas fa-arrow-down me-1"></i> 1.5% decrease</p>
</div>
<div class="stats-icon">
<i class="fas fa-chart-pie"></i>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="card stats-card stats-card-4">
<div class="card-body">
<div class="d-flex justify-content-between align-items-center">
<div>
<h5 class="card-title">Sessions</h5>
<h2 class="card-text">29,418</h2>
<p><i class="fas fa-arrow-up me-1"></i> 12.4% increase</p>
</div>
<div class="stats-icon">
<i class="fas fa-chart-line"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Charts and Activity -->
<div class="row mt-4">
<div class="col-lg-8">
<div class="card">
<div class="card-header d-flex justify-content-between align-items-center">
<span>Revenue Overview</span>
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">Day</button>
<button type="button" class="btn btn-sm btn-outline-secondary active">Week</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Month</button>
</div>
</div>
<div class="card-body">
<div class="chart-container">
<canvas id="revenueChart"></canvas>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="card">
<div class="card-header">
Recent Activity
</div>
<div class="card-body">
<ul class="activity-feed">
<li>
<div class="activity-badge bg-primary">
<i class="fas fa-user"></i>
</div>
<div>
<h6>New user registered</h6>
<p class="text-muted">John Doe joined the system</p>
<small>2 minutes ago</small>
</div>
</li>
<li>
<div class="activity-badge bg-success">
<i class="fas fa-dollar-sign"></i>
</div>
<div>
<h6>New sale</h6>
<p class="text-muted">$245 order was placed</p>
<small>45 minutes ago</small>
</div>
</li>
<li>
<div class="activity-badge bg-info">
<i class="fas fa-comment"></i>
</div>
<div>
<h6>New comment</h6>
<p class="text-muted">Sarah commented on a product</p>
<small>1 hour ago</small>
</div>
</li>
<li>
<div class="activity-badge bg-warning">
<i class="fas fa-exclamation"></i>
</div>
<div>
<h6>Server alert</h6>
<p class="text-muted">High CPU usage detected</p>
<small>3 hours ago</small>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Additional Content -->
<div class="row mt-4">
<div class="col-lg-6">
<div class="card">
<div class="card-header">
Top Products
</div>
<div class="card-body">
<div class="chart-container">
<canvas id="productsChart"></canvas>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card">
<div class="card-header">
Traffic Sources
</div>
<div class="card-body">
<div class="chart-container">
<canvas id="trafficChart"></canvas>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap & Chart.js -->
</body>
</html>CSS
<style>
:root {
--primary-color: #4361ee;
--secondary-color: #3f37c9;
--success-color: #4cc9f0;
--warning-color: #f72585;
--info-color: #4895ef;
--dark-color: #2b2d42;
--light-color: #f8f9fa;
--sidebar-width: 250px;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f8f9fa;
color: #333;
overflow-x: hidden;
}
/* Navbar styling */
.navbar {
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
padding: 0.8rem 1rem;
}
.navbar-brand {
font-weight: 700;
color: white !important;
display: flex;
align-items: center;
}
.navbar-brand i {
font-size: 1.8rem;
margin-right: 10px;
}
.nav-link {
color: rgba(255, 255, 255, 0.85) !important;
font-weight: 500;
padding: 0.5rem 1rem;
transition: all 0.3s;
border-radius: 4px;
margin: 0 2px;
}
.nav-link:hover, .nav-link.active {
color: white !important;
background-color: rgba(255, 255, 255, 0.15);
}
/* Main content */
.main-content {
margin-top: 20px;
padding: 20px;
}
/* Card styling */
.card {
border: none;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
transition: transform 0.3s, box-shadow 0.3s;
margin-bottom: 20px;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}
.card-header {
background-color: white;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
font-weight: 600;
padding: 15px 20px;
border-radius: 10px 10px 0 0 !important;
}
/* Stats cards */
.stats-card {
color: white;
}
.stats-card-1 {
background: linear-gradient(135deg, #4361ee, #3a0ca3);
}
.stats-card-2 {
background: linear-gradient(135deg, #f72585, #b5179e);
}
.stats-card-3 {
background: linear-gradient(135deg, #4cc9f0, #4895ef);
}
.stats-card-4 {
background: linear-gradient(135deg, #7209b7, #560bad);
}
.stats-icon {
font-size: 2.5rem;
opacity: 0.8;
}
/* Chart container */
.chart-container {
position: relative;
height: 300px;
}
/* Activity feed */
.activity-feed {
list-style: none;
padding: 0;
}
.activity-feed li {
padding: 15px 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
display: flex;
align-items: flex-start;
}
.activity-feed li:last-child {
border-bottom: none;
}
.activity-badge {
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 15px;
flex-shrink: 0;
}
/* Responsive adjustments */
@media (max-width: 992px) {
.navbar-nav {
flex-direction: row;
flex-wrap: wrap;
}
.nav-item {
margin-bottom: 5px;
}
}
@media (max-width: 768px) {
.card-body {
padding: 15px;
}
.display-4 {
font-size: 2.5rem;
}
}
</style>JavaScript
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Revenue Chart
const revenueCtx = document.getElementById('revenueChart').getContext('2d');
const revenueChart = new Chart(revenueCtx, {
type: 'line',
data: {
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
datasets: [{
label: 'Revenue',
data: [12500, 19000, 18000, 22000, 21000, 24500, 27500],
borderColor: '#4361ee',
backgroundColor: 'rgba(67, 97, 238, 0.1)',
fill: true,
tension: 0.4
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: false
}
},
scales: {
y: {
beginAtZero: true,
grid: {
drawBorder: false
}
},
x: {
grid: {
display: false
}
}
}
}
});
// Products Chart
const productsCtx = document.getElementById('productsChart').getContext('2d');
const productsChart = new Chart(productsCtx, {
type: 'bar',
data: {
labels: ['Product A', 'Product B', 'Product C', 'Product D', 'Product E'],
datasets: [{
label: 'Sales',
data: [125, 180, 150, 220, 170],
backgroundColor: [
'rgba(67, 97, 238, 0.8)',
'rgba(247, 37, 133, 0.8)',
'rgba(76, 201, 240, 0.8)',
'rgba(114, 9, 183, 0.8)',
'rgba(58, 12, 163, 0.8)'
],
borderRadius: 5
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: false
}
},
scales: {
y: {
beginAtZero: true,
grid: {
drawBorder: false
}
},
x: {
grid: {
display: false
}
}
}
}
});
// Traffic Chart
const trafficCtx = document.getElementById('trafficChart').getContext('2d');
const trafficChart = new Chart(trafficCtx, {
type: 'doughnut',
data: {
labels: ['Direct', 'Social', 'Referral', 'Organic'],
datasets: [{
data: [35, 25, 20, 20],
backgroundColor: [
'#4361ee',
'#f72585',
'#4cc9f0',
'#7209b7'
],
borderWidth: 0
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
cutout: '70%',
plugins: {
legend: {
position: 'bottom'
}
}
}
});
// Navbar active state
const navLinks = document.querySelectorAll('.nav-link');
navLinks.forEach(link => {
link.addEventListener('click', function() {
navLinks.forEach(item => item.classList.remove('active'));
this.classList.add('active');
});
});
});
</script>