AccountMenu

Implemented Navigation

Reusable account navigation with nested preference menus, persisted appearance and application-owned actions.

A wdj composition built from the existing component library.

Presentation commands show demo feedback. Read the interaction guide to connect real actions.

Account navigation

Account identity, Profile, Billing, theme selection, language and timezone submenus, and Log out.

Workspace account

Show template

{% load wdj %}
<div class="flex w-full flex-col gap-4" x-data="{ message: 'Open the account menu to explore its submenus.' }" @wdj:account-change="message = $event.detail.preference + ': ' + $event.detail.value" @wdj:account-action="message = 'Demo action: ' + $event.detail.action">
  <div class="flex items-center justify-between gap-3"><span class="text-base font-medium">Workspace account</span>{% include "wdj/components/account_menu.html" with id="example-account-menu" email="alex@example.com" only %}</div>
  <p class="text-base text-kumo-subtle" role="status" x-text="message"></p>
</div>

Preferences and logout form

Custom English locale and timezone options, an explicit trigger label and a separate native logout form.

Show template

{% load wdj %}
<div class="flex w-full flex-col gap-4" x-data="{ message: 'Preferences emit events. Log out submits the linked demo form.' }" @wdj:account-change="message = $event.detail.preference + ': ' + $event.detail.value" @wdj:account-action="if ($event.detail.action !== 'logout') message = 'Demo action: ' + $event.detail.action">
  <div>{% include "wdj/components/account_menu.html" with id="form-account-menu" email="team@example.com" trigger_label="Team account" languages=account_example_languages language="en-GB" timezones=account_example_timezones timezone="UTC" logout_form="account-demo-logout" only %}</div>
  <form id="account-demo-logout" method="post" @submit.prevent="message = 'Demo logout form submitted. No account session was changed.'">{% csrf_token %}</form>
  <p class="text-base text-kumo-subtle" role="status" x-text="message"></p>
</div>

API Reference

Prop	Type	Default	Description
email	string	unset	Escaped account identity shown above the menu. Omitted when empty.
trigger_label	string	Account menu (accessible label only)	Optional visible text beside the user icon. The default icon trigger has the accessible name Account menu.
profile_href	string	unset	Application-owned Profile URL. Without it, emits wdj:account-action with action profile.
billing_href	string	unset	Application-owned Billing URL. Without it, emits wdj:account-action with action billing.
logout_form	string	unset	ID of an external native POST form containing its CSRF token. Without it, Log out only emits an action event.
languages	list[dict]	English	Options: [{value, label, disabled?}]. Selection emits wdj:account-change; the application owns translation.
language	string	en	Initially selected language value, validated against the supplied options.
timezones	list[dict]	Local time, UTC	Options: [{value, label, disabled?}]. Selection emits wdj:account-change; the application owns time formatting.
timezone	string	local	Initially selected timezone value, validated against the supplied options.
persist_key	string	unset	Optional localStorage key for language/timezone. Use a key scoped to the current account. Theme uses the shared wdj-theme key.
id	string	unset	Stable unique DOM ID; important for HTMX targets and focus restoration.
class	string	""	Class; pass the documented value shown in the examples.

Accessibility notes

Every interactive component keeps real semantics and keyboard support: native controls where possible, ARIA only where necessary, and a visible focus ring. See the Accessibility page for the shared contract.

Read the accessibility contract