∞ forever components

Product Flows

Profile Menu

Simulated account menu with staggered rows and presence changes.

cssmedium complexitymoderate motionmobile-ready

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 →
1

When to use it

Product illustrations and onboarding.

When not to

Real navigation: no click actions or focus management.

Working with an AI agent

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

Edit identity, items and seq timing. Light tokens: --pro-bg:#f6f8fa; --pro-surface:#fff; --pro-border:rgba(0,0,0,.08); --pro-text:#1f2328; --pro-muted:#59636e; retain accent, update catalog bg. ?theme or forever:theme switches palettes.

Safe to edit

  • theme tokens (:root --pro-bg, --pro-surface, --pro-border, --pro-text, --pro-muted, --pro-accent)
  • identity and organisation markup
  • items labels and SVG paths; seq open/away/dur

Keep intact

  • IIFE wrapper; reduced-motion static state; hidden-page pause
  • Theme tokens, ?theme bootstrap and forever:theme listener
  • demo-v1 lifecycle: read __foreverPreview.demoEnabled; stop attract work on forever:interactive; preserve manual feedback
  • :root --pro-* token names; descriptive role=img and aria-label

Known limitations

  • Demo data; no backend integration
  • Instance-local values; remount resets values

profile-menudropdownaccountuser-menuavatarpresenceorg-switchersaas

More Product Flows components