Customizing the Dropdown Navigation in Our Viewer Toolbar

A dropdown group defines a common dropdown container for toolbar item buttons that share the same 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.

PSPDFKit for Web 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:

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