User Menu · paneui

Installation

pnpm dlx shadcn@latest add @paneui/user-menu

Usage

import { UserMenu } from "@/components/ui/user-menu"

<UserMenu name="Dana Chen" email="[email protected]">
  <MenuItem>Profile</MenuItem>
  <MenuSeparator />
  <MenuItem variant="destructive">Sign out</MenuItem>
</UserMenu>

Examples

Compact

In a sidebar

Put it in SidebarFooter; collapsed shows only the avatar in the icon rail. The menu opens upward by default (side="top").

API Reference

Built on the Menu primitive. Only the props this library adds or changes are listed; everything else passes through.

UserMenu

Also accepts every prop of Menu.Trigger.

name*: string; Shown and used for initials.
email: string; Second line and the menu's first label.
image: string; Avatar photo URL.
collapsed= false: boolean; Avatar only.
variant= "row": "row" | "compact"; Full row or avatar button.
side / align= "top" / "start": Menu side / align; Menu position.

Prop	Type	Default	Description
name*	string	—	Shown and used for initials.
email	string	—	Second line and the menu's first label.
image	string	—	Avatar photo URL.
collapsed	boolean	false	Avatar only.
variant	"row" \| "compact"	"row"	Full row or avatar button.
side / align	Menu side / align	"top" / "start"	Menu position.