---
title: "Hide or show sidebar navigation in JavaScript PDF viewer | Nutrient"
canonical_url: "https://www.nutrient.io/guides/web/customizing-the-interface/controlling-the-sidebar-via-api/"
md_url: "https://www.nutrient.io/guides/web/customizing-the-interface/controlling-the-sidebar-via-api.md"
last_updated: "2026-06-08T17:11:05.617Z"
description: "Control sidebar navigation in the JavaScript PDF viewer by using toolbar buttons or programmatically adjusting the sidebar mode with the Nutrient Web SDK API."
---

# Hide or show sidebar navigation in our viewer

Nutrient Web SDK includes contextual sidebars for page thumbnails, document outlines, bookmarks, and annotations. Each sidebar can be shown by pressing its corresponding toolbar button in a `dropdownGroup` called `sidebar`, which — by default — is located in the leftmost part of the main toolbar.

[Try for Free](https://www.nutrient.io/sdk/web/getting-started.md)

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

These are the corresponding built-in toolbar button types for each sidebar button:

```

sidebar-thumbnails
sidebar-document-outline
sidebar-annotations
sidebar-bookmarks
sidebar-signatures

```

You can read more about built-in items and how to customize the toolbar in the [customize existing tools](https://www.nutrient.io/guides/web/user-interface/main-toolbar/customize-existing-tools.md) guide.

## Sidebar mode

The sidebar can also be controlled programmatically by setting [`ViewState#sidebarMode`](https://www.nutrient.io/api/web/NutrientViewer.ViewState.html#sidebarMode) with the [`Instance#setViewState`] API. For a list of all available modes, please refer to [`NutrientViewer.SidebarMode`](https://www.nutrient.io/api/web/NutrientViewer.html#.SidebarMode).

Using this API you can, for example, activate the annotations sidebar:

```js

instance.setViewState((viewState) =>
	viewState.set('sidebarMode', NutrientViewer.SidebarMode.ANNOTATIONS),
);

```

Setting `sidebarMode` to `null` will hide the sidebar:

```js

instance.setViewState(viewState => (
  viewState.set("sidebarMode", null);
));

```

The sidebar mode can also be set at load time when calling [`NutrientViewer.load()`](https://www.nutrient.io/api/web/NutrientViewer.html#.load) by specifying the corresponding value in the `sidebarMode` property of [`NutrientViewer.Configuration#initialViewState`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#initialViewState).

The following example activates the thumbnails sidebar when loading:

```js

NutrientViewer.load({
	initialViewState: new NutrientViewer.ViewState({
		sidebarMode: NutrientViewer.SidebarMode.THUMBNAILS,
	}),
});

```
---

## Related pages

- [Annotations list in our viewer sidebar](/guides/web/user-interface/sidebar/annotations-list.md)
- [Bookmark navigation in our JavaScript PDF viewer](/guides/web/user-interface/sidebar/bookmarks.md)
- [Customizing the sidebar component in our JavaScript PDF viewer](/guides/web/user-interface/sidebar/customization.md)
- [Document outline in our JavaScript PDF viewer](/guides/web/user-interface/sidebar/document-outline.md)
- [Customizing the OCG layers icon in our PDF viewer UI](/guides/web/user-interface/sidebar/layers.md)
- [Navigate signed and unsigned signature fields in our PDF viewer sidebar](/guides/web/user-interface/sidebar/signatures-list.md)
- [Thumbnail preview in our JavaScript PDF viewer](/guides/web/user-interface/sidebar/thumbnail-preview.md)