Skip to content

Notifications · Reference

Notification Menu

A backend-neutral notification popover with English/French defaults, arbitrary locale packs, unread state, and inbox/archive views.

Last updated September 28, 2026

Overview

notification-menu provides backend-neutral notification presentation and interactions. It can present inbox records from the recommended @krak-stack/notifications package or from an application-owned compatibility store. The component itself never fetches, persists, or authorizes records.

The consumer owns trusted user and tenant scope, HTTP and atom integration, mutations, invalidation, navigation, localized notification content, and branding. The component receives already-authorized notifications and reports IDs to onMarkRead and onArchive. English and French menu chrome is built in. Pass locale explicitly and add any language through the locale-keyed messages map.

Install

shell
bunx shadcn@latest add @krak-stack/notification-menu

Usage

tsx
import { NotificationMenu } from "@/services/notification/client";

<NotificationMenu
  locale={locale}
  messages={{ es: { archiveAll: "Archivar todo" } }}
  notifications={notifications}
  onMarkRead={(notificationIds) => client.markRead({ notificationIds })}
  onArchive={(notificationIds) => client.archive({ notificationIds })}
  onNavigate={(notification) => navigate({ href: notification.href })}
/>

Map durable package inbox records to NotificationItem only after the server has enforced recipient, organization, and workspace scope. Each item accepts id, title, optional description, createdAt, timestampLabel, href, readAt, and archivedAt. Opening the menu marks unread inbox IDs as read by default; set markReadOnOpen={false} to disable this behavior.

Use renderItem for custom item content and renderTrigger for custom trigger presentation. Never pass browser-supplied scope directly to backend list or mutation operations.

Dependencies
Packages and shadcn components required by this registry item.

Dependencies

Registry Dependencies