Components
User menu
User menu
Avatar trigger plus dropdown panel. On mobile the panel slides in as a full-screen sheet, on sm+ it's a floating card. Always includes a dark-mode toggle; sign-out is opt-in.
Canonical
<koala-user-menu model="@Model.UserMenu" />
Tap the avatar to open the menu. Items + dark-mode toggle render automatically; sign-out is hidden when SignOutAction is null.
Variants
2 variantsStandard
IsAdmin = false
Admin + sign-out
IsAdmin = true
Props
1 attribute| Attribute | Type | Notes |
|---|---|---|
| model | UserMenuModel | Required. Bundles user identity, the admin flag, the menu items, and the sign-out POST URL. |
UserMenuModel fields
| Field | Type | Notes |
|---|---|---|
| UserId | Guid | Drives the avatar URL. |
| DisplayName | string | Shown in the menu header. |
| string? | Optional second line in the menu header. | |
| FirstName / LastName | string? | Used to compute the initials cache-bust key. |
| AvatarBlobName | string? | Cache-buster. Falls back to initials-XY when null. |
| IsAdmin | bool | Renders the crown badge over the avatar + admin row in the panel. |
| Items | IReadOnlyList<UserMenuItem> | Ordered list of menu rows. Each row is an anchor (Href) or a button (XOnClick). |
| SignOutAction | string? | POST URL for the sign-out form. When null the sign-out row is omitted. |
Do & don't
Do
Drive everything through
UserMenuModel. Pass items as a list of UserMenuItem records — one place defines the order.
Don't
Don't hand-build the avatar trigger and dropdown panel in markup. The helper bundles the admin crown, mobile sheet transitions, and sign-out form together.