Blocks
UserMenu
A sidebar/navbar-footer trigger showing the current user's avatar and name, opening a menu with a built-in presence status switcher and custom actions like settings or sign out.
<UiUserMenu />Options
One block per prop — what it does, and what it looks like set.
First name
firstName is the given name, shown as the first half of the display name and used for the first of the avatar's fallback initials. On its own it's enough for a menu that only ever refers to the person informally.
Last name
lastName is the family name. It joins firstName for the display name and contributes the second fallback initial, so the avatar reads “JD” rather than just “J”.
Avatar src
avatarSrc is the image the avatar loads. It falls back to the initials built from firstName and lastName when the URL is missing or fails, which is the same chain Avatar uses — so a broken image never leaves an empty circle.
Description
description is the secondary line under the name — a role, a team, an account. Leave it out while status is bound and the current status's label takes that slot instead, so the line is never empty.
Status
status is the presence badge on the avatar. Bind it with v-model:status rather than passing it one way — that's what turns on the built-in switcher row inside the menu, letting the person change their own presence without you writing the item.
Statuses
statuses replaces the options the built-in switcher offers. The default set is Online / Away / Busy / Do not disturb / Offline; narrow it when only some of those make sense in your product, since every entry still has to be one of the five presence values the badge can paint.
Items
items replaces the default “Sign out” with your own groups of actions, in the same shape DropdownMenu takes.
Variant
variant is how much the trigger asserts itself — the same three weights TeamSwitcher takes, so a sidebar's header and its footer stay in step. It defaults to ghost here: a footer already sits on the sidebar's own card, and a second surface inside it just adds edges. subtle and soft are for a menu standing on its own.
subtle
soft
ghost
State
state matches a parent Sidebar's state slot prop — pass collapsed and the name and description drop away, leaving just the avatar.
API Reference
Generated from the component's source — props, slots and emits as the component actually declares them.
Props
stringstringstring"online" | "away" | "busy" | "dnd" | "offline"StatusOption[]The built-in Online / Away / Busy / Do not disturb / Offline set.DropdownMenuItem[][]A single "Sign out" item that emits `sign-out`."subtle" | "soft" | "ghost"'ghost'"expanded" | "collapsed"'expanded'Emits
update:status[value: PresenceStatus]sign-out[]Types
type PresenceStatus = "online" | "away" | "busy" | "dnd" | "offline";type Variant = "subtle" | "soft" | "ghost";interface StatusOption {
label: string;
value: PresenceStatus;
}interface DropdownMenuItem {
label?: string;
/**
* The row's icon: an icon name, or `{ name, color, fill }` to also tint just the icon
* (independent of `color`, which tints the whole row) or render its filled variant.
*/
icon?: string | MenuItemIcon;
status?: "online" | "offline" | "away" | "dnd" | "busy";
avatar?: {
src?: string;
alt?: string;
firstName?: string;
lastName?: string;
status?: "online" | "offline" | "away" | "dnd" | "busy";
shape?: "circle" | "square";
};
badge?: {
text?: number | string;
color?: "primary" | "secondary" | "success" | "warning" | "error" | "info" | "pending" | "neutral";
};
kbds?: Array<string | { value?: string }>;
type?: "link" | "label" | "separator" | "checkbox";
color?: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "pending" | "neutral";
checked?: boolean;
disabled?: boolean;
onSelect?: (e: Event) => void;
onUpdateChecked?: (checked: boolean) => void;
children?: DropdownMenuItem[] | DropdownMenuItem[][];
class?: any;
to?: string;
target?: string;
}