---
title: "Customizing responsive navigation in JS viewer toolbar | Nutrient"
canonical_url: "https://www.nutrient.io/guides/web/user-interface/main-toolbar/responsive-groups/"
md_url: "https://www.nutrient.io/guides/web/user-interface/main-toolbar/responsive-groups.md"
last_updated: "2026-05-20T19:49:34.911Z"
description: "A responsive-group is special since it can be referenced by other toolbar items via the NutrientViewer.ToolbarItem#responsiveGroup property."
---

# Customizing responsive navigation in our viewer toolbar

A `responsive-group` is special since it can be referenced by other toolbar items via the [`NutrientViewer.ToolbarItem#responsiveGroup`](https://www.nutrient.io/api/web/NutrientViewer.ToolbarItem.html#responsiveGroup) property. When the media query of the group matches, all referenced toolbar items will be hidden, and the group’s icon will be shown instead. When it’s clicked, it’ll expand into the referenced toolbar items.

A `responsive-group` can be used to group items on smaller screens, and you can see this responsive grouping behavior when you open Nutrient Web SDK on a mobile device. In the default UI, the `annotate` type of our built-in items is also a responsive group that’s used to group all annotation tools on smaller screens. The result looks like this:

Whenever the `mediaQueries` of a `responsive-group` don’t match, the group icon will be hidden and the items will be inlined instead, like so:

To make a custom `responsive-group`, be sure to add a unique `id` to the group and set the [`responsiveGroup`](https://www.nutrient.io/api/web/NutrientViewer.ToolbarItem.html#responsiveGroup) property of all referenced items to that ID:

```js

const toolbarItems = [
  {
    type: "responsive-group",
    id: "my-responsive-group",
	 // Show responsive toolbar in screens up to 600px.
    mediaQueries: ["(max-width: 600px)"],
    icon: "https://example.com/icon.png"
  },
  {
    type: "custom",
    id: "my-button-one",
    responsiveGroup: "my-responsive-group"
  },
  {
    type: "custom",
    id: "my-button-two",
    responsiveGroup: "my-responsive-group"
  }

	NutrientViewer.load({
		///...
		toolbarItems,
	})
];

```
---

## 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)
- [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)
- [Removing a tool from the toolbar in our JavaScript viewer](/guides/web/customizing-the-interface/customizing-the-toolbar.md)