> For the complete documentation index, see [llms.txt](https://docs.cspr.click/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.cspr.click/cspr.click-sdk/integration/customizing-the-top-bar/account-dropdown-menu.md).

# Account dropdown menu

The account dropdown menu is displayed on the right side of the CSPR.click top bar after the user connects a wallet. CSPR.click always includes the session actions needed to switch account and sign out. You can add prebuilt menu items and custom application actions before those session actions.

<figure><img src="/files/r1xacFl1JiWLiv2YvLzg" alt=""><figcaption></figcaption></figure>

## Account dropdown menu setup

Configure the account dropdown menu with the `accountMenuItems` property in `window.clickUIOptions`. The array can contain prebuilt item literals and custom menu item objects.

```typescript
import type {
  ClickUIOptions,
  CustomMenuItem,
} from '@make-software/csprclick-core-types/clickui';

const csprClickDocsMenuItem = {
  label: 'CSPR.click docs',
  icon: './csprclick-icon.svg',
  badge: { title: 'New', variation: 'green' },
  onClick: () => {
    window.open('https://docs.cspr.click', '_blank');
  },
} as CustomMenuItem;

window.clickUIOptions = {
  uiContainer: 'csprclick-ui',
  rootAppElement: '#root',
  show1ClickModal: true,
  showTopBar: true,
  accountMenuItems: [
    'AccountCardMenuItem',
    'CopyHashMenuItem',
    csprClickDocsMenuItem,
    'BuyCSPRMenuItem',
  ],
  defaultTheme: 'light',
} as ClickUIOptions;
```

## Prebuilt menu items

CSPR.click provides these prebuilt account menu item literals:

| Literal               | Description                                                                    |
| --------------------- | ------------------------------------------------------------------------------ |
| `AccountCardMenuItem` | Displays account information, including account name, public key, and balance. |
| `CopyHashMenuItem`    | Copies the connected account hash to the clipboard.                            |
| `BuyCSPRMenuItem`     | Opens the [Topper by Uphold](https://www.topperpay.com/) widget in a new tab.  |

### Account card

Add `AccountCardMenuItem` to render a card with connected account information at the top of the dropdown menu. The card includes the account name, public key, and balances.

```typescript
accountMenuItems: ['AccountCardMenuItem']
```

### Copy public key

Add `CopyHashMenuItem` to render a menu item that copies the connected account hash to the clipboard.

```typescript
accountMenuItems: ['CopyHashMenuItem']
```

### Buy CSPR

Add `BuyCSPRMenuItem` to render a menu item that opens the Topper by Uphold widget in a new tab. This lets users top up their account with a card payment.

```typescript
accountMenuItems: ['BuyCSPRMenuItem']
```

## Custom menu item

Use a custom menu item object when you want to add an application-specific action. A custom item has a label, an icon, and an `onClick` handler. You can also add a small badge next to the label.

```typescript
const csprClickDocsMenuItem = {
  label: 'CSPR.click docs',
  icon: './csprclick-icon.svg',
  badge: { title: 'New', variation: 'green' },
  onClick: () => {
    window.open('https://docs.cspr.click', '_blank');
  },
} as CustomMenuItem;
```

Valid badge variation values are `green`, `blue`, `violet`, and `gray`.