Profile menu

Avatar-triggered account menu that moves identity, settings, and sign-out actions out of crowded application headers.

Preview

Account actions Icons are consumer-supplied React nodes, so apps can use their existing Lucide set.

Preview

MBMarco Beyer

Marco Beyermarco@example.com

ProfileSign out

HTMLReact

Copy

<div class="nx-profilemenu"><button class="nx-profilemenu__trigger" type="button" aria-haspopup="menu" aria-expanded="true"><span class="nx-profilemenu__avatar"><span class="nx-avatar">MB</span></span><span class="nx-profilemenu__trigger-name">Marco Beyer</span></button><div class="nx-profilemenu__panel"><div class="nx-profilemenu__identity"><strong>Marco Beyer</strong><span>marco@example.com</span></div><div class="nx-menu" role="menu"><button class="nx-menu__item" role="menuitem">Profile</button><button class="nx-menu__item nx-menu__item--danger" role="menuitem">Sign out</button></div></div></div>

Copy

<NxProfileMenu
  name="Marco Beyer"
  email="marco@example.com"
  initials="MB"
  triggerLabel="Open profile menu"
  items={[
    { label: "Profile", icon: <UserIcon />, onClick: openProfile },
    { separator: true },
    { label: "Sign out", icon: <LogOutIcon />, danger: true, onClick: signOut },
  ]}
/>

API

React props (NxKit)

React (NxKit) props

Prop	Type	Default	Required	Description
name	ReactNode	—	Required	Visible identity and trigger label.
email	ReactNode	undefined		Secondary identity line inside the panel.
initials	ReactNode	—	Required	Fallback avatar content.
avatar	ReactNode	undefined		Optional profile image/node replacing the initials avatar.
chevron	ReactNode	"⌄"		Optional consumer icon, e.g. Lucide ChevronDown.
triggerLabel	string	—	Required	Accessible trigger name.
items	NxMenuItem[]	—	Required	Profile/settings/sign-out actions, including consumer-provided icons.

Classes

Framework-agnostic classes

Class	Description
.nx-profilemenu	Relative trigger/panel root
.nx-profilemenu__trigger	Avatar-first 44px account trigger
.nx-profilemenu__panel	Right-aligned overlay panel
.nx-profilemenu__identity	Name/email context above NxMenu

States

compact

State

MB

Accessibility

• The trigger exposes aria-haspopup, aria-expanded, and aria-controls; the open menu receives focus and supports the NxMenu keyboard contract.
• Escape and item activation close the panel and restore focus to the trigger; outside click closes without stealing focus.

Do / Don’t

• ✓Do: Nest profile, account settings, and sign out here with clear icons and a danger treatment for sign out.✕Don’t: Don't scatter identity and sign-out controls across the top bar — keep the header focused on global context and navigation.

Related

Menu Avatar

View in spec →

View source: registry.js ↗