---
title: "Hide toolbar in JavaScript PDF viewer | Nutrient SDK"
canonical_url: "https://www.nutrient.io/guides/web/user-interface/main-toolbar/hide-the-toolbar/"
md_url: "https://www.nutrient.io/guides/web/user-interface/main-toolbar/hide-the-toolbar.md"
last_updated: "2026-05-23T00:08:18.191Z"
description: "Show or hide the toolbar in your JavaScript PDF viewer using Nutrient Web SDK. Toggle visibility dynamically with ViewState.showToolbar and setViewState() method."
---

# Hiding the toolbar in our JavaScript PDF viewer

By modifying the [`ViewState`](https://www.nutrient.io/api/web/NutrientViewer.ViewState.html), you can control when the toolbar should be shown or hidden by using the [`showToolbar`](https://www.nutrient.io/api/web/NutrientViewer.ViewState.html#showToolbar) property.

[Launch Demo](https://www.nutrient.io/demo/toolbar-customization/)

By updating this property using the [`instance.setViewState()`](https://www.nutrient.io/api/web/NutrientViewer.Instance.html#setViewState), the toolbar will be shown when the property is set to `true` and hidden when set to `false`.

The following example toggles the `showToolbar` property between both states, so it will show it if it's hidden, and hide it if it's visible:

```js

instance.setViewState(viewState => viewState.set("showToolbar",!viewState.showToolbar));

```
---

## Related pages

- [Activate or deactivate tools in our viewer toolbar](/guides/web/customizing-the-interface/controlling-the-toolbar-via-api.md)
- [Configuring pager toolbar display behavior](/guides/web/user-interface/main-toolbar/pager-display.md)
- [Create a new tool in PDF viewer toolbar](/guides/web/user-interface/main-toolbar/create-a-new-tool.md)
- [Customizing download/export buttons in our JavaScript PDF viewer](/guides/web/user-interface/main-toolbar/download-export-button.md)
- [Customizing tools in the JavaScript PDF viewer toolbar](/guides/web/user-interface/main-toolbar/customize-existing-tools.md)
- [Customize dropdown navigation in the viewer toolbar](/guides/web/user-interface/main-toolbar/dropdown-groups.md)
- [Adding page labels to navigation in our viewer](/guides/web/features/navigation-page-labels.md)
- [Customize the print button (hide/enable) in our JavaScript PDF viewer](/guides/web/user-interface/main-toolbar/print-button.md)
- [Rearrange tools in our viewer toolbar](/guides/web/user-interface/main-toolbar/rearrange.md)
- [Adjust the placement of the toolbar in our viewer](/guides/web/user-interface/main-toolbar/placement.md)
- [Removing a tool from the toolbar in our JavaScript viewer](/guides/web/customizing-the-interface/customizing-the-toolbar.md)
- [Customizing responsive navigation in our viewer toolbar](/guides/web/user-interface/main-toolbar/responsive-groups.md)