LogoLogo
CSPR.build PortalCSPR.click Website
CSPR.click v1.2
CSPR.click v1.2
  • Introduction (v1.2)
    • CSPR.click overview
    • Get your application Id
    • Changelog
  • UI SDK
    • Getting started with the template application
    • Integrating the UI SDK into your application
    • Integrating the UI SDK into a non-React application
    • Customizing the top bar
      • Account dropdown menu
      • Theme selector
      • Network selector
      • Language selector
      • Currency selector
      • Custom selector
    • useClickRef() hook
    • Handling events
    • Signing transactions
  • Core JS SDK
    • Getting started
    • Properties
    • Methods
    • Types
    • Events
  • Get support
    • Contact us
Powered by GitBook
On this page
  • Prebuilt menu items
  • View account on CSPR.live
  • Copy public key
  • Buy CSPR
  • Custom menu item
  • Account dropdown menu set up
  1. UI SDK
  2. Customizing the top bar

Account dropdown menu

PreviousCustomizing the top barNextTheme selector

Last updated 1 year ago

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.

Prebuilt menu items

View account on CSPR.live

<ViewAccountOnExplorerMenuItem />

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

Copy public key

<CopyHashMenuItem />

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

Buy CSPR

<BuyCSPRMenuItem />

Custom menu item

<AccountMenuItem
  onClick={() => {
    window.location.href = 'https://cspr.click';
  }}
  icon={CSPRClickIcon}
  label={'CSPR.click docs'}
  badge={{ title: 'new', variation: 'green' }}
/>

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.

Account dropdown menu set up

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

const accountMenuItems = [
  <ViewAccountOnExplorerMenuItem key={0} />,
  <CopyHashMenuItem key={1} />,
  <AccountMenuItem
    key={2}
    onClick={() => {
        window.location.href = 'https://cspr.click';
    }}
    icon={CSPRClickIcon}
    label={'CSPR.click docs'}
    badge={{ title: 'new', variation: 'green' }}
  />,
];

Then, add the array to the <ClickTopBar> component:

<ClickTopBar accountMenuItems={accountMenuItems} />

Renders a menu item in the account dropdown menu to open the widget on a new tab. This widget allows the user to top-up his account with a credit card payment.

Topper by Uphold