About this snippet

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.

Size
3.1 KB
Uses
HTML, CSS, JavaScript
Loads
Nothing external
Views
534

Collections

Related snippets

<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>
.notification-container {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  position: relative;
  display: inline-block;
  margin: 50px 300px;
}
.bell-icon {
  position: relative;
  cursor: pointer;
  color: #374151;
}
.badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background: #ef4444;
  color: white;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 10px;
  border: 2px solid #fff;
}
.notif-dropdown {
  display: none;
  position: absolute;
  right: -10px;
  top: 40px;
  width: 320px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.1);
  border: 1px solid #f3f4f6;
  z-index: 100;
  overflow: hidden;
  animation: slideDown 0.2s ease;
}
.notif-dropdown.show {
  display: block;
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}
.notif-header {
  padding: 15px;
  border-bottom: 1px solid #f3f4f6;
  display: flex;
  justify-content: space-between;
  font-weight: 600;
  font-size: 0.95rem;
}
.notif-header a {
  font-size: 0.8rem;
  color: #3b82f6;
  text-decoration: none;
}
.notif-item {
  display: flex;
  gap: 12px;
  padding: 15px;
  border-bottom: 1px solid #f9fafb;
  transition: background 0.2s;
  cursor: pointer;
}
.notif-item:hover {
  background: #f9fafb;
}
.notif-item.unread {
  background: #eff6ff;
}
.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 0.8rem;
  font-weight: 600;
  flex-shrink: 0;
}
.content p {
  margin: 0 0 4px;
  font-size: 0.9rem;
  color: #374151;
}
.time {
  font-size: 0.75rem;
  color: #9ca3af;
}
function toggleNotifs() {
  document.getElementById("notifDropdown").classList.toggle("show");
}
Esc
↑↓ moveEnter select

Start from a template

Open an .html file, or HTML, CSS, JS, Markdown, Less or TypeScript files. You can also drop them here. Styles and scripts go into their panes.

Share

Source





  
Keyboard shortcuts

  




  

    
Save