Build the familiar bell icon with an unread count that opens a panel of notifications. Clicking a notification marks it as read and the badge updates automatically.
Runs entirely in your browser. Nothing is uploaded to any server.
People instantly understand a bell with a red count.
The badge and label always match the unread items.
aria-expanded, Escape to close and focus returns to the bell.
The bell is a real button with aria-expanded and aria-controls pointing at the panel. The panel is shown with opacity, visibility and a small transform, so it animates smoothly and stays out of the tab order while closed.
Unread items carry an is-unread class. The script counts them to update the badge and the accessible label of the bell, and hides the mark-all button once everything is read. When the list is empty, an "all caught up" message appears through a pure CSS :empty rule.
Hidden automatically with :empty when the count is zero.
Clicking anywhere else on the page closes the panel.
Switch to a dark panel that suits dark app headers.
Render the list items from your server or build them in JavaScript from an API response, then call the refresh function to update the badge.
Yes. Replace the button with class nc-link with an a element that has the same class and an href.
Send a request to your server inside the click handlers, or store read IDs in localStorage.
It is limited to the screen width minus 24px. If the bell is near the left edge, choose the left aligned option.
No. It is plain HTML, CSS and about 40 lines of JavaScript.
More free tools from My Panda Toolbox.