---
title: "Customizing tools in JavaScript PDF viewer toolbar | Nutrient"
canonical_url: "https://www.nutrient.io/guides/web/user-interface/main-toolbar/customize-existing-tools/"
md_url: "https://www.nutrient.io/guides/web/user-interface/main-toolbar/customize-existing-tools.md"
last_updated: "2026-05-25T16:07:03.627Z"
description: "Learn how to customize existing tools in the main toolbar of our JavaScript PDF viewer. Enhance your user interface with tailored tool configurations and seamless functionality."
---

# Customizing tools in the JavaScript PDF viewer toolbar

You can customize various properties of built-in toolbar items to enhance the functionality of your JavaScript PDF viewer. These properties include:

- `title`

- `icon`

- `className`

- `mediaQueries`

- `disabled`

- `preset`

See our [API reference](https://www.nutrient.io/api/web/) for detailed insights on each property.

For example, you can modify toolbar items to ensure zoom buttons appear across all viewport widths by setting the `mediaQueries` property to `["all"]`.

```js

// Change the `mediaQueries` for the zoom items
// so that they're always shown on any device.
instance.setToolbarItems((items) =>
  items.map((item) => {
    if (
      item.type === "zoom-in" ||
      item.type === "zoom-out" ||
      item.type === "zoom-mode"
    ) {
      item.mediaQueries = ["all"];
    }
    return item;
  })
);

```
---

## Related pages

- [Activate or deactivate tools in our viewer toolbar](/guides/web/customizing-the-interface/controlling-the-toolbar-via-api.md)
- [Configuring pager toolbar display behavior](/guides/web/user-interface/main-toolbar/pager-display.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)
- [Create a new tool in PDF viewer toolbar](/guides/web/user-interface/main-toolbar/create-a-new-tool.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)
- [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)