Overlays
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 />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.
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`."expanded" | "collapsed"'expanded'Emits
update:status[value: PresenceStatus]sign-out[]Types
type PresenceStatus = "online" | "away" | "busy" | "dnd" | "offline";interface StatusOption {
label: string;
value: PresenceStatus;
}interface DropdownMenuItem {
label?: string;
description?: string;
icon?: string;
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" | "neutral";
checked?: boolean;
disabled?: boolean;
onSelect?: (e: Event) => void;
onUpdateChecked?: (checked: boolean) => void;
children?: DropdownMenuItem[] | DropdownMenuItem[][];
class?: any;
to?: string;
target?: string;
}