---
title: "Configuring pager toolbar display behavior | Nutrient"
canonical_url: "https://www.nutrient.io/guides/web/user-interface/main-toolbar/pager-display/"
md_url: "https://www.nutrient.io/guides/web/user-interface/main-toolbar/pager-display.md"
last_updated: "2026-05-20T19:49:34.911Z"
description: "Learn how to control when the pager toolbar displays in expanded or compact mode in Nutrient Web SDK."
---

# Configuring pager toolbar display behavior

By default, the `pager` toolbar item automatically switches between expanded and compact modes based on the available viewport width. You can override this behavior using the `pager-expanded` type to either keep the expanded view at all times or define custom breakpoints.

Nutrient Web SDK is initialized with a default set of items that can be retrieved via [`NutrientViewer.defaultToolbarItems`](https://www.nutrient.io/api/web/NutrientViewer.html#.defaultToolbarItems):

```js

const defaultItems = NutrientViewer.defaultToolbarItems;
console.log(defaultItems);

```

Items in the toolbar are plain JavaScript objects with the shape of a [`NutrientViewer.ToolbarItem`](https://www.nutrient.io/api/web/NutrientViewer.ToolbarItem.html). To always display the expanded pager, replace the default `pager` item with `pager-expanded`:

```js

let toolbarItems = Array.from(NutrientViewer.defaultToolbarItems).map((item) =>
  item.type === "pager"? { type: "pager-expanded" } : item,
);

NutrientViewer.load({...baseOptions,
  theme: NutrientViewer.Theme.DARK,
  toolbarItems,
});

```

Alternatively, you can define custom breakpoints by specifying both pager types with custom media queries:

```js

let toolbarItems = Array.from(NutrientViewer.defaultToolbarItems).flatMap(
  (item) =>
    item.type === "pager"? [
          { type: "pager-expanded", mediaQueries: ["(min-width: 768px)"] },
          { type: "pager", mediaQueries: ["(max-width: 767px)"] },
        ]
      : item,
);

NutrientViewer.load({...baseOptions,
  theme: NutrientViewer.Theme.DARK,
  toolbarItems,
});

```
---

## 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)
- [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)
- [Adding page labels to navigation in our viewer](/guides/web/features/navigation-page-labels.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)
- [Customizing responsive navigation in our viewer toolbar](/guides/web/user-interface/main-toolbar/responsive-groups.md)
- [Removing a tool from the toolbar in our JavaScript viewer](/guides/web/customizing-the-interface/customizing-the-toolbar.md)