kt-user-menu

The account menu at the end of an application's header: the person's avatar, and under it who is signed in and what they can do.

The button

The avatar — avatar for a picture, initials from name otherwise — named after the person. show-name writes the name beside it, for a header with the room.

At the foot of a sidebar

block makes the button a row as wide as its container, shaped as the navigation items above it — their radius, their padding, their hover — with the name, the email and a chevron. Without show-name, as in a collapsed rail, it is the avatar alone, centred. The menu opens above or below the row, as wide as it.

The menu

The panel opens under the button, lined up with its end, in the top layer, so no overflow clips it. It shows who is signed in — the avatar, name and email — then the items.

Each item is { id, label, icon?, separator?, danger?, disabled? }: separator draws a rule above it, setting it apart from the items before; danger draws it in the danger colour, for signing out or deleting. Choosing one closes the menu and fires kt-select with its id. Anything slotted goes under the items: a workspace switcher, a theme toggle, a plan badge.

Keyboard

A menu button, as the WAI-ARIA pattern describes. Enter, Space or the down arrow open it on the first item, the up arrow on the last. The arrows, Home and End move between items, wrapping; Enter and Space choose. Escape closes it and gives the focus back to the button; Tab and a click outside close it too.

Accessibility

The button has aria-haspopup="menu" and aria-expanded; the list is a menu named after the person, its items menuitems, its rules separators. Who is signed in is shown above the menu rather than as an item, since it is not something to choose.

API