UserMenu – Once UI

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 value="settings" fillWidth prefix={<Icon size="xs" onBackground="neutral-weak" name="settings" />} label="Settings" />
      <Option value="logout" fillWidth prefix={<Icon size="xs" onBackground="neutral-weak" name="logout" />} label="Log out" />
    </Column>
  }
/>

Handling a choice

onSelect gets the value of the Option picked from dropdown, by click or keyboard, and the menu closes. It is DropdownWrapper's onSelect, passed through.

onSelect

<UserMenu
  name="Lorant One"
  subline="Design Engineer"
  onSelect={(value) => (value === "logout" ? signOut() : router.push("/settings"))}
  dropdown={
    <Column gap="4" padding="4" minWidth={10}>
      <Option value="settings" label="Settings" />
      <Option value="logout" label="Log out" />
    </Column>
  }
/>

Loading state

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

<UserMenu loading />

API reference

	Type	Default
onSelect Called with the picked Option's value.	(value: string) => void	—
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	—