Topbar bell trigger with an unread count and a popover feed: icon rows with title, description, timestamp, unread dots, a mark-all-read action, and a scrollable list. Manages read state internally.
The import and the props worth knowing about, in one place.
import { NotificationsMenu } from "@/components/beste/component/notifications-menu";
import { UserPlus } from "lucide-react";
<NotificationsMenu
notifications={[
{
id: "1",
title: "New customer signed up",
description: "Amara joined the Scale plan.",
time: "2m ago",
icon: UserPlus,
unread: true,
},
]}
onSelect={(id) => console.log("open:", id)}
onMarkAllRead={() => console.log("all read")}
/>Every one of these is in the component already. They are listed because a props table cannot mention a gesture, so nothing else on this page can tell you they exist.
| Enter / Space | Open the panel from the bell. |
|---|---|
| Arrow keys | Move through the notifications. |
| Escape | Close and put focus back on the bell. |
| Mark all as read | Clears every unread mark at once and calls `onMarkAllRead`; the badge on the bell goes with them. |
Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
notifications* | NotificationItem[] | — | |
onSelect | (id: string) => void | — | |
onMarkAllRead | () => void | — | |
align | "start" | "center" | "end" | — | |
className | string | — |