Avatars
Where to Use Profile Dropdown in React Apps
Profile Dropdown is an account menu with liquid metal avatar, workspace actions, and sign out. SaaS chrome ships it when account, workspace, and logout need one predictable menu from the avatar.
Where teams use Profile Dropdown
Use case 1
App account menu
Standard header dropdown for profile, billing, and sign out. Liquid metal avatar keeps brand continuity with other chrome.
Use case 2
Workspace quick actions
Include switch workspace and invite members beside account links. Reduces trips into deep settings.
Use case 3
Admin impersonation exit
Support tools add end impersonation next to sign out. Clear placement prevents operators from logging out of the wrong session.
Use case 4
Consumer settings entry
Mobile web apps keep theme and privacy links in the same menu. Avatar header confirms the active identity.
Who it is for
Product engineers finishing account chrome with a cohesive profile menu.
Try Profile Dropdown on AkmanOS
Open the menu actions in the preview, then copy markdown into ChatGPT, Claude, or Cursor to wire Profile Dropdown to your session and workspace APIs.
Preview /preview/profile-dropdownMore in Avatars
- Liquid Metal AvatarPaper LiquidMetal ring avatar with sizes, image, and fallback. Explore real product surfaces for the Liquid Metal Avatar component — then open the live AkmanOS preview and copy production-ready source.
- Liquid Metal Profile ButtonProfile chip with liquid metal frame and avatar — preview mode skips navigation. Explore real product surfaces for the Liquid Metal Profile Button component — then open the live AkmanOS preview and copy production-ready source.
- Switch WorkspaceWorkspace switcher with avatar, title, animated dropdown, and add space. Explore real product surfaces for the Switch Workspace component — then open the live AkmanOS preview and copy production-ready source.