Skip to main content
Account navigation gives one cached header two states. Guests see a Sign in link. Signed-in members see an avatar that opens a small account menu. Place the tag in your header or navigation:
That is the whole theme change. The tag renders an empty element carrying only data, and the runtime builds the markup inside it:
With the member storefront disabled, the tag renders nothing at all.

​
What each visitor sees

The avatar shows initials taken from the member’s display name — “Alex Kim” reads AK, and “Alex” reads A. The name arrives with the session the runtime already fetches, so the avatar costs no extra request. Account opens your company’s account home. Sign out ends the session. The cached HTML always starts in the guest state. A member sees the menu once the runtime confirms the session. If the session has expired, or the request fails, Sign in stays visible.

​
Behaviour

The menu uses a native disclosure element, so it works with the keyboard out of the box:
  • Escape closes the menu and returns focus to the avatar
  • A click outside closes it
  • Choosing a link closes it
The panel is sized by its own content and clamped to a maximum width. A narrow or stretched navigation container will not stretch it.

​
Styling

The tag passes your theme’s own settings to the menu, using the same values a member system screen reads — primary colour, surface colour, border colour, and body font among them. The menu matches your system screens without a second palette to maintain. A storefront with no such settings falls back to neutral defaults that inherit the surrounding header’s text colour, so the avatar stays legible on a light or a dark header. To go further, style these classes with ordinary CSS: You can also override two custom properties:
The panel respects prefers-reduced-motion.

​
Labels and translation

Labels render on the server, so they follow your storefront’s language rather than being fixed in the browser. Only https:, http:, and root-relative URLs are used. Anything else falls back to a safe default, so a mistyped or hostile value cannot turn a menu item into a script.