> 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.md).

# Customizing the top bar

CSPR.click displays a navigation bar at the top of your application. It includes the CSPR products menu on the left, the connected account menu on the right, and optional selectors that your application can enable during initialization.

<figure><img src="/files/1seET90p34RaRJyPkO5k" alt=""><figcaption><p>CSPR.click navigation bar</p></figcaption></figure>

The top bar is configured through `window.clickUIOptions`. The main customizable areas are:

* [Account dropdown menu](/cspr.click-sdk/integration/customizing-the-top-bar/account-dropdown-menu.md): add account information, copy actions, buy CSPR, or custom application menu items.
* [Theme selector](/cspr.click-sdk/integration/customizing-the-top-bar/theme-selector.md): let users switch between light and dark mode and notify your application when the selected theme changes.
* [Network selector](/cspr.click-sdk/integration/customizing-the-top-bar/network-selector.md): let users choose between the networks supported by your application.

## Hide the top bar

If your application has its own sign-in, account, and session controls, you can hide the CSPR.click top bar with the `showTopBar` field in `ClickUIOptions`.

```typescript
const clickUIOptions = {
  uiContainer: 'csprclick-ui',
  rootAppElement: '#app',
  showTopBar: false,
};
```

When `showTopBar` is `false`, CSPR.click still uses the UI container for modal windows and wallet interactions, but it does not render the navigation bar.