Customizing responsive navigation in our viewer toolbar

A responsive group is special since it can be referenced by other toolbar items via the IMainToolbarItem.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 MAUI SDK on a mobile device. In the default UI, the annotate responsive group is used to group all annotation tools on smaller screens. The result looks like what’s shown below.

Whenever the MediaQueries of a responsive group don’t match, the group icon will be hidden and the items will be inlined instead, as shown below.

To make a custom responsive group, create a ResponsiveGroupParent with a unique GroupName, and set the ResponsiveGroup property of all referenced items to that GroupName:

var responsiveGroupParent = new ResponsiveGroupParent("my-responsive-group")
{
    Icon = "icons/status_completed.svg"
};
responsiveGroupParent.MediaQueries.Add("(max-width: 950px)");
PSPDFKitController.MainToolbar.ToolbarItems.Add(responsiveGroupParent);

var customButton1 = new CustomMainToolbarButton(Guid.NewGuid().ToString())
{
    ResponsiveGroup = "my-responsive-group",
    Tooltip = "Button1"
};
PSPDFKitController.MainToolbar.ToolbarItems.Add(customButton1);

var customButton2 = new CustomMainToolbarButton(Guid.NewGuid().ToString())
{
    ResponsiveGroup = "my-responsive-group",
    Tooltip = "Button2"
};
PSPDFKitController.MainToolbar.ToolbarItems.Add(customButton2);