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:

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

Items in the toolbar are plain JavaScript objects with the shape of a NutrientViewer.ToolbarItem. To always display the expanded pager, replace the default pager item with pager-expanded:

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:

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,
});