Notifications Menu

Features

• Bell trigger with a live unread-count badge and a pulsing ping ring while unread items exist
• Menu-button pattern with aria-haspopup, aria-expanded and aria-controls
• Data-driven activity feed rendered from a NOTIFICATIONS array in js/data.js
• Initial-disc avatars rotating through four reserved accent hues — fully asset-free
• Unread rows carry an azure wash and a pulsing dot animated with transform and opacity only
• Real "Mark all read" action that clears unread state and updates the badge count
• All/Unread filter as menuitemradio pills with a live unread counter
• Clicking an unread row marks just that notification as read
• Empty state ("You are all caught up") when the Unread filter has nothing left
• Scrollable feed with scrollbar-width: thin and pinned header/footer bands
• Full roving keyboard navigation with Arrow, Home, End, Enter, Escape and Tab
• Focus restoration after every re-render (filter switch, mark read, mark all)
• Fully respects prefers-reduced-motion

Accessibility

Menu button

The bell trigger uses aria-haspopup="menu", aria-expanded and aria-controls

Menu semantics

The panel uses role="menu"; rows and actions use role="menuitem", filters use role="menuitemradio" with aria-checked

Unread announcement

The trigger aria-label reports the live unread count; each row label appends ", unread" while unread

Roving focus

Items use tabindex="-1" and receive focus as the active index moves, surviving re-renders

Focus return

Closing with Enter or Escape returns focus to the trigger

Decorative markup

Avatars, dots, icons and the badge carry aria-hidden="true" — state lives in labels

Focus indicators

:focus-visible with --ring outline on all interactive elements

Reduced motion

prefers-reduced-motion: reduce disables the ping and all transitions

Customise it with AI

Open Notifications Menu in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the dropdown menu is regenerated against your tokens. Take the HTML, CSS, JS and React source with you, or pull it into your repo from Claude Code, Cursor or Codex over MCP.