---
title: "Customizing responsive navigation in MAUI PDF viewer toolbar | Nutrient"
canonical_url: "https://www.nutrient.io/guides/maui/user-interface/main-toolbar/responsive-groups/"
md_url: "https://www.nutrient.io/guides/maui/user-interface/main-toolbar/responsive-groups.md"
last_updated: "2026-05-25T14:09:00.350Z"
description: "A responsive group is special since it can be referenced by other toolbar items via the IMainToolbarItem.ResponsiveGroup property."
---

# 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`](https://www.nutrient.io/api/maui/api/PSPDFKit.Api.Toolbar.IMainToolbarItem.html#PSPDFKit_Api_Toolbar_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`](https://www.nutrient.io/api/maui/sdk/PSPDFKit.Sdk.Models.Toolbar.MainToolbarItems.ResponsiveGroupParent.html) with a unique [`GroupName`](https://www.nutrient.io/api/maui/sdk/PSPDFKit.Sdk.Models.Toolbar.MainToolbarItems.ResponsiveGroupParent.html#PSPDFKit_Sdk_Models_Toolbar_MainToolbarItems_ResponsiveGroupParent_GroupName), and set the [`ResponsiveGroup`](https://www.nutrient.io/api/maui/api/PSPDFKit.Api.Toolbar.IMainToolbarItem.html#PSPDFKit_Api_Toolbar_IMainToolbarItem_ResponsiveGroup) property of all referenced items to that `GroupName`:

```csharp

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

```
---

## Related pages

- [Activate or deactivate tools in our viewer toolbar](/guides/maui/user-interface/main-toolbar/activate-or-deactivate-tools.md)
- [Create custom tools for MAUI PDF viewer](/guides/maui/user-interface/main-toolbar/create-a-new-tool.md)
- [Customizing existing tools in our viewer toolbar](/guides/maui/user-interface/main-toolbar/customize-existing-tools.md)
- [Customizing download/export buttons in our PDF viewer](/guides/maui/user-interface/main-toolbar/download-export-button.md)
- [Customizing the dropdown navigation in our viewer toolbar](/guides/maui/user-interface/main-toolbar/dropdown-groups.md)
- [Hiding the toolbar in our PDF viewer](/guides/maui/user-interface/main-toolbar/hide-the-toolbar.md)
- [Adding page labels to navigation in our viewer](/guides/maui/user-interface/main-toolbar/page-label-navigation.md)
- [Adjust the placement of the toolbar in our viewer](/guides/maui/user-interface/main-toolbar/placement.md)
- [Rearrange tools in our viewer toolbar](/guides/maui/user-interface/main-toolbar/rearrange.md)
- [Removing a tool from the toolbar in our MAUI viewer](/guides/maui/user-interface/main-toolbar/remove-a-tool.md)