Customizing Responsive Navigation in Our Viewer Toolbar

A responsive-group is special since it can be referenced by other toolbar items via the PSPDFKit.ToolbarItem#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 PSPDFKit for Web 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 property of all referenced items to that ID:

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"
  }

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