Profile Dropdown Menu

Features

• Profile trigger button in a fixed header bar that opens the dropdown panel; every bar item sits in a 32px slot on one 36px rhythm, with an even 8px inset
• Animated unread badge on the messages icon: pops in once, then a soft ring pulse every 2.8s (static under reduced motion)
• Hover plate: one highlight glides between rows (240ms expo-out); each row's ink lights as the plate arrives, delayed by distance; red-tinted on sign-out; follows keyboard focus, never lit by a click-open
• Identity header menuitem: current account's avatar, name, email, and labeled presence dot
• Quick action menu items with Tabler icons and keycap shortcut hints (one key per character)
• What's new discovery item (Tabler speakerphone) with a green dot + label marker
• Switch-account list of the other accounts only, with a trailing switch arrow revealed on hover/focus
• Account switching updates the identity header and trigger avatar in place and keeps the menu open
• Integral Dark Mode toggle row with a switch and moon/sun icon swap, grouped above sign-out
• Sign out action row with an error-tinted destructive hover
• Staggered, interruption-safe menu-open entrance (12ms per row)
• Roving keyboard navigation (Arrow keys, Home, End, Enter/Space, Escape)
• Accessible: ARIA roles, focus-visible indicators, reduced-motion support
• Responsive: panel spans the viewport gutters on mobile (< 480px)

Accessibility

Trigger button

aria-haspopup="true", aria-expanded toggled

Menu container

role="menu" on the action list, aria-label on the <nav>

Menu items

role="menuitem" with tabindex="-1"

Account radiogroup

role="radiogroup" with aria-label, items have role="radio" and aria-checked

Theme toggle

role="switch" with aria-checked on the toggle row, kept in sync by updateThemeToggles(); the inner checkbox is aria-hidden so only one switch is exposed

Roving focus

Arrow keys, Home, and End move focus across menu items, the toggle row, accounts, and sign-out

Focus restoration

switchAccount() re-renders and returns focus to the selected account row

Focus indicators

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

Reduced motion

prefers-reduced-motion: reduce disables all animations

Escape key

Closes dropdown and returns focus to trigger

Unread badge

Visual count is aria-hidden; an sr-only "3 unread messages" carries it

Keycaps

Nested <kbd> per key, so the combination reads as one shortcut

Customise it with AI

Open Profile Dropdown 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.