Loading example…
Name, email and a UserAvatar in a button. Accepts a ref and every button prop, so it works as a dropdown trigger.
pnpm dlx shadcn@latest add @gdop-ui/profile-menuimport { ProfileMenu } from "@/components/gdop-ui/profile-menu";
export function Example() {
return <ProfileMenu name="Abebe Kebede" email="abebe.kebede@example.gov" />;
}The dropdown example uses the shadcn dropdown-menu component: npx shadcn@latest add dropdown-menu
Name and email beside a colored avatar.
It forwards its ref and props, so Base UI's render prop can turn it into a menu trigger.
| Name | Type | Default | Description |
|---|---|---|---|
name* | string | - | Full name. Shown in the menu and used for the avatar. |
email* | string | - | Shown under the name. Also the default color seed. |
className | string | - | Applied to the button. |
type | "button" | "submit" | "reset" | "button" | Defaults to button so it never submits a surrounding form. |
...props | button props | - | Everything a button accepts, including ref and disabled, so it can be a menu trigger. |