Application menu account
The application menu account renders the current user as the last item of the menu footer. Provide a label and optionally an avatar through image-src or the avatar slot. When the switcher slot is provided, the item becomes clickable and reveals a flyout with the slot content — a perfect place for an account switcher.
Props
label: string
The label of the account item — typically the user's name.
icon?: FluxIconName
An optional icon shown in the menu item.
image-alt?: string
The alternative text for the avatar image.
image-src?: string
The source URL of the avatar image.
Slots
avatar
A custom avatar rendered before the label, replacing the image.
switcher
When provided, the account item becomes clickable and opens a flyout containing the slot content. Use this to render an account switcher or sign-out menu.
Snippet
<template>
<FluxApplicationMenuAccount
label="Bas Milius"
image-alt="Bas Milius"
image-src="https://avatars.githubusercontent.com/u/978257?v=4">
<template #switcher>
<FluxMenu>
<FluxMenuItem
icon-leading="user"
label="Profile"/>
<FluxMenuItem
icon-leading="gear"
label="Settings"/>
<FluxMenuItem
icon-leading="arrow-right-from-bracket"
label="Sign out"/>
</FluxMenu>
</template>
</FluxApplicationMenuAccount>
</template>
<script
setup
lang="ts">
import { FluxApplicationMenuAccount } from '@flux-ui/application';
import { FluxMenu, FluxMenuItem } from '@flux-ui/components';
</script>