> 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/network-selector.md).

# Network selector

<figure><img src="/files/ILBQaL5ECjeDTSwcuatw" alt=""><figcaption><p>Network selector widget</p></figcaption></figure>

If your application supports more than one Casper network, you can display a network selector in the CSPR.click top bar. The selector shows the available network labels and calls your application when the user selects a different one.

## Network selector setup

Configure the selector with the `networkSettings` property in `window.clickUIOptions`. The `networks` array defines the labels shown in the top bar, `currentNetwork` defines the initially selected value, and `onNetworkSwitch` handles user selection.

The following example displays a switch between Mainnet and Testnet:

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

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

const clickUIOptions = {
  uiContainer,
  rootAppElement: '#app',
  defaultTheme,
  onThemeChanged,
  accountMenuItems,
  networkSettings,
};
```

Use `onNetworkSwitch` to update your application state, reload network-specific data, and reconfigure any services that depend on the selected network. Call `window.csprclickUI.setNetwork(n)` after handling the change so the CSPR.click top bar reflects the selected network.