Notification Center

A bell trigger with an unread badge that opens a panel of grouped, actionable notifications — the pattern nearly every multi-user app needs. It manages read / unread state, an optional type filter, time- or type-grouping, an empty state, and optimistic realtime insertion. Read changes emit events (and mirror the unread count to a hidden input), so wiring it to Livewire is one line.

#The Bell

Closed by default, the bell shows the live unread count and announces it to screen readers ("Notifications, 3 unread"). Click it to open the panel.

<x-wirekit::notification-center :items="[
    ['id' => 1, 'type' => 'mention', 'title' => 'Alex mentioned you in #general', 'timeLabel' => '2m ago', 'read' => false],
    ['id' => 2, 'type' => 'comment', 'title' => 'New comment on the Q3 roadmap', 'timeLabel' => '1h ago', 'read' => false],
    ['id' => 3, 'type' => 'system', 'title' => 'Your export is ready', 'timeLabel' => 'Yesterday', 'read' => true],
]" />

#Grouped Panel

group-by="time" buckets items under each item's group label. Click the bell to open the panel, then a notification to mark it read — or use Mark all read.

<x-wirekit::notification-center
    group-by="time"
    :items="[
        ['id' => 1, 'type' => 'mention', 'title' => 'Alex mentioned you', 'body' => 'in #general', 'timeLabel' => '2m ago', 'read' => false, 'group' => 'Today', 'href' => '#thread', 'actionLabel' => 'Open thread'],
        ['id' => 2, 'type' => 'comment', 'title' => 'New comment on the roadmap', 'timeLabel' => '1h ago', 'read' => false, 'group' => 'Today'],
        ['id' => 3, 'type' => 'system', 'title' => 'Your export is ready', 'timeLabel' => 'Yesterday', 'read' => true, 'group' => 'Earlier'],
        ['id' => 4, 'type' => 'mention', 'title' => 'Sam replied to your thread', 'timeLabel' => '2d ago', 'read' => true, 'group' => 'Earlier'],
    ]"
    see-all-href="#all"
/>

#Type Filters

Add filters for a single-select filter row (a radiogroup — arrow keys move and select) that narrows the list by notification type.

<x-wirekit::notification-center
    filters
    :items="[
        ['id' => 1, 'type' => 'mention', 'title' => 'Alex mentioned you', 'timeLabel' => '2m ago', 'read' => false],
        ['id' => 2, 'type' => 'comment', 'title' => 'New comment on the roadmap', 'timeLabel' => '1h ago', 'read' => false],
        ['id' => 3, 'type' => 'comment', 'title' => 'Jordan commented on Budget', 'timeLabel' => '3h ago', 'read' => true],
        ['id' => 4, 'type' => 'mention', 'title' => 'Sam replied to your thread', 'timeLabel' => '2d ago', 'read' => true],
    ]"
/>

#Empty State

With no notifications, the panel shows a friendly empty state.

<x-wirekit::notification-center :items="[]" empty-text="You're all caught up" />

#Livewire & Realtime

Bind read-state changes to Livewire, and optionally let Laravel Echo push new items in via a window event:

{{-- 1. Seed from the server; listen for read-state events --}}
<x-wirekit::notification-center
    :items="$this->notifications"
    group-by="time"
    realtime-event="notification"
    x-on:notification-read="$wire.markRead($event.detail.id)"
    x-on:notification-read-all="$wire.markAllRead()"
/>

// 2. Server side — mark the Laravel notification read
public function markRead(string $id): void
{
    auth()->user()->notifications()->find($id)?->markAsRead();
}

public function markAllRead(): void
{
    auth()->user()->unreadNotifications->markAsRead();
}

// 3. Push a new notification in from Echo (optimistic prepend + unread bump)
Echo.private(`App.Models.User.${userId}`)
    .notification((n) => {
        window.dispatchEvent(new CustomEvent('notification', {
            detail: { id: n.id, type: n.type, title: n.title, timeLabel: 'just now' },
        }));
    });

The center also emits notification-new when a realtime item arrives, and mirrors the live unread count to a hidden input when you pass a name — so a plain wire:model="unreadCount" works too.

#Notification Item Shape

Clicking any row marks it read and dispatches a bubbling notification-action event carrying { id, href } — listen for it to open a detail panel, route through your SPA navigation, or call a Livewire action:

<x-wirekit::notification-center
    :items="$items"
    x-on:notification-action="$wire.openNotification($event.detail.id)"
/>

#Props

#Accessibility

• The bell's accessible name carries the unread count in words ("3 unread"), so the state never depends on the badge color alone. Unread items also pair the dot with an "Unread." prefix in each item's aria-label.
• The panel is a role="dialog" labeled by its title; Escape closes it and returns focus to the bell. The scrollable list is a labeled role="region" with tabindex="0" and a focus ring (WCAG 2.1.1).
• The type filter is a role="radiogroup" of role="radio" buttons with aria-checked + roving tabindex — arrow keys move and select, wrapping at the ends.
• Each notification is ONE keyboard-operable control — a real link when it carries href (native navigation + middle-click), a button otherwise. The actionLabel hint is part of the row, never a nested control.

#Keyboard Interaction

#Design Tokens

#Customization

Override the grouping and filter defaults via config/wirekit.php:

'components' => [
    'notification-center' => [
        'group-by' => 'time',
        'filters' => true,
    ],
],

#Further Reading

• WAI-ARIA Authoring Practices — Dialog (Modal)
• Laravel — Database Notifications
• Laravel Echo — Receiving broadcasts