---
title: "PDF bookmarks sidebar | Nutrient"
canonical_url: "https://www.nutrient.io/guides/web/user-interface/sidebar/bookmarks/"
md_url: "https://www.nutrient.io/guides/web/user-interface/sidebar/bookmarks.md"
last_updated: "2026-05-15T09:08:03.716Z"
description: "Nutrient Web SDK’s UI features a sidebar with different available views."
---

# Bookmark navigation in our JavaScript PDF viewer

Nutrient Web SDK’s UI features a sidebar with different available views.

The bookmarks sidebar shows a list of bookmarks available in a document, which are grouped and ordered by page. The sidebar can be used to navigate to the bookmarked pages.

<!-- This partial is rendered in guide articles describing sidebars. -->

The bookmarks sidebar can be shown by the user by selecting the bookmarks sidebar icon from the sidebar dropdown in the toolbar.

It can also be shown programmatically with the API:

```js

instance.setViewState(viewState => viewState.set("sidebarMode", NutrientViewer.SidebarMode.BOOKMARKS);

```

Additionally, it’s possible to make it appear when the document is loaded by setting [`NutrientViewer.Configuration#initialViewState`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#initialViewState):

```js

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

```

The sidebar, which appears to the left of the viewport by default, can also be configured to appear to the right. To do this, you only need to set [`NutrientViewer.ViewState#sidebarPlacement`](https://www.nutrient.io/api/web/NutrientViewer.ViewState.html#sidebarPlacement):

```js

instance.setViewState(viewState => (
  viewState.set("sidebarPlacement", NutrientViewer.SidebarPlacement.END)
));

```

The image below shows how sidebar looks once placed using the previous snippet.

If you don’t want users to be able to open the bookmarks sidebar, you can hide the corresponding toolbar button by filtering it out from the [default toolbar items](https://www.nutrient.io/api/web/NutrientViewer.html#.defaultToolbarItems):

```js

NutrientViewer.setToolbarItems(items => items.filter(item => item.type!== "sidebar-bookmarks"));

```







The bookmarks sidebar toolbar button can be styled with CSS using the public CSS class `.PSPDFKit-Toolbar-Button-Sidebar-Bookmarks`.

The bookmarks sidebar itself can also be customized with CSS by modifying the corresponding public CSS classes:

- [`.PSPDFKit-Sidebar-Bookmarks`](https://www.nutrient.io/api/web/css-Sidebar.html#.PSPDFKit-Sidebar-Bookmarks)

- [`.PSPDFKit-Sidebar-Bookmarks-Bookmark`](https://www.nutrient.io/api/web/css-Sidebar.html#.PSPDFKit-Sidebar-Bookmarks-Bookmark)

- [`.PSPDFKit-Sidebar-Bookmarks-Bookmark-Selected`](https://www.nutrient.io/api/web/css-Sidebar.html#.PSPDFKit-Sidebar-Bookmarks-Bookmark-Selected)

- [`.PSPDFKit-Sidebar-Bookmarks-Bookmark-Editing`](https://www.nutrient.io/api/web/css-Sidebar.html#.PSPDFKit-Sidebar-Bookmarks-Bookmark-Editing)

- [`.PSPDFKit-Sidebar-Bookmarks-Heading`](https://www.nutrient.io/api/web/css-Sidebar.html#.PSPDFKit-Sidebar-Bookmarks-Heading)

- [`.PSPDFKit-Sidebar-Bookmarks-Icon`](https://www.nutrient.io/api/web/css-Sidebar.html#.PSPDFKit-Sidebar-Bookmarks-Icon)

- [`.PSPDFKit-Sidebar-Bookmarks-Page-Number`](https://www.nutrient.io/api/web/css-Sidebar.html#.PSPDFKit-Sidebar-Bookmarks-Page-Number)

- [`.PSPDFKit-Sidebar-Bookmarks-Name`](https://www.nutrient.io/api/web/css-Sidebar.html#.PSPDFKit-Sidebar-Bookmarks-Name)

- [`.PSPDFKit-Sidebar-Bookmarks-Button-Add`](https://www.nutrient.io/api/web/css-Sidebar.html#.PSPDFKit-Sidebar-Bookmarks-Button-Add)

- [`.PSPDFKit-Sidebar-Bookmarks-Editor`](https://www.nutrient.io/api/web/css-Sidebar.html#.PSPDFKit-Sidebar-Bookmarks-Editor)

- [`.PSPDFKit-Sidebar-Bookmarks-Button-Delete`](https://www.nutrient.io/api/web/css-Sidebar.html#.PSPDFKit-Sidebar-Bookmarks-Delete)

- [`.PSPDFKit-Sidebar-Bookmarks-Button-Cancel`](https://www.nutrient.io/api/web/css-Sidebar.html#.PSPDFKit-Sidebar-Bookmarks-Cancel)

- [`.PSPDFKit-Sidebar-Bookmarks-Button-Save`](https://www.nutrient.io/api/web/css-Sidebar.html#.PSPDFKit-Sidebar-Bookmarks-Save)
---

## Related pages

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