Profile Dropdown

A user avatar trigger with name, role, and a dropdown of nav links and a sign-out action. Designed for top navigation bars and sidebars.

import { ProfileDropdown } from "@aetherstack/patterns"

Installation

terminal

npx aether-ui add profile-dropdown

Import

import.tsx

import { ProfileDropdown } from "@aetherstack/patterns"

Usage

profile-dropdown.tsx

import { ProfileDropdown } from "@aetherstack/patterns"

export function AppHeader() {
  return (
    <ProfileDropdown
      user={{
        name: "Alice Chen",
        email: "alice@example.com",
        avatarUrl: "/avatars/alice.png",
        role: "Admin",
      }}
      items={[
        { label: "Profile", href: "/profile" },
        { label: "Settings", href: "/settings" },
      ]}
      onSignOut={() => signOut()}
    />
  )
}

Props

Prop	Type	Default	Description
user*	{ name: string; email: string; avatarUrl?: string; role?: string }	—	User data shown in the trigger and at the top of the dropdown.
items*	{ label: string; href: string }[]	—	Navigation links rendered in the dropdown body.
onSignOut*	() => void	—	Called when the user clicks the sign-out item.
className	string	—	Additional classes on the trigger button.

* Required

Accessibility

→Avatar trigger uses aria-haspopup="menu" and aria-expanded.
→Dropdown uses role="menu"; each link is role="menuitem".
→User name and email in the header section are aria-hidden since they are decorative summaries.
→Escape closes the menu and returns focus to the trigger.