<div class="notification-container">
<div class="bell-icon" onclick="toggleNotifs()">
<svg viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
<span class="badge">3</span>
</div>
<div class="notif-dropdown" id="notifDropdown">
<div class="notif-header">Notifications <a href="#">Mark all as read</a></div>
<div class="notif-item unread">
<div class="avatar" style="background:#3b82f6">JD</div>
<div class="content">
<p><strong>John Doe</strong> commented on your post.</p>
<span class="time">2 mins ago</span>
</div>
</div>
<div class="notif-item unread">
<div class="avatar" style="background:#10b981">S</div>
<div class="content">
<p><strong>System</strong> update completed successfully.</p>
<span class="time">1 hour ago</span>
</div>
</div>
<div class="notif-item">
<div class="avatar" style="background:#ec4899">AL</div>
<div class="content">
<p><strong>Alice</strong> liked your photo.</p>
<span class="time">5 hours ago</span>
</div>
</div>
</div>
</div>
Back to Snippets
Notification Bell Dropdown CSS
Add a notification center to your header. This snippet features a bell icon with a red badge, which opens a sleek dropdown list of recent alerts when clicked or hovered.
442