---
title: "Customize dropdown in PDF viewer toolbar | Nutrient"
canonical_url: "https://www.nutrient.io/guides/web/user-interface/main-toolbar/dropdown-groups/"
md_url: "https://www.nutrient.io/guides/web/user-interface/main-toolbar/dropdown-groups.md"
last_updated: "2026-06-09T10:38:40.985Z"
description: "Learn how to create and modify dropdown groups in the viewer toolbar for enhanced user experience."
---

# Customize dropdown navigation in the viewer toolbar

A dropdown group defines a common dropdown container for toolbar item buttons that share the same [`dropdownGroup`](https://www.nutrient.io/api/web/NutrientViewer.ToolbarItem.html#dropdownGroup) property. When grouped together, all the toolbar items — except for the selected or default one — are hidden. However, they can be shown by opening the dropdown with the toggle arrow button.

Nutrient Web SDK includes some default dropdown groups for `shapes`, `ink`, and for `sidebar`-related items.

You can modify or create a new dropdown group by assigning a unique name for the group to more than one `ToolbarItem`. This is done with the `dropdownGroup` property:

```js

const toolbarItems = [
  {
    type: "custom",
    title: "Button one",
    id: "my-button-one",
    dropdownGroup: "my-group",
    selected: true,
  },
  {
    type: "custom",
    title: "Button two",
    id: "my-button-two",
    dropdownGroup: "my-group",
  },
  {
    type: "custom",
    title: "Button three",
    id: "my-button-three",
    dropdownGroup: "my-group",
  }
];
instance.setToolbarItems((items) => items.concat(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)
- [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)