UserMenu

An avatar-triggered dropdown menu with user identity and account actions (profile, billing, settings, logout). Built on DropdownMenu and Avatar.

Anatomy

The trigger is an Avatarshowing the user's initials. The dropdown opens on click and displays: a header with name and email, then grouped menu items for profile, billing, settings, and a log out action.

Click the avatar →

Different Users

Pass any name, email, and initials. Initials are shown in the avatar fallback when no image is provided.

Alice Johnson

Bob Smith

Carol Davis

In a Navigation Bar

The UserMenu is typically placed at the end of a top navigation bar or in the footer of a sidebar.

My App
Page content

Design Guidelines

Do

  • Place at the top-right of the navigation. This is where users expect to find their account controls.
  • Show full name and email in the dropdown header. Users need to confirm which account they're signed in as.
  • Keep menu items to fewer than 6. Group by category (account actions / destructive actions) with a separator.

Don't

  • Don't put navigation items in the user menu. Page-level navigation belongs in the sidebar or main nav, not the account dropdown.
  • Don't skip the logout item. Users need a clear path to sign out, especially on shared devices.
  • Don't use only an icon without the dropdown header. The name and email in the header prevent confusion on multi-account setups.

Developer Reference

Props

  • name(optional, default: "User") — displayed in the dropdown label.
  • email(optional, default: "user@example.com") — displayed in the dropdown label below the name.
  • initials(optional, default: "U") — shown in the AvatarFallback.
  • onProfile / onBilling / onSettings / onLogout — click handlers for each menu item. Omitting a handler still renders the item.

Usage

import { OriginUiUserMenu } from "@/components/branding/origin-ui-user-menu"

<OriginUiUserMenu
  name="Mauricio Oliveda"
  email="mauricio@example.com"
  initials="MO"
  onProfile={() => router.push("/profile")}
  onBilling={() => router.push("/billing")}
  onSettings={() => router.push("/settings")}
  onLogout={() => signOut()}
/>