> 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-v1.12/cspr.click-sdk/javascript/customizing-the-top-bar/network-selector.md).

# Network selector

<figure><img src="https://2573907284-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCAFDnn3Ft7x6p0P4XRfT%2Fuploads%2Fgit-blob-3a32e786fabf9896fe51797242c9fd424af02159%2Fnetwork-selector.png?alt=media" alt=""><figcaption><p>Network selector widget</p></figcaption></figure>

If your application can switch between Mainnet and Testnet networks you may want to add the network selector widget to the CSPR.click navigation bar.

## Network selector set up

Define an array with the list of networks your application supports:

```javascript
const NETWORKS = ['Mainnet', 'Testnet'];

const networkSettings = {
    networks: NETWORKS,
    currentNetwork: NETWORKS[0],
    onNetworkSwitch: (n) => {
        console.log('Network selected', n);
        window.csprclickUI.setNetwork(n);
    },
}
```

Then, add this settings object to the UI initialization defined before:

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

### Customize the network icons

You can also specify your custom icons for each of the networks:

```tsx
import mainnetIcon from './assets/ico-mainnet.svg'
import testnetIcon from './assets/ico-testnet.svg'

const NETWORKS = [
  { title: 'Mainnet', icon: mainnetIcon },
  { title: 'Testnet', icon: testnetIcon }
];
```