∞ forever components

Product Flows

Profile Menu

A user account chip that opens a dropdown on a loop — staggering in Profile, Settings, Billing and Sign out, with an org switcher row and a presence dot that cycles from online to away.

cssmedium complexitymoderate motion

Open on the canvas to copy the code → Free account · 3 copies a day · membership goes unlimited

Live demo — the real component, running in a sandbox. One self-contained HTML file, zero dependencies. Open it on the canvas →
Worth keeping? Votes steer what gets built next — sign in to cast one, free to read

When to use it

App headers, dashboard top bars, account and settings entry points, or any SaaS shell that needs a user profile dropdown pattern.

When not to

When you need a live, click-driven menu with real navigation and focus handling, or a full settings page — this is a looping presentational demo.

Working with an AI agent

Every component ships agent-ready metadata. An example instruction for this one:

Edit the items array (label + SVG icon path) and the chip/head identity (avatar initials, name, email) plus the org row to set your own account and menu; the Sign out item carries the sep+danger class. Tune the loop and presence order via the seq array (open/away flags and dur values). Re-theme to light by setting --pro-bg:#f6f8fa; --pro-surface:#ffffff; --pro-border:rgba(0,0,0,.08); --pro-text:#1f2328; --pro-muted:#59636e (keep --pro-accent), and update the catalog bg field to match. Theme: dark tokens live in :root, the light variant in :root[data-theme="light"]; ?theme=light or a {type:'forever:theme'} postMessage switches at runtime.

Safe to edit

  • theme tokens (:root --pro-bg, --pro-surface, --pro-border, --pro-text, --pro-muted, --pro-accent)
  • user identity (chip and head avatar initials MK, name Maya Kessler, email maya@northwind.io)
  • menu items (items array: label + icon path; Sign out carries the sep+danger class)
  • organisation row (.pfm-logo initials, .pfm-oname, .pfm-oplan)
  • loop timing + presence order (seq array open/away flags and dur values)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • :root --pro-* token block (renaming breaks the shared pro theming API)
  • role=img + aria-label on .pfm-menu
  • IIFE wrapper with "use strict"
  • prefers-reduced-motion early return to the open, populated online state
  • visibilitychange pause (running flag)
  • empty #forever-agent-meta placeholder as the last element
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • light re-theme via the --pro-* block; catalog bg/accent describe the dark default
  • the open, away then close sequence is a scripted demo loop, not a real click-driven menu
  • presence status and account/org data are invented placeholders, not wired to a live session

profile-menudropdownaccountuser-menuavatarpresenceorg-switchersaas

More Product Flows components

  • File Upload DropzoneA file upload dropzone: files drop into a dashed area one at a time and fill a circular progress ring from 0 to 100 percent, then flip to a success check…