# Notification Bell Dropdown > A notification bell dropdown: an unread badge opens an inbox with All and Unread tabs, mark as read, dismiss and a rolling badge count. Canonical: https://gsapvault.com/ui-elements/notification-inbox-popover Live demo: https://gsapvault.com/demos/notification-inbox-popover/index.html | Property | Value | |----------|-------| | Type | ui-element | | Tier | paid | | Price | £5 | | Difficulty | intermediate | | Plugins | Flip | | Techniques | flip-layout, odometer-counter, stagger, tabs, keyboard-navigation, focus-management | | Uses Lenis | No | ## Lighthouse, as measured Google Lighthouse on the demo, 15 September 2026. A measurement of the demo as shipped, not a promise for your page. | Category | Score | |----------|-------| | Accessibility | 100 | | Best practices | 100 | No performance score is published: it depends on the deployment (server compression, caching, CDN, connection and device) rather than on the code, so measure it where it will live. ## Overview A notification inbox for a product header: a bell button with an unread count badge opens a 380px popover anchored under it, with All and Unread tabs, a Mark all as read action and a scrolling list of notifications. The panel lands first and its rows stagger in a frame later. Marking a row read fades its dot and, on the Unread tab, Flip-collapses the row while the others close the gap; dismissing slides it out the same way; a new notification Flip-inserts at the top. The badge rolls digit by digit like an odometer whenever the count changes. On a phone the popover becomes a full-width sheet from the top. One HTML file, one stylesheet, one script, vanilla JavaScript with GSAP and Flip, no framework, in light and dark themes on one data-variant attribute. ## Features - Bell trigger with aria-expanded and aria-controls; focus moves into the panel on open and back to the bell on Escape - All and Unread tabs on the tablist pattern, with a measured sliding indicator and arrow, Home and End keys - Mark as read, mark as unread and dismiss per row, plus Mark all as read, each reflowing the list with Flip - Odometer badge: every digit is a reel that rolls to its new value, including the carry from 9 to 10 - push() inserts a new notification at the top, rolls the badge and announces it in a polite live region - Empty state built from stroke icons with the line "You're all caught up" - Full-width sheet from the top on phones, modal there with a focus trap and scroll lock - Two themes, light and dark, on one set of custom properties ## Use Cases - Notification centre in the header of a web app or admin dashboard - Activity inbox for mentions, assignments, billing and security alerts - In-product announcements and release notes feed ## Vibe-Code Ready Setup This UI element includes `START-HERE-AI.md`, a product-specific copy-paste setup prompt for Cursor, Claude Code, ChatGPT, GitHub Copilot, Windsurf, and other coding assistants. It tells the assistant to inspect the existing stack, integrate the supplied files, preserve the design, scope selectors, retain accessibility and responsive behaviour, add framework-appropriate GSAP cleanup, and report what it tested. [How AI-assisted setup works](https://gsapvault.com/vibe-coding) ## How It Works ### Opening and closing The panel is shown with the hidden attribute and fades and settles in from its top-right corner, and stays focusable throughout so focus moves into it on the same frame. The visible rows stagger in 60ms later. Closing reverses it and sets hidden again in onComplete, so no invisible layer is left over the page. A press outside closes it without moving focus; Escape closes it and returns focus to the bell. ### The Flip reflow Every change to the list (switching tabs, marking a row read on the Unread tab, dismissing, a new arrival) records the rows and the scrolling body with Flip.getState, applies the change, then runs Flip.from with the rows positioned absolutely. Leaving rows fade or slide out where they were while the rest move up to close the gap, and the body tweens its height so the panel shrinks with them. Rows are never scaled, so their text never squashes. ### The odometer badge Each digit of the count is a column holding a reel of 0 to 9 twice over. A change rolls each reel to the new digit, and when a digit wraps (9 to 0 on the way up) it rolls on to the second copy and snaps back on complete, so the count always rolls in the direction it changed. Columns are added or removed from the left as the number of digits changes, and the count caps at 99+. ## Documentation How this UI element works and how it goes into a page. The reference you use once you own the files (worked examples, events, the programmatic API, the class list) ships with the download. ### What's Included - `index.html`: the demo page and the markup to copy - `assets/style.css`: component styles, plain CSS custom properties for every colour, radius and shadow - `assets/script.js`: readable, commented source with an `onReady` guard - **Layered open.** The panel lands first (opacity, 6px of travel and a 0.98 scale from its top-right corner), then its rows stagger in 60ms later. It is shown and hidden with the `hidden` attribute, so a closed inbox never leaves an invisible layer over the page. - **Flip reflow on every list change.** Switching tabs, marking a row read on the Unread tab, dismissing and a new arrival all record the rows with `Flip.getState`, apply the change and animate from the old layout. Leaving rows fade or slide out where they were while the rest close the gap; the list's height tweens with them. - **Odometer badge.** Each digit is a reel that rolls to its new value, and a carry (9 to 10) keeps rolling the same way. Caps at `99+`, hides at zero. - **Complete states.** Read, unread (toggle back per row), dismissed, Mark all as read (disabled at zero), a new notification pushed in, and an empty state built from stroke icons with "You're all caught up". - **Phone sheet.** At 560px and below the popover becomes a full-width sheet from the top, modal there: scrim, focus trap and scroll lock. - **ARIA.** `aria-expanded` / `aria-controls` on the trigger, `role="dialog"` on the panel, the `tablist` / `tab` / `tabpanel` pattern, a `list` of rows with real buttons, and a polite live region. ### Quick Start **1. Add to your ``:** _Code snippet omitted: it ships with the download._ **2. Add before the closing `` tag:** _Code snippet omitted: it ships with the download._ **3. Copy the component markup from `index.html` into your page.** It is everything inside `
`, plus the icon ``s it uses from the sprite at the top of ``. The script finds every `[data-inbox]` on the page and reads only `data-` hooks inside it: | Hook | On | |------|----| | `data-inbox` | The root. Positioned; the panel anchors to it | | `data-inbox-trigger` | The bell button | | `data-inbox-badge` | The badge (holds `.inbox__badge-digits`, filled by the script) | | `data-inbox-panel` | The popover; starts `hidden` | | `data-inbox-tab="all"` / `"unread"` | The two tabs | | `data-inbox-indicator` | The sliding underline | | `data-inbox-body` | The scrolling tab panel | | `data-inbox-list` | The `