Profile Menu · CropWatch UI

CwProfileMenu

User avatar with a dropdown menu showing name, role and actions. The menu supports the full keyboard pattern: focus moves into it on open, arrow keys and Home/End move between items, and Escape closes it and returns focus. On phones only the avatar is shown.

With initials (no avatar image)

Last event: none yet

{#snippet refreshIcon()}
  <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
    <path d="M13 8a5 5 0 1 1-1.28-3.36" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
    <path d="M13 3.5v3.2H9.8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
  </svg>
{/snippet}

<CwProfileMenu
	name="alex.morgan@example.com"
	subtitle="Administrator"
	icon={refreshIcon}
	{menuItems}
	onselect={(item) => handleMenu(item.id)}
/>

With avatar image

Compact (no subtitle)

In a toolbar

API

Usage and API reference

CwProfileMenu combines a user trigger, optional avatar, and action menu. The menu stays simple: you pass the items and react to whichever item the user picks.

How to think about it

Always provide a name The name is used for visible identity and for initials when there is no avatar image.
Model actions as plain data Build `menuItems` as an array of ids and labels, then switch on `item.id` inside `onselect`.
Customize the trigger only when necessary Most apps only need `avatarUrl` or initials. Use `icon` or `avatar` snippets for more custom branding.

Props and callbacks

API	Type	Details
`name` Required	`string`	Visible user name or identifier.
`subtitle`	`string`	Secondary role or account text.
`avatarUrl`	`string`	Image URL for the avatar. Falls back to initials when omitted.
`menuItems` Default: `[]`	`CwProfileMenuItem[]`	Menu actions shown when the trigger opens.
`onselect`	`(item: CwProfileMenuItem) => void`	Called when a menu item is chosen.
`icon`	`Snippet`	Optional custom icon rendered in the trigger.
`avatar`	`Snippet`	Custom avatar markup. Overrides initials and `avatarUrl`.
`menuLabel`	`string`	Accessible name for the menu.

Copy-paste examples

Each snippet is a complete, working example you can paste into a Svelte 5 component.

Standard profile menu

Use `onselect` to branch on the selected item id.

<script lang="ts">
	const menuItems = [
		{ id: 'profile', label: 'My profile' },
		{ id: 'settings', label: 'Account settings' },
		{ id: 'signout', label: 'Sign out', separator: true, danger: true }
	];
</script>

<CwProfileMenu
	name="kevin@cropwatch.io"
	subtitle="Administrator"
	menuItems={menuItems}
	onselect={(item) => {
		if (item.id === 'signout') signOut();
	}}
/>

Custom avatar and trigger icon

Use snippets when the default initials or avatar image are not enough.

<CwProfileMenu name="North greenhouse" menuItems={menuItems}>
	{#snippet avatar()}
		<div style="width:100%;height:100%;display:grid;place-items:center;background:#0f766e;color:white;font-weight:700">
			NG
		</div>
	{/snippet}
	{#snippet icon()}
		<svg viewBox="0 0 16 16" fill="none" style="width:1rem;height:1rem">
			<path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
		</svg>
	{/snippet}
</CwProfileMenu>