UserMenu

UserMenu wraps Avatar + DropdownMenu so the account surface stays consistent across product apps. Pass an items array of UserMenuItem entries.

#Default usage

<UserMenu
  email="frogg@example.com"
  items={[
    { label: "Profile", href: "/profile" },
    { label: "Settings", href: "/settings" },
    { label: "Sign out", destructive: true }
  ]}
  name="Wandi Frogg"
/>

#Import

import { UserMenu, type UserMenuItem } from "@froggdesign/enter-ui-react";

#Accessibility

The trigger is a real <button>; the menu uses DropdownMenu so keyboard navigation, focus trap, and arrow-key wrapping inherit Radix mechanics. The trigger announces the user name through aria-label when no visible label is rendered.

#API

• name, email: shown in trigger and menu header.
• src / fallback: avatar image source and fallback initials override.
• items: each item supports label, optional href or onSelect, icon, shortcut, and destructive.

#Styling

Every exported component accepts className. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.