# Account dropdown menu

You can customize the account dropdown menu in our top bar with your own menu items. Options to switch to another account and sign out are always present at the end of the list. The rest, depends on your needs. We provide a couple of common menu item components you may add, and one component for you to include anything you need.

<figure><img src="https://3734097225-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhC5Uysw6nW74MbPh3iNT%2Fuploads%2Fgit-blob-7b34f501eeffe70ae399258dd59ff9c4cabb8787%2Faccount-dropdown.png?alt=media" alt=""><figcaption></figcaption></figure>

## Account dropdown menu set up

To customize the account dropdown menu, add the menu items you want to display into an array:

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

const accountMenuItems = [
    'AccountCardMenuItem',
    'CopyHashMenuItem',
    csprClickDocsMenuItem,
    'BuyCSPRMenuItem',
];
```

Then, add the array to the `clickUIOptions` object you defined before:

```javascript
const clickUIOptions = {
  uiContainer: 'csprclick-ui', 
  rootAppElement: '#app',
  showTopBar: true,
  accountMenuItems,
};
```

## Prebuilt menu items

### Account card

```javascript
const accountMenuItems = [
    'AccountCardMenuItem',
];
```

Renders a card with account information at the top of the dropdown menu. The card includes the account name, public key and liquid/total balances. The account also links to CSPR.live.

### View account on CSPR.live

```javascript
const accountMenuItems = [
    'ViewAccountOnExplorerMenuItem',
];
```

Alternative to the account card. Renders a menu item in the account dropdown menu to open the CSPR.live account page in a new tab.

### Copy public key

```javascript
const accountMenuItems = [
    'CopyHashMenuItem',
];
```

Renders a menu item in the account dropdown menu to copy the connected public key to the clipboard.

### Buy CSPR

```javascript
const accountMenuItems = [
    'BuyCSPRMenuItem',
];
```

Renders a menu item in the account dropdown menu to open the [Topper by Uphold](https://www.topperpay.com/) widget on a new tab. This widget allows the user to top-up his account with a credit card payment.

### Custom menu item

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

const accountMenuItems = [
    csprClickDocsMenuItem,
];
```

Renders a menu item in the account dropdown menu with a custom text, icon, and handler action.

Optionally, you can add a small badge right to the menu item title. Valid variation values are `green`, `blue`, `violet`, and `gray`.