---
title: "Add labels to PDF pages in JavaScript viewer | Nutrient SDK"
canonical_url: "https://www.nutrient.io/guides/web/features/navigation-page-labels/"
md_url: "https://www.nutrient.io/guides/web/features/navigation-page-labels.md"
last_updated: "2026-05-22T20:57:56.674Z"
description: "Discover how page labels improve PDF navigation in Nutrient Web SDK, making documents more user-friendly and easier to identify for readers."
---

# Adding page labels to navigation in our viewer

This guide explains how page labels appear in Nutrient Web SDK and how users can navigate with them in the viewer toolbar.

For a cross-product overview of how PDF page labels work and how each Nutrient product handles them, refer to the [PDF page labels](https://www.nutrient.io/guides/pdf-page-labels.md) guide.

Each page in a PDF document can have a human-readable label associated with it. These kinds of labels, added by the document author, can result in a friendlier navigation experience by making content more easily identifiable.

Furthermore, page labels are often used to assign a number to pages which otherwise would be identified by their page index. For example, the first few pages of a document could include a table of contents, introduction, etc., and the author may want the actual page number count to start from the sixth page of the document (e.g. pages i, ii, iii, iv, v, followed by 1, 2, 3).

Nutrient Web SDK now joins the Nutrient iOS and Android SDKs, as well as other PDF solutions, in supporting page labels instead of numbers: In the above example, the page with the label 2 would actually be page 7.

If the current page includes a label, it’s shown along with the actual page number in parentheses. When no label is available, only the page number is displayed.

Users can also enter a page label in the pagination widget of the main toolbar to jump to it directly.
---

## Related pages

- [Activate or deactivate tools in our viewer toolbar](/guides/web/customizing-the-interface/controlling-the-toolbar-via-api.md)
- [Create a new tool in PDF viewer toolbar](/guides/web/user-interface/main-toolbar/create-a-new-tool.md)
- [Configuring pager toolbar display behavior](/guides/web/user-interface/main-toolbar/pager-display.md)
- [Customizing tools in the JavaScript PDF viewer toolbar](/guides/web/user-interface/main-toolbar/customize-existing-tools.md)
- [Customizing download/export buttons in our JavaScript PDF viewer](/guides/web/user-interface/main-toolbar/download-export-button.md)
- [Customize dropdown navigation in the viewer toolbar](/guides/web/user-interface/main-toolbar/dropdown-groups.md)
- [Hiding the toolbar in our JavaScript PDF viewer](/guides/web/user-interface/main-toolbar/hide-the-toolbar.md)
- [Adjust the placement of the toolbar in our viewer](/guides/web/user-interface/main-toolbar/placement.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)
- [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)