Topbar account menu: avatar trigger with name and email, dropdown with icon items, keyboard shortcuts, and a destructive sign-out row. Compact avatar-only mode for dense headers.
The import and the props worth knowing about, in one place.
import { UserMenu } from "@/components/beste/component/user-menu";
import { LogOut, Settings } from "lucide-react";
<UserMenu
user={{ name: "Jordan Ellis", email: "[email protected]" }}
items={[
{ id: "settings", label: "Settings", icon: Settings, shortcut: "⌘S" },
{ id: "logout", label: "Log out", icon: LogOut, destructive: true },
]}
onSelect={(id) => console.log("selected:", id)}
/>Every one of these is in the component already. They are listed because a props table cannot mention a gesture, so nothing else on this page can tell you they exist.
| Enter / Space | Open the menu from the trigger. |
|---|---|
| Arrow keys | Move through the items; separators and the header are skipped. |
| Type a letter | Jump to the next item starting with it. |
| Escape | Close and put focus back on the trigger. |
Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
user* | UserMenuUser | — | |
items* | UserMenuItem[] | — | |
onSelect | (id: string) => void | — | |
align | "start" | "center" | "end" | — | |
compact | boolean | — | Hide the name/email column and show only the avatar (for dense topbars) |
className | string | — |
| Actions | ||||||
|---|---|---|---|---|---|---|
A Amara Okafor[email protected] | Scale | Active | $4,820 | Jan 4, 2026 | ||
D Diego Santos[email protected] | Starter | Trial | $0 | Feb 18, 2026 | ||
P Priya Nair[email protected] | Growth | Active | $2,140 | Nov 22, 2025 | ||
T Tom Fischer[email protected] | Starter | Churned | $380 | Aug 9, 2025 | ||
L Lena Björk[email protected] | Scale | Active | $6,390 | Mar 2, 2026 | ||
M Marcus Reed[email protected] | Starter | Trial | $0 | Feb 27, 2026 |
8 row(s)