Notifications
A notification dropdown lets users check recent activity without leaving the page. A bell button with an unread count badge is the usual trigger, opening a compact feed of updates that users can scan and act on directly, whether that's accepting a follow request, jumping to a reply, or marking everything as read. The pattern fits anywhere users expect quick access to updates and alerts, from social apps to SaaS dashboards and messaging tools.
<button
type="button"
id="notifications-trigger"
class="btn btn-outline btn-icon"
aria-label="Open notifications"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M10.268 21a2 2 0 0 0 3.464 0"></path>
<path
d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"
></path></svg
><span class="btn-badge bg-destructive">3</span>
</button>
<div
class="popover w-84 gap-0 overflow-clip p-0"
data-sp-toggle="#notifications-trigger"
data-sp-placement="bottom-end"
>
<div class="item item-xs ps-3.5 pe-2">
<div class="item-content"><div class="item-title">Notifications</div></div>
<div class="item-actions">
<button
type="button"
id="notifications-menu"
class="btn btn-ghost btn-sm btn-icon"
aria-label="Notification options"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="12" cy="12" r="1"></circle>
<circle cx="19" cy="12" r="1"></circle>
<circle cx="5" cy="12" r="1"></circle>
</svg>
</button>
</div>
</div>
<div
class="dropdown w-52"
data-sp-toggle="#notifications-menu"
data-sp-placement="bottom-end"
>
<button class="dropdown-item" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M18 6 7 17l-5-5"></path>
<path d="m22 10-7.5 7.5L13 16"></path></svg
>Mark all read</button
><a class="dropdown-item" href="#"
><svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M15 3h6v6"></path>
<path d="M10 14 21 3"></path>
<path
d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"
></path></svg
>View all notifications</a
>
</div>
<div class="separator"></div>
<div
class="scroll-fade scrollbar-none max-h-80 overflow-y-auto p-1"
role="list"
>
<a href="#" class="item item-xs items-start" role="listitem"
><div class="item-media">
<span class="avatar avatar-lg"
><img
class="avatar-image"
src="https://images.unsplash.com/photo-1573497019236-17f8177b81e8?w=640&h=640&fit=facearea&facepad=3.2&auto=format&q=100&bg-remove=true&bg=e5e5e5"
alt="" /><span class="avatar-fallback">MO</span
><span class="avatar-badge bg-background shadow-sm text-rose-600"
><svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2.5"
stroke-linecap="round"
stroke-linejoin="round"
>
<path
d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"
></path></svg></span
></span>
</div>
<div class="item-content">
<div class="item-title">
<span
>Maya Okonkwo
<span class="font-normal text-muted-foreground"
>liked your photo</span
>
Golden hour in Lisbon</span
>
</div>
<div class="item-description">2 minutes ago</div>
</div>
<span
class="mt-1.5 size-2 shrink-0 rounded-full bg-blue-500"
aria-label="Unread"
></span></a
><a href="#" class="item item-xs items-start" role="listitem"
><div class="item-media">
<span class="avatar avatar-lg"
><img
class="avatar-image"
src="https://images.unsplash.com/photo-1513673054901-2b5f51551112?w=640&h=640&fit=facearea&facepad=3.2&auto=format&q=100&bg-remove=true&bg=e5e5e5"
alt="" /><span class="avatar-fallback">DR</span
><span class="avatar-badge bg-background shadow-sm text-blue-600"
><svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2.5"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"></path></svg></span
></span>
</div>
<div class="item-content">
<div class="item-title">
<span
>Devin Ross
<span class="font-normal text-muted-foreground"
>replied to your comment on</span
>
Weekly design critique</span
>
</div>
<div class="item-description">18 minutes ago</div>
</div>
<span
class="mt-1.5 size-2 shrink-0 rounded-full bg-blue-500"
aria-label="Unread"
></span
></a>
<div class="item item-xs items-start" role="listitem">
<div class="item-media">
<span class="avatar avatar-lg"
><img
class="avatar-image"
src="https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?w=640&h=640&fit=facearea&facepad=3.2&auto=format&q=100&bg-remove=true&bg=e5e5e5"
alt="" /><span class="avatar-fallback">PR</span
><span class="avatar-badge bg-background shadow-sm text-green-600"
><svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2.5"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
<circle cx="9" cy="7" r="4"></circle>
<line x1="19" x2="19" y1="8" y2="14"></line>
<line x1="22" x2="16" y1="11" y2="11"></line></svg></span
></span>
</div>
<div class="item-content">
<div class="item-title">
<span
>Priya Raman
<span class="font-normal text-muted-foreground"
>wants to follow you</span
></span
>
</div>
<div class="item-description">1 hour ago</div>
<div class="mt-1.5 flex gap-2">
<button class="btn btn-xs" type="button">Accept</button
><button class="btn btn-outline btn-xs" type="button">Decline</button>
</div>
</div>
<span
class="mt-1.5 size-2 shrink-0 rounded-full bg-blue-500"
aria-label="Unread"
></span>
</div>
<a href="#" class="item item-xs items-start" role="listitem"
><div class="item-media">
<span class="avatar avatar-lg"
><img
class="avatar-image"
src="https://images.unsplash.com/photo-1750390200293-92d5a788d3a2?w=640&h=640&fit=facearea&facepad=3&auto=format&q=100&bg-remove=true&bg=e5e5e5"
alt="" /><span class="avatar-fallback">TL</span
><span class="avatar-badge bg-background shadow-sm text-violet-600"
><svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2.5"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="12" cy="12" r="4"></circle>
<path
d="M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-4 8"
></path></svg></span
></span>
</div>
<div class="item-content">
<div class="item-title">
<span
>Theo Lindqvist
<span class="font-normal text-muted-foreground"
>mentioned you in</span
>
#launch-planning</span
>
</div>
<div class="item-description">Yesterday at 4:12 PM</div>
</div></a
><a href="#" class="item item-xs items-start" role="listitem"
><div class="item-media">
<span class="avatar avatar-lg"
><img
class="avatar-image"
src="https://images.unsplash.com/photo-1573496527892-904f897eb744?w=640&h=640&fit=facearea&facepad=3.2&auto=format&q=100&bg-remove=true&bg=e5e5e5"
alt="" /><span class="avatar-fallback">GA</span
><span class="avatar-badge bg-background shadow-sm text-amber-600"
><svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2.5"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="m17 2 4 4-4 4"></path>
<path d="M3 11v-1a4 4 0 0 1 4-4h14"></path>
<path d="m7 22-4-4 4-4"></path>
<path d="M21 13v1a4 4 0 0 1-4 4H3"></path></svg></span
></span>
</div>
<div class="item-content">
<div class="item-title">
<span
>Grace Adeyemi
<span class="font-normal text-muted-foreground"
>reposted your photo</span
>
Golden hour in Lisbon</span
>
</div>
<div class="item-description">Tuesday</div>
</div></a
><a href="#" class="item item-xs items-start" role="listitem"
><div class="item-media">
<span class="avatar avatar-lg"
><img
class="avatar-image"
src="https://images.unsplash.com/photo-1705645930353-0e335311ef20?w=640&h=640&fit=facearea&facepad=3.2&auto=format&q=100&bg-remove=true&bg=e5e5e5"
alt="" /><span class="avatar-fallback">LM</span
><span class="avatar-badge bg-background shadow-sm text-rose-600"
><svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2.5"
stroke-linecap="round"
stroke-linejoin="round"
>
<path
d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"
></path></svg></span
></span>
</div>
<div class="item-content">
<div class="item-title">
<span
>Luca Moretti
<span class="font-normal text-muted-foreground"
>liked your comment on</span
>
Weekly design critique</span
>
</div>
<div class="item-description">Monday</div>
</div></a
><a href="#" class="item item-xs items-start" role="listitem"
><div class="item-media">
<span class="avatar avatar-lg"
><img
class="avatar-image"
src="https://images.unsplash.com/photo-1752486268240-0507bb1ebc7e?w=640&h=640&fit=facearea&facepad=3.2&auto=format&q=100&bg-remove=true&bg=e5e5e5"
alt="" /><span class="avatar-fallback">CL</span
><span class="avatar-badge bg-background shadow-sm text-green-600"
><svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2.5"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
<circle cx="9" cy="7" r="4"></circle>
<line x1="19" x2="19" y1="8" y2="14"></line>
<line x1="22" x2="16" y1="11" y2="11"></line></svg></span
></span>
</div>
<div class="item-content">
<div class="item-title">
<span
>Camille Laurent
<span class="font-normal text-muted-foreground"
>started following you</span
></span
>
</div>
<div class="item-description">Last week</div>
</div></a
><a href="#" class="item item-xs items-start" role="listitem"
><div class="item-media">
<span class="avatar avatar-lg"
><img
class="avatar-image"
src="https://images.unsplash.com/photo-1634149134664-ca3598f29da5?w=640&h=640&fit=facearea&facepad=3.2&auto=format&q=100&bg-remove=true&bg=e5e5e5"
alt="" /><span class="avatar-fallback">ED</span
><span class="avatar-badge bg-background shadow-sm text-blue-600"
><svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2.5"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"></path></svg></span
></span>
</div>
<div class="item-content">
<div class="item-title">
<span
>Emilie Dahl
<span class="font-normal text-muted-foreground"
>commented on your photo</span
>
Golden hour in Lisbon</span
>
</div>
<div class="item-description">Last week</div>
</div></a
>
</div>
</div>Browse more dropdown examples.