On this page
Overview
Show code, AvatarMenu.tsx
Variants
The account menu
The account menu opens from the person's AvatarButton at the end of the TopBar.
- Their avatar, name and email come first.
- Then their own things.
- Sign out is last.
Organizations in the account menu
A submenu switches between the person's organizations, and names the current one.
Show code, WithOrganizations.tsx
A switcher of its own
Where people switch often, a button names the active organization and opens them all.
- It sits at the top of the NavigationDrawer, or at the start of the top bar.
- The menu shows the person's role under each organization, and an action that creates one.
- Before the first organization, that action is a button of its own.
Show code, SwitchOrganization.tsx
A row at the foot of the navigation
The account menu's trigger can be a row with the avatar and the name, as wide as the drawer; the menu opens above it.
Show code, RowTrigger.tsx
Anatomy
Trigger
Heading
Organization
Role
Create action
Show code, OrganizationSwitcherAnatomy.tsx
Behaviour
The theme
A Theme submenu applies the choice at once and keeps the menu open, so people see the result, and the application remembers it.
Switching
Switch at once on a choice, and say so where the switch takes time.
Rules
Both are a Menu behind a trigger in the frame, which says who is signed in and where.
Use it when
- Account settings, the theme and Sign out on every page
- People who belong to several organizations
Show code, AvatarTrigger.tsx
Show code, GenericTrigger.tsx
Content
Use the person's and the organizations' own names, never generic ones.
- Put the person's own name and email at the top, never "My account".
- End with "Sign out", never "Log out".
- Label the switcher with the active organization's name, never "Switch organization".
- Write organization names as people wrote them, with the person's role, such as Admin.
- Say "Create organization" in the words the application uses for one.
Accessibility
Focus and keyboard
Both menus take the keys of a Menu, and give focus back to their trigger as they close.