Avatar items

The DropdownMenu component supports avatar items using the DropdownMenu.AvatarItem component. This allows you to create items with avatars that can be used to represent users or other entities.

Properties

AvatarItem

The AvatarItem component is a specialized item that displays an avatar.

<DropdownMenu.AvatarItem
  src="/avatar.png"         // avatar image source
  title="Item title"        // title of the item
  rounded                   // [OPTIONAL] rounded avatar
  description="Description" // [OPTIONAL] description text
  label="Label"             // [OPTIONAL] right-aligned label
  shortcut="⌘K"             // [OPTIONAL] keyboard shortcut
  checkmark                 // [OPTIONAL] show checkmark icon
  className="my-class"      // [OPTIONAL] custom class
  disabled                  // [OPTIONAL] disable the item
  onSelect={onSelect}       // [OPTIONAL] event handler
>
  {/* Optional nested items for submenu */}
</DropdownMenu.AvatarItem>

Prop	Required	Default	Type
src	false		string
rounded	false	true	boolean
title	true		ReactNode
description	false		string
label	false		string
shortcut	false		string
checkmark	false	false	boolean
tag	false		TagProps
className	false		string
disabled	false	false	boolean
onSelect	false		(event: Event) => void
children	false		ReactNode