UserMenu

UserMenu собирает в шапке идентификатор пользователя и его действия: триггер — аватар без подложки с круглой caret-кнопкой у правого нижнего угла, панель — шапка профиля, связанные настройки и выход. Пункт с подменю переключает панель на список выбора темы или языка с кнопкой «Назад».

Статус: experimental · в системе с 2026-08 · интерактивность: always (всегда)

Когда использовать

Персональные действия аккаунта собраны у аватара в шапке приложения: профиль, настройки, выход.
Часть действий — выбор из нескольких значений (тема, язык) и раскрывается вложенным списком.

Не использовать:

Вторичные действия объекта, не связанные с аккаунтом, — это Menu.
Основная навигация между разделами продукта — это Link или Tabs, а не меню профиля.

Альтернативы:

menu — Menu запускает действия объекта, а UserMenu собирает действия аккаунта у аватара.
avatar — Avatar — только идентификатор; UserMenu добавляет к нему раскрывающиеся действия.

Меню профиля

Аватар с caret-кнопкой, шапка пользователя в панели, настройки, подменю темы и языка, выход.

Действие ещё не выбрано.

<!--
  🟢

  Полное меню профиля: аватар с caret-кнопкой, шапка пользователя в панели,
  настройки, подменю темы и языка, выход. Значки — имена из словаря канона
  (точная графика продукта в канон не входит).
-->

<script>
import { t } from "$lib/spec/demo-lang.svelte.js";
import UserMenu from "$lib/ui/UserMenu.svelte";

const user = { name: "email@email.com", id: "1337" };

const items = [
	{ id: "settings", label: "Settings", icon: "Gear" },
	{
		id: "theme",
		label: "System",
		icon: "Info",
		value: "system",
		options: [
			{ id: "system", label: "System" },
			{ id: "light", label: "Light" },
			{ id: "dark", label: "Dark" },
		],
	},
	{
		id: "language",
		label: "EN - English",
		icon: "Question",
		value: "en",
		options: [
			{ id: "en", label: "EN - English" },
			{ id: "ru", label: t("RU - Русский") },
			{ id: "pl", label: "PL - Polski" },
		],
	},
	{ id: "sep", type: "separator" },
	{ id: "logout", label: "Log out", icon: "ArrowSquareOut" },
];

let result = $state(t("Действие ещё не выбрано."));

function onselect(entry) {
	result = entry.option ? `${entry.item.label}: ${entry.option.label}` : `${t("Выбрано:")} ${entry.label}`;
}
</script>

<UserMenu {user} {items} {onselect} />

<p aria-live="polite">{result}</p>

Без подменю

Короткое меню аккаунта: профиль и выход без вложенного выбора.

<!--
  🟢

  Короткое меню аккаунта без вложенного выбора: профиль и выход.
-->

<script>
import UserMenu from "$lib/ui/UserMenu.svelte";

const user = { name: "guest@admy.io", id: "42" };

const items = [
	{ id: "profile", label: "Profile", icon: "Gear" },
	{ id: "sep", type: "separator" },
	{ id: "logout", label: "Log out", icon: "ArrowSquareOut" },
];
</script>

<UserMenu {user} {items} />