Skip to content
Twentyfirst UIPro

User Menu

Navigation · UserMenu, Card, Menu, Avatar

View as Markdown

The signed-in account at the foot of a sidebar: avatar, name and email, opening a menu with profile, settings and sign-out.

  • items are Menu items (icons, shortcuts, "-" separators, danger).
  • compact shows only the avatar, with the name as its accessible label; use it in a collapsed sidebar (footer={({ collapsed }) => <UserMenu compact={collapsed} … />}).
  • The menu opens above the trigger by default (side="top"); use side="bottom" at the top of a page.

Props

UserMenu

PropTypeNotes
namestringRequired
email?string
avatar?stringPicture URL; initials otherwise.
items?(MenuItem | "-")[]The menu: profile, settings, sign out …
compact?booleanOnly the avatar (a collapsed sidebar).
side?"top" | "bottom"Where the menu opens (default `top`, for the foot of a sidebar).
className?stringExtra class on the root element.
style?CSSPropertiesInline style on the root element.

Card

PropTypeNotes
title?string
description?string
meta?string[]
corner?ReactNode
status?ReactNode
actions?ReactNode[]
tint?Tint | "surface"
onClick?() => void
children?ReactNode
eyebrow?ReactNode
surface?Surface`"glass"`: translucent glass over what is behind (maps, 3D, video, photos); `"solid"` opts out inside a glass `UIProvider`.
className?stringExtra class on the root element.
style?CSSPropertiesInline style on the root element.

Menu

PropTypeNotes
items(MenuItem | "-")[]Required
label?stringAccessible name of the menu.
autoFocus?booleanFocus the first item on mount (menus opened from a button or the keyboard).
onClose?() => voidCalled after an item runs, and on Escape, so the owner can close the menu.
className?stringExtra class on the root element.
style?CSSPropertiesInline style on the root element.

Avatar

PropTypeNotes
namestringRequired
src?string
size?number
tint?Tint | "surface-sunken"
className?stringExtra class on the root element.
style?CSSPropertiesInline style on the root element.