UserMenu

A dropdown menu component for authenticated users. Shows user avatar, name, and provides quick access to profile, settings, and sign out actions. Styled with Material 3 design.

Installation

typescript

import { UserMenu } from '@happyvertical/smrt-users/svelte';

Basic Usage

Click the menu trigger to reveal the dropdown with navigation options.

svelte

<UserMenu profile={currentUser} />

Multiple Users

Each user gets a unique avatar color based on their name.

svelte

<UserMenu profile={{ name: 'Jane Smith' }} />
<UserMenu profile={{ name: 'John Doe' }} />

Custom URLs

Customize the navigation URLs for your application structure.

svelte

<UserMenu
  profile={profile}
  profileUrl="/account/profile"
  settingsUrl="/account/settings"
  signoutUrl="/api/auth/logout"
/>

Header Integration

The UserMenu is designed to be placed in your application header.

svelte

<header>
  <nav>
    <a href="/">Home</a>
    <a href="/docs">Docs</a>
  </nav>
  <UserMenu profile={currentUser} />
</header>

Props

Prop	Type	Default	Description
`profile` *	`Profile`	-	Profile object containing user name for display
`signoutUrl`	`string`	`'/auth/signout'`	URL for the sign out action
`profileUrl`	`string`	`'/profile'`	URL for the profile link
`settingsUrl`	`string`	`'/settings'`	URL for the settings link

Menu Items

The menu includes three built-in items:

Profile - Links to the user's profile page
Settings - Links to the settings page
Sign out - Links to the sign out action (styled as danger)

TypeScript

typescript

import type { Profile } from '@happyvertical/smrt-profiles';

interface Props {
  profile: Profile;
  signoutUrl?: string;
  profileUrl?: string;
  settingsUrl?: string;
}

Behavior

Click the trigger to toggle the dropdown
Mouse leave closes the dropdown
Clicking a menu item closes the dropdown
Includes ripple effect on interactive elements