Header

Header — полоса приложения с нижней границей и минимальной высотой каркаса; фон прозрачный, просвечивает страница. Слева — бренд, справа с ровным зазором: баланс плоским текстом со значком, действия со значком и подписью (у действия с новым содержимым — точка непрочитанного), меню пользователя.

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

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

Приложению нужна постоянная верхняя полоса с брендом, балансом аккаунта и меню пользователя.
Несколько глобальных действий (поддержка, новости) всегда доступны в правой части экрана.

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

Основная навигация между разделами продукта — это боковая навигация каркаса, а не действия шапки.
Действия одного объекта или области содержимого — это Toolbar внутри страницы.

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

toolbar — Toolbar собирает действия области содержимого, а Header — глобальную полосу приложения.
user-menu — UserMenu — только меню профиля; Header добавляет бренд, баланс и глобальные действия вокруг него.

Шапка приложения

Бренд, баланс, действия с точкой непрочитанного и меню пользователя.

$405.94

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

<!--
  🟢

  Шапка приложения ADMY: бренд, баланс плоским текстом, действия «Support»
  и «News» с точкой непрочитанного у значка, меню пользователя у аватара.
  Значки — имена из словаря канона (точная графика ADMY продуктовая).
-->

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

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

const actions = [
	{ id: "support", label: "Support", icon: "Question" },
	{ id: "news", label: "News", icon: "Info", indicator: true },
];

const items = [
	{ id: "settings", label: "Settings", icon: "Gear" },
	{
		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("Действие ещё не выбрано."));
</script>

<Header
	balance="$405.94"
	{actions}
	{user}
	{items}
	onaction={(action) => (result = `${t("Действие:")} ${action.label}`)}
	onselect={(entry) => (result = entry.option ? `${entry.item.label}: ${entry.option.label}` : `${t("Меню:")} ${entry.label}`)}
>
	{#snippet brand()}
		<Logo />
	{/snippet}
</Header>

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

Минимальная

Только бренд и меню пользователя без баланса и действий.

<!--
  🟢

  Минимальная шапка: только бренд слева и меню пользователя справа.
-->

<script>
import Header from "$lib/ui/Header.svelte";
import Logo from "$lib/ui/Logo.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>

<Header {user} {items}>
	{#snippet brand()}
		<Logo />
	{/snippet}
</Header>