AvatarMenu

AvatarMenu is an account popover. It has a profile header with a picture and name and a menu of actions below it.

Usage

Call Components.AvatarMenu with a scope and a table of properties:

C.AvatarMenu(scope, {
    Layer = overlayLayer,
    Target = avatarButton,
    Open = open,
    Name = "Ada Lovelace",
    Subtitle = "ada@example.com",
    Initials = "AL",
    Items = {
        { Text = "Account", Icon = "user" },
        { Text = "Sign out", Icon = "log-out", Color = "error" },
    },
    OnClose = function()
        open:set(false)
    end,
})

Properties

Name	Type	Required	Default	Description
Theme	ThemeRef		The contextual theme	Theme to use for this component instead of the one from Theme.Provide.
ZIndex	UsedAs<number>		-	Z index of the component.
Open	UsedAs<boolean>		-	Whether the menu is shown. Follows the state you pass.
Target	Instance		-	The element the menu is placed next to.
Sections	{ MenuSectionProps }		-	Groups of rows. See MenuSection.
MaxHeight	number		-	Largest height of the menu in pixels.
Image	string		-	Asset ID of the picture in the header.
Initials	string		"?"	Initials shown when there is no picture.
Name	UsedAs<string>		"Account"	Name in the header.
Subtitle	UsedAs<string>		-	Smaller text under the name.
Items	{ any }		-	Rows of the menu. See MenuButton.

Callbacks

Name	Description
OnClose: () -> ()	Runs when the user presses outside the menu or presses a row that closes it.

See also

• Popover
• Avatar