Photonix UI - React Components, Templates & Figma Design System

UserMenu

Dropdown menu for user profile and settings.

Preview

Usage

import { UserMenu } from '@photonix/ultimate';
import { UserOutline as User, BoltOutline as Bolt, ExitOutline as Exit } from '@photonix/icons';

<UserMenu 
  userName="Jane Doe"
  userHandle="@jane"
  avatarSrc="..."
  actions={[
    { value: 'profile', label: 'Profile', icon: <User /> },
    { value: 'settings', label: 'Settings', icon: <Bolt />, divider: true },
    { value: 'logout', label: 'Logout', icon: <Exit /> }
  ]}
  onActionSelect={(val) => console.log(val)}
/>

Component API

UserMenu

Prop	Type	Default	Description
userName	`string`	`-`	User display name
userHandle	`string`	`-`	User handle/username (e.g.,
avatarSrc	`string`	`-`	URL of user avatar image
actions	`UserMenuAction[]`	`-`	Menu action items - same structure as DropdownListItem
onActionSelect	`((value: string) => void)`	`-`	Callback when an action is selected
onUserClick	`(() => void)`	`-`	Callback when user info section is clicked
className	`string`	`-`	Additional CSS class
style	`React.CSSProperties`	`-`	Additional inline styles

UserMenu

Preview

Component API

UserMenu

On this page