---
title: "Account menu"
description: "Who is signed in, at the foot of AppShell’s sidebar: their picture and email, opening a menu with their name, the app’s items, the theme and language submenus, and signing out. On the rail only the picture shows."
---

> Documentation Index
> Fetch the complete documentation index at: https://epidermis.getarbol.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Account menu

## In the sidebar

The app’s items, then the preferences, then signing out.

```tsx
import { UserCircleIcon } from '@phosphor-icons/react';
import { useState } from 'react';
import { AccountMenu, ColorSchemeSubmenu, LanguageSubmenu, MenuItem, MenuSeparator } from '@arbol-ai/ui';
import type { ColorScheme } from '@arbol-ai/ui';

const LANGUAGES = [
  { label: 'English', value: 'en' },
  { label: 'Español', value: 'es' },
] as const;

const PreferencesExample = () => {
  const [colorScheme, setColorScheme] = useState<ColorScheme>('system');
  const [language, setLanguage] = useState<'en' | 'es'>('en');
  return (
    <div className="rounded-card w-[250px] border px-4 py-4">
      <AccountMenu email="ana.ruiz@example.com" name="Ana Ruiz" onSignOut={() => undefined}>
        <MenuItem href="#/account-menu" icon={<UserCircleIcon />}>
          Profile
        </MenuItem>
        <MenuSeparator />
        <ColorSchemeSubmenu onChange={setColorScheme} value={colorScheme} />
        <LanguageSubmenu onChange={setLanguage} options={LANGUAGES} value={language} />
      </AccountMenu>
    </div>
  );
};

<PreferencesExample />
```

## On the rail, with the person’s role

```tsx
import { ArrowSquareOutIcon, UsersThreeIcon } from '@phosphor-icons/react';
import { AccountMenu, MenuItem } from '@arbol-ai/ui';

<div className="rounded-card flex w-[60px] justify-center border px-2 py-4">
  <AccountMenu
    details="Your access: Front desk · Dra. Gloria Londoño’s agenda"
    email="ana.ruiz@example.com"
    isCollapsed
    name="Ana Ruiz"
    onSignOut={() => undefined}
  >
    <MenuItem href="#/account-menu" icon={<UsersThreeIcon />}>
      Team
    </MenuItem>
    <MenuItem
      href="https://account.example.com/profile"
      icon={<ArrowSquareOutIcon />}
      target="_blank"
    >
      Manage your account
    </MenuItem>
  </AccountMenu>
</div>
```

## Source

The examples above are [`src/blocks/account-menu/account-menu.examples.tsx`](https://github.com/getarbol/project-arbol-ui/blob/main/src/blocks/account-menu/account-menu.examples.tsx), which the library's tests render too.

Source: https://epidermis.getarbol.com/components/blocks/account-menu/index.mdx