Components
Loading preview...
Displays a menu to the user — such as a set of actions or functions — triggered by a button.
npx shadcn@latest add https://21st.dev/r/shadcn/context-menuimport { Avatar, AvatarFallback } from "@/components/ui/avatar";
import {
ContextMenu,
ContextMenuContent,
ContextMenuItem,
ContextMenuSeparator,
ContextMenuTrigger,
} from "@/components/ui/context-menu";
import {
Bell,
Bookmark,
Settings,
Edit,
ImageIcon,
Lock,
LogOut,
Pencil,
Share2,
User,
UserPlus,
Users,
} from "lucide-react";
function WithAvatar() {
return (
<ContextMenu>
<ContextMenuTrigger className="flex cursor-pointer items-center gap-2 p-4 text-xs">
<Avatar className="size-8">
<AvatarFallback>PJ</AvatarFallback>
</Avatar>
<span className="font-medium">Right Click Here</span>
</ContextMenuTrigger>
<ContextMenuContent className="w-64">
<ContextMenuItem>
<User className="mr-2 size-4" />
View Profile
</ContextMenuItem>
<ContextMenuItem>
<Edit className="mr-2 size-4" />
Edit Profile
</ContextMenuItem>
<ContextMenuItem>
<ImageIcon className="mr-2 size-4" />
Change Avatar
</ContextMenuItem>
<ContextMenuItem>
<Pencil className="mr-2 size-4" />
Update Bio
</ContextMenuItem>
<ContextMenuSeparator />
<ContextMenuItem>
<Bookmark className="mr-2 size-4" />
View Bookmarks
</ContextMenuItem>
<ContextMenuItem>
<Share2 className="mr-2 size-4" />
View Shared Bookmarks
</ContextMenuItem>
<ContextMenuSeparator />
<ContextMenuItem>
<UserPlus className="mr-2 size-4" />
Manage Followers
</ContextMenuItem>
<ContextMenuItem>
<Users className="mr-2 size-4" />
Manage Following
</ContextMenuItem>
<ContextMenuSeparator />
<ContextMenuItem>
<Settings className="mr-2 size-4" />
Account Settings
</ContextMenuItem>
<ContextMenuItem>
<Lock className="mr-2 size-4" />
Privacy Settings
</ContextMenuItem>
<ContextMenuItem>
<Bell className="mr-2 size-4" />
Notification Settings
</ContextMenuItem>
<ContextMenuSeparator />
<ContextMenuItem>
<LogOut className="mr-2 size-4" />
Logout
</ContextMenuItem>
</ContextMenuContent>
</ContextMenu>
);
}
export { WithAvatar }