patterns

UserMenu

Top-bar account dropdown — circular avatar trigger, profile/settings entries, optional theme/language sub-menus, destructive sign-out at the bottom. Drop into the AppShell `topbarRight` slot.

Install

Pull this component (and its dependencies) straight into your app via the shadcn CLI:

npx shadcn@latest add https://design.oapps.io/r/user-menu.json

Or import from the workspace package:

import { UserMenu, UserMenuUser } from "@8maverik8/design";

Examples

Default

Click the avatar to open the menu. Wire `onSignOut` to your auth provider's sign-out call.

<UserMenu
  user={{ name: "Jane Doe", email: "jane@oapps.io" }}
  onSignOut={async () => { await signOut(); }}
>
  {/* Optional theme / language submenus go here */}
</UserMenu>

Guidelines

Pass theme/language sub-menus as `children` so the menu order stays consistent across products.
Render this anywhere except the topbar.Account menus belong in one fixed location; ad-hoc placement breaks user muscle memory.