NotificationMenu

Domain

Bell icon button with unread count badge. Opens a dropdown panel showing notification items grouped by read/unread state with variant color dots, timestamps, and mark-all-read / view-all actions.

Preview

Code

<NotificationMenu
  items={[
    { id: 'n1', title: 'New comment on your post', description: 'Jane replied to your article.', timestamp: '2 min ago', read: false, variant: 'info' },
    { id: 'n2', title: 'Payment received', description: 'Invoice #1042 paid ($153.96).', timestamp: '1 hr ago', read: false, variant: 'success' },
    { id: 'n3', title: 'Storage limit at 90%', timestamp: '3 hr ago', read: false, variant: 'warning' },
    { id: 'n4', title: 'Deployment complete', timestamp: 'Yesterday', read: true, variant: 'success' },
  ]}
  onMarkAllRead={handleMarkAllRead}
  onViewAll={() => router.push('/notifications')}
/>

Preview

Code

<NotificationMenu items={[]} onViewAll={() => router.push('/notifications')} />

NotificationMenu

With unread notifications

Empty state

Navigation