Notification Panels
Dropdown panels, side panels and toast notification stacks.
Bell Notification Dropdown
Notifications 3 new
Sarah commented on your post
2 minutes ago
Payment received — $249.00
15 minutes ago
Storage is 90% full
1 hour ago
<div class="uk-notif-wrap">
<button class="uk-notif-bell">
<i class="fas fa-bell"></i>
<span class="uk-notif-bell-badge">3</span>
</button>
<div class="uk-notif-panel">
<div class="uk-notif-head">
<div>Notifications <span class="uk-notif-head-count">3 new</span></div>
<button class="uk-notif-head-action">Mark all read</button>
</div>
<div class="uk-notif-list">
<div class="uk-notif-item unread">
<div class="uk-notif-icon"><i class="fas fa-comment"></i></div>
<div class="uk-notif-body">
<div class="uk-notif-title">Sarah commented on your post</div>
<div class="uk-notif-time">2 minutes ago</div>
</div>
</div>
</div>
<div class="uk-notif-foot">
<a href="#">View all notifications</a>
</div>
</div>
</div>
<style>
.uk-notif-wrap { position: relative; display: inline-block; }
.uk-notif-bell {
position: relative;
width: 44px; height: 44px;
border-radius: 50%;
background: #fff;
border: 1px solid #e2e8f0;
color: #475569;
font-size: 1rem;
cursor: pointer;
}
.uk-notif-bell:hover { background: #f1f5f9; }
.uk-notif-bell-badge {
position: absolute;
top: -4px; right: -4px;
background: #dc2626;
color: #fff;
font-size: 0.65rem;
font-weight: 700;
min-width: 18px;
height: 18px;
padding: 0 4px;
border-radius: 999px;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid #fff;
}
.uk-notif-panel {
position: absolute;
top: calc(100% + 8px);
right: 0;
width: 340px;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 0.85rem;
box-shadow: 0 20px 40px rgba(11, 27, 47, 0.12);
overflow: hidden;
z-index: 10;
}
.uk-notif-head {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.85rem 1rem;
border-bottom: 1px solid #e2e8f0;
}
.uk-notif-head-title { font-weight: 700; font-size: 0.88rem; color: #0b1b2f; }
.uk-notif-head-count {
background: #eef2f8;
color: #1e3a8a;
font-size: 0.65rem;
font-weight: 700;
padding: 2px 8px;
border-radius: 999px;
margin-left: 6px;
}
.uk-notif-head-action {
background: transparent;
border: 0;
color: #1e3a8a;
font-size: 0.75rem;
font-weight: 700;
cursor: pointer;
}
.uk-notif-list {
max-height: 320px;
overflow-y: auto;
}
.uk-notif-item {
display: flex;
gap: 0.75rem;
padding: 0.85rem 1rem;
border-bottom: 1px solid #f1f5f9;
cursor: pointer;
transition: background 0.15s;
text-align: left;
}
.uk-notif-item:last-child { border-bottom: 0; }
.uk-notif-item:hover { background: #f8fafc; }
.uk-notif-item.unread { background: #f8fafc; }
.uk-notif-icon {
width: 36px; height: 36px;
border-radius: 0.6rem;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.85rem;
flex-shrink: 0;
}
.uk-notif-body { flex: 1; min-width: 0; }
.uk-notif-title {
font-size: 0.82rem;
color: #0b1b2f;
line-height: 1.4;
}
.uk-notif-time {
font-size: 0.7rem;
color: #94a3b8;
margin-top: 2px;
}
.uk-notif-foot {
padding: 0.75rem 1rem;
border-top: 1px solid #e2e8f0;
text-align: center;
}
.uk-notif-foot a {
font-size: 0.78rem;
font-weight: 700;
color: #1e3a8a;
text-decoration: none;
}
</style>
Inline Notifications
Success! Your changes have been saved.
Warning: Your trial ends in 3 days.
Error: Payment failed. Please update your card.
Did you know? You can schedule posts.
<div class="uk-notif-inline success">
<i class="fas fa-check-circle"></i>
<div><strong>Success!</strong> Your changes have been saved.</div>
<button class="uk-notif-inline-close"><i class="fas fa-times"></i></button>
</div>
<style>
.uk-notif-inline {
display: flex;
align-items: flex-start;
gap: 0.75rem;
padding: 0.75rem 1rem;
border-radius: 0.65rem;
font-size: 0.83rem;
border: 1px solid;
}
.uk-notif-inline > i { font-size: 1rem; flex-shrink: 0; margin-top: 1px; }
.uk-notif-inline > div { flex: 1; }
.uk-notif-inline-close {
background: transparent;
border: 0;
cursor: pointer;
color: inherit;
opacity: 0.6;
padding: 2px 4px;
}
.uk-notif-inline-close:hover { opacity: 1; }
.uk-notif-inline.success { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.uk-notif-inline.warning { background: #fef3c7; border-color: #fcd34d; color: #78350f; }
.uk-notif-inline.danger { background: #fee2e2; border-color: #fca5a5; color: #991b1b; }
.uk-notif-inline.info { background: #dbeafe; border-color: #93c5fd; color: #1e40af; }
</style>
Stacked Toast Notifications
New message
You have a new message from Sarah.
Project saved
Your changes are now live.
<div class="uk-notif-stack">
<div class="uk-notif-toast">
<div class="uk-notif-toast-icon"><i class="fas fa-envelope"></i></div>
<div class="uk-notif-toast-body">
<div class="uk-notif-toast-title">New message</div>
<div class="uk-notif-toast-desc">You have a new message from Sarah.</div>
</div>
<button class="uk-notif-toast-close"><i class="fas fa-times"></i></button>
</div>
</div>
<style>
.uk-notif-stack {
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.uk-notif-toast {
display: flex;
align-items: flex-start;
gap: 0.75rem;
padding: 0.85rem 1rem;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 0.85rem;
box-shadow: 0 10px 24px rgba(11, 27, 47, 0.08);
}
.uk-notif-toast-icon {
width: 36px; height: 36px;
border-radius: 0.6rem;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.85rem;
flex-shrink: 0;
}
.uk-notif-toast-body { flex: 1; min-width: 0; text-align: left; }
.uk-notif-toast-title {
font-size: 0.85rem;
font-weight: 700;
color: #0b1b2f;
}
.uk-notif-toast-desc {
font-size: 0.78rem;
color: #64748b;
margin-top: 2px;
}
.uk-notif-toast-close {
background: transparent;
border: 0;
color: #94a3b8;
cursor: pointer;
padding: 4px;
border-radius: 4px;
font-size: 0.75rem;
}
.uk-notif-toast-close:hover { background: #f1f5f9; color: #475569; }
</style>
Notification Side Panel
Notifications
Sarah Chen mentioned you in #design
2 min ago
System Backup completed successfully
1 hour ago
David Park started following you
3 hours ago
<div class="uk-notif-side">
<div class="uk-notif-side-head">
<h5><i class="fas fa-bell"></i> Notifications</h5>
<button class="uk-notif-side-close"><i class="fas fa-times"></i></button>
</div>
<div class="uk-notif-side-tabs">
<button class="uk-notif-side-tab active">All</button>
<button class="uk-notif-side-tab">Unread</button>
</div>
<div class="uk-notif-side-list">
<div class="uk-notif-side-item unread">
<div class="uk-notif-side-icon"><i class="fas fa-comment"></i></div>
<div class="uk-notif-side-body">
<div class="uk-notif-side-text"><strong>Sarah</strong> mentioned you</div>
<div class="uk-notif-side-time">2 min ago</div>
</div>
<div class="uk-notif-side-dot"></div>
</div>
</div>
<div class="uk-notif-side-foot">
<a href="#">View all →</a>
</div>
</div>
<style>
.uk-notif-side {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 1rem;
overflow: hidden;
}
.uk-notif-side-head {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 1.25rem;
border-bottom: 1px solid #e2e8f0;
}
.uk-notif-side-title {
font-size: 0.95rem;
font-weight: 800;
color: #0b1b2f;
margin: 0;
display: flex;
align-items: center;
gap: 0.5rem;
}
.uk-notif-side-close {
background: transparent;
border: 0;
color: #94a3b8;
cursor: pointer;
}
.uk-notif-side-tabs {
display: flex;
gap: 0.25rem;
padding: 0.65rem 1rem 0;
border-bottom: 1px solid #e2e8f0;
}
.uk-notif-side-tab {
padding: 0.45rem 0.85rem;
border: 0;
background: transparent;
font-size: 0.8rem;
font-weight: 600;
color: #64748b;
cursor: pointer;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
}
.uk-notif-side-tab.active {
color: #1e3a8a;
border-bottom-color: #1e3a8a;
}
.uk-notif-side-list { max-height: 320px; overflow-y: auto; }
.uk-notif-side-item {
display: flex;
gap: 0.75rem;
align-items: flex-start;
padding: 0.85rem 1rem;
border-bottom: 1px solid #f1f5f9;
position: relative;
cursor: pointer;
transition: background 0.15s;
}
.uk-notif-side-item:hover { background: #f8fafc; }
.uk-notif-side-item.unread { background: #f8fafc; }
.uk-notif-side-icon {
width: 36px; height: 36px;
border-radius: 0.6rem;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.85rem;
flex-shrink: 0;
}
.uk-notif-side-body { flex: 1; text-align: left; }
.uk-notif-side-text {
font-size: 0.82rem;
color: #0b1b2f;
line-height: 1.4;
}
.uk-notif-side-time {
font-size: 0.7rem;
color: #94a3b8;
margin-top: 2px;
}
.uk-notif-side-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: #1e3a8a;
margin-top: 6px;
flex-shrink: 0;
}
.uk-notif-side-foot {
padding: 0.75rem 1rem;
border-top: 1px solid #e2e8f0;
text-align: center;
}
.uk-notif-side-foot a {
font-size: 0.78rem;
font-weight: 700;
color: #1e3a8a;
text-decoration: none;
}
</style>
Toast with Action Button
Item moved to trash
You have 10 seconds to undo.
<div class="uk-toast-action">
<div class="uk-toast-action-icon"><i class="fas fa-undo"></i></div>
<div class="uk-toast-action-body">
<div class="uk-toast-action-title">Item moved to trash</div>
<div class="uk-toast-action-desc">You have 10 seconds to undo.</div>
</div>
<button class="uk-toast-action-btn">Undo</button>
<button class="uk-toast-action-close"><i class="fas fa-times"></i></button>
</div>
<style>
.uk-toast-action {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.85rem 1rem;
background: #0b1b2f;
color: #fff;
border-radius: 0.85rem;
box-shadow: 0 20px 40px rgba(11, 27, 47, 0.25);
}
.uk-toast-action-icon {
width: 36px; height: 36px;
border-radius: 0.6rem;
background: rgba(255,255,255,0.1);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.85rem;
flex-shrink: 0;
}
.uk-toast-action-body { flex: 1; min-width: 0; text-align: left; }
.uk-toast-action-title { font-size: 0.85rem; font-weight: 700; }
.uk-toast-action-desc { font-size: 0.72rem; opacity: 0.7; margin-top: 2px; }
.uk-toast-action-btn {
background: #1e3a8a;
color: #fff;
border: 0;
padding: 0.4rem 0.85rem;
border-radius: 0.4rem;
font-weight: 700;
font-size: 0.75rem;
cursor: pointer;
}
.uk-toast-action-btn:hover { background: #6366f1; }
.uk-toast-action-close {
background: transparent;
border: 0;
color: #94a3b8;
cursor: pointer;
padding: 4px;
}
.uk-toast-action-close:hover { color: #fff; }
</style>
Notification Center (Grouped)
Activity
5 new
Today
Sarah commented on Post #42
10 min ago
12 people liked your post
2 hr ago
Yesterday
David started following you
1 day ago
<div class="uk-ncenter">
<div class="uk-ncenter-head">
<div class="uk-ncenter-title">Activity</div>
<span class="uk-ncenter-badge">5 new</span>
</div>
<div class="uk-ncenter-section">
<div class="uk-ncenter-section-title">Today</div>
<div class="uk-ncenter-item">
<div class="uk-ncenter-icon"><i class="fas fa-comment"></i></div>
<div class="uk-ncenter-body">
<div class="uk-ncenter-text">Sarah commented on Post #42</div>
<div class="uk-ncenter-time">10 min ago</div>
</div>
</div>
</div>
</div>
<style>
.uk-ncenter {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 1rem;
overflow: hidden;
}
.uk-ncenter-head {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 1.25rem;
border-bottom: 1px solid #e2e8f0;
}
.uk-ncenter-title {
font-weight: 800;
color: #0b1b2f;
font-size: 0.95rem;
}
.uk-ncenter-badge {
background: #eef2f8;
color: #1e3a8a;
font-size: 0.68rem;
font-weight: 700;
padding: 3px 10px;
border-radius: 999px;
}
.uk-ncenter-section { padding: 0.5rem 0; }
.uk-ncenter-section-title {
font-size: 0.68rem;
font-weight: 700;
color: #94a3b8;
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 0.5rem 1.25rem 0.35rem;
}
.uk-ncenter-item {
display: flex;
gap: 0.75rem;
padding: 0.65rem 1.25rem;
cursor: pointer;
transition: background 0.15s;
text-align: left;
}
.uk-ncenter-item:hover { background: #f8fafc; }
.uk-ncenter-icon {
width: 34px; height: 34px;
border-radius: 0.55rem;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
flex-shrink: 0;
}
.uk-ncenter-body { flex: 1; min-width: 0; }
.uk-ncenter-text {
font-size: 0.83rem;
color: #0b1b2f;
}
.uk-ncenter-time {
font-size: 0.7rem;
color: #94a3b8;
margin-top: 2px;
}
</style>