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