<NotificationsPanel> renders Pure Admin's .pa-notifications list in two modes: a dropdown panel (mounted beside a bell button) and a page view — a bare list
with optional bulk-select checkboxes and hover-revealed per-item actions.
Dropdown panel
The panel as it appears under the navbar bell. 2 unread.
Notifications
-
New comment on your post
Dale Cooper replied to "Damn fine coffee".
2 min ago -
Deployment succeeded
Build #482 shipped to production.
1 hour ago -
Storage almost full
You have used 92% of your plan quota.
3 hours ago -
Payment failed
We could not charge the card ending 4242.
Yesterday
Page view — with bulk-select + actions
Full-width list (isPageView) with selection checkboxes and per-item actions.
-
New comment on your post
Dale Cooper replied to "Damn fine coffee".
2 min ago -
Deployment succeeded
Build #482 shipped to production.
1 hour ago -
Storage almost full
You have used 92% of your plan quota.
3 hours ago -
Payment failed
We could not charge the card ending 4242.
Yesterday
Usage
Data
const items: NotificationItem[] = [
{
id: 1,
titleText: 'Deployment succeeded',
messageText: 'Build #482 shipped to production.',
timeText: '1 hour ago',
isUnread: true,
iconClass: 'fa-solid fa-circle-check',
iconVariant: 'success'
}
]; Dropdown panel
<NotificationsPanel
{items}
isOpen
titleText="Notifications"
onmarkallread={markAllRead}
/> Page view with actions
<NotificationsPanel {items} isPageView hasCheckboxes>
{#snippet itemActions(item)}
<Button variant="secondary" size="xs">Mark read</Button>
{/snippet}
</NotificationsPanel>