Koala logo Design
No matches for “”
↑↓ navigate ↵ open Esc close
PatternsUser menu

User menu

The signed-in person's avatar menu: who you are, the caller's own account rows, and a footer slot for signing out.

<koala-user-menu>

Top bar

The default variant is an avatar button that opens a panel under it, headed by the person's name and email. Below small screens the panel becomes a full-screen sheet. The caller writes every row as its own link or button marked koala-user-menu-item, with an icon and, for something unread, a dot.

variant="Default"

Account

Sarah Hollingworth

sarah@hallamconveyancing.co.uk

My tasks Settings What's new Status

koala-user-menu-footer sits under a divider at the foot of the panel. It holds the caller's own sign-out form, so the component never knows the route or carries the antiforgery token. A client on the other side of a transaction gets the same menu with fewer rows.

Client account

Account

Priya Shah

priya.shah@example.com

Your transactions What's expected of you

Admin badge

IsAdmin on the model adds an Admin badge under the email, so a Koala admin can see at a glance which account they are signed in as.

IsAdmin = true

Account

Joe Barraclough

joe@koala.legal

Admin
Settings

In the rail

variant="Rail" is the workspace rail's account row. collapse-state is the Alpine expression for whether the rail is expanded; when it is, the row shows the name and a chevron beside the avatar. The panel opens upwards inside the mobile drawer and out beside the rail from small screens up. Toggle the rail to see the collapsed row.

variant="Rail"

Sarah Hollingworth

sarah@hallamconveyancing.co.uk

My tasks Settings What's new

API

model UserMenuModel
variant DefaultRail
collapse-state Alpine expression (default true)
element-id string (default guided-tour-user-menu)
availability bool: Portal only, needs koalaAvailability
data-analytics analytics event prefix
koala-user-menu-item on the caller's a or button
koala-user-menu-item icon IconName
koala-user-menu-item dot bool
koala-user-menu-footer slot for the caller's sign-out form
UserMenuModel DisplayNameEmailFirstNameLastNameAvatarImageSrcPresenceExpressionIsAdmin