UserMenu

Updated: May 9, 2025

The UserMenu component renders a user avatar and name, and opens a dropdown for settings or account-level actions when clicked or focused. It is built on top of DropdownWrapper and Usercomponents.

UserMenu

<UserMenu
  name="Lorant One"
  subline="Design Engineer"
  placement="right-end"
  avatarProps={{ src: "/images/avatar.jpg" }}
  dropdown={
    <Column gap="4" padding="4" minWidth={10}>
      <Option fillWidth prefix={<Icon size="xs" onBackground="neutral-weak" name="settings" />} label="Settings" />
      <Option fillWidth prefix={<Icon size="xs" onBackground="neutral-weak" name="logout" />} label="Log out" />
    </Column>
  }
/>

Loading state

You can show skeleton content while loading profile data by setting loading={true}.

Loading

<UserMenu loading />

API reference

Prop	Type	Default
selected Mark the trigger as active while the menu is open.	boolean	false
placement Which side the menu opens on.	toprightbottomlefttop-starttop-endright-startright-endbottom-startbottom-endleft-startleft-end	—
dropdown The menu contents.	React.ReactNode	—
className	string	—
style	React.CSSProperties	—
…and every UserProps prop	inherited	—
…and every DropdownWrapperProps prop	inherited	—
name	string	—
subline	ReactNode	—
avatarProps	AvatarProps	—
loading	boolean	false
minWidth	SpacingToken	—
maxWidth	SpacingToken	—
minHeight	SpacingToken	—

ComponentsUser

Edit this page on GitHub

Built with curiosity by Lorant One and the Design Engineers Club