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 a visually hidden "Unread." prefix inside the row.
• A row carries no aria-label — its accessible name is computed from what it shows, so a screen reader gets the title, the body and the relative time in the order they are read on screen, not the headline alone.
• The panel is a role="dialog" labeled by its title; Escape closes it and returns focus to the bell. The scrollable list carries tabindex="0" and a focus ring (WCAG 2.1.1) whether or not you set a title.
• The list becomes a screen-reader landmark only when you set title. It is then a role="region" named after it ("Alerts list"). Without one it stays a plain focusable scroller — the derived name would be identical on every unnamed center on the page, which axe reports as landmark-unique. The bell, the panel and the heading keep their "Notifications" default either way.
• 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