User menu

Prop-driven user-profile menu — avatar, name, email, dropdown actions.

Installation

$Terminal

npx shadcn@latest add https://sdk-components.thesqd.com/r/user-menu.json

Usage

Pass a `user` and an `items` array. Self-contained — no sidebar context required.

TSImport

import { UserMenu, type UserMenuItem } from "@/components/blocks/user-menu";

TSExample

import { BadgeCheckIcon, LogOutIcon } from "lucide-react";
import { UserMenu } from "@/components/blocks/user-menu";

export function Example() {
  return (
    <UserMenu
      user={{ name: "Kurt Cobain", email: "kurt@nirvana.com", initials: "KC" }}
      items={[
        { type: "item", label: "Account", icon: BadgeCheckIcon },
        { type: "separator" },
        { type: "item", label: "Log out", icon: LogOutIcon, destructive: true },
      ]}
    />
  );
}

Composition

Anatomy of the UserMenu block.

UserMenu (props)
├── user: { name, email?, avatarSrc?, initials? }
├── showHeader?: boolean              // include avatar+name card at top of menu (default: true)
├── side?: "top" | "bottom" | "left" | "right"   // dropdown anchor side (default: "top")
├── align?: "start" | "center" | "end"           // dropdown alignment (default: "start")
├── items: UserMenuItem[]
│   ├── { type: "item",      label, icon?, onClick?, disabled?, destructive? }
│   ├── { type: "separator" }
│   └── { type: "label",     content }
└── className?: string

Self-contained — no sidebar context required. Drop anywhere: a SidebarFooter,
a navbar, a settings page header.

Default

Avatar + name + email trigger with a chevron. Dropdown opens above the trigger by default — good for sidebar footers. Override with `side` / `align`.

Minimal

Hide the in-menu header with `showHeader={false}` when the trigger already carries the identity. Good for small menus with only a couple of actions.

Grouped sections

Use `{ type: "label" }` rows to group items under section headings (Account, Billing, etc.).

API Reference

Props for UserMenu and its item shape.

UserMenu

Prop	Type	Default	Description
`user`	{ name; email?; avatarSrc?; initials? }	—	User identity for the trigger badge and the optional menu header.
`items`	UserMenuItem[]	—	Array of menu rows (discriminated union of item / separator / label).
`showHeader`	boolean	true	Include a non-interactive user card at the top of the menu.
`side`	"top" \| "bottom" \| "left" \| "right"	"top"	Anchor side for the dropdown.
`align`	"start" \| "center" \| "end"	"start"	Anchor alignment along the side.
`className`	string	—	Extend the resolved trigger classes.

UserMenuItem

Prop	Type	Default	Description
`type`	"item" \| "separator" \| "label"	—	Discriminator. `item` is an actionable row.
`label`	ReactNode	—	Row label (item only).
`icon`	LucideIcon	—	Optional leading icon (item only).
`onClick`	() => void	—	Fires when the item is activated.
`destructive`	boolean	—	Renders the item in red tonal (log out, delete).
`disabled`	boolean	—	Disables the item.