> 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/legacy-csprclick-ui/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 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:

```tsx
export const NETWORKS = ['Mainnet', 'Testnet'];
```

Create a state value to store the current network. For example, with `useState()` hook, but you can use any other method.

```tsx
const [network, setNetwork] = useState<string>(NETWORKS[1]);
```

Define a `networkSettings` object with the list of networks, the current network, and a callback method to handle network selection by the user. Add this object to the `topBarSettings` prop in the `<ClickUI>` component:

```typescript
const networkSettings = {
  networks: NETWORKS,
  currentNetwork: network,
  onNetworkSwitch: (n: string) => { setNetwork(n); },
}
```

```tsx
<ClickUI 
    topBarSettings={{
        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 }
];
```