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
  1. UI SDK
  2. Customizing the top bar

Custom selector

PreviousCurrency selectorNextuseClickRef() hook

Last updated 1 year ago

You can add additional dropdown menus to the top bar with your custom options.

The code below shows how to add a custom menu with three token choices:

const TOKENS: CustomTopBarMenuItem[] = [
  {title:'Token 1', icon: <LogoGreen/>  },
  {title: 'Token 2', icon: <LogoYellow/>},
  {title: 'Token 3', icon: <LogoOrange/> }
];

const tokenSettings = {
  return {
    items: TOKENS,
    currentItem: currentToken,
    onItemSwitch: (t: string) => {
      // update your app upon item change
    },
  };
};
<ClickTopBar customTopBarMenuSettings={[tokenSettings]} />