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 Launch Demo

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 guide.

The sidebar can also be controlled programmatically by setting ViewState#sidebarMode with the Instance#setViewState API. For a list of all available modes, please refer to NutrientViewer.SidebarMode.

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

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

Setting sidebarMode to null will hide the sidebar:

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

The sidebar mode can also be set at load time when calling NutrientViewer.load() by specifying the corresponding value in the sidebarMode property of NutrientViewer.Configuration#initialViewState.

The following example activates the thumbnails sidebar when loading:

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