---
title: "Annotation list navigation in MAUI PDF viewer | Nutrient"
canonical_url: "https://www.nutrient.io/guides/maui/user-interface/sidebar/annotations-list/"
md_url: "https://www.nutrient.io/guides/maui/user-interface/sidebar/annotations-list.md"
last_updated: "2026-05-30T02:20:01.345Z"
description: "The annotations sidebar displays a list of preset document annotations, excluding link annotations, grouped and ordered by page."
---

# Annotations list in our viewer sidebar

The annotations sidebar displays a list of preset document annotations, excluding link annotations, grouped and ordered by page. Selecting an annotation navigates to its page, highlighting the annotation or focusing on it if it’s read-only.

<!-- This partial is rendered in guide articles describing sidebars. -->

The annotations sidebar can be shown by the user by selecting the annotations sidebar icon from the sidebar dropdown in the toolbar.

It can also be shown programmatically with the API:

### XAML

```xml

<!--View-->

<pspdfkit:PDFView x:Name="PDFView" SidebarMode="{Binding SelectedSidebarMode}" />

```

### C#

```csharp

// ViewModel
public SidebarMode? SelectedSidebarMode
{
	get => _selectedSidebarMode;
  set => SetField(ref _selectedSidebarMode, value);
}

public void OpenDocumentOutlineSidebar() {
	SelectedSidebarMode = SidebarMode.Annotations;
}

```

If you don’t want users to be able to open the annotations sidebar, you can hide the corresponding toolbar button by filtering it out from the [default toolbar items](https://www.nutrient.io/api/maui/sdk/PSPDFKit.Sdk.Models.Toolbar.MainToolbar.html#ToolbarItems):

```csharp

// Find the item to remove.
var sidebarAnnotationsToggleButton =
  PSPDFKitController.MainToolbar.ToolbarItems.First(
    item => item.GetType() == typeof(SidebarAnnotationsToggleButton));

// Remove the item.
PSPDFKitController.MainToolbar.ToolbarItems.Remove(
  sidebarAnnotationsToggleButton);

```



## Filtering annotation types to render

Filtering annotation types to render can be done by [bridging JavaScript APIs](https://www.nutrient.io/guides/maui/advanced-access-apis.md). By default, the annotation classes defined in the [`PSPDFKit.defaultAnnotationsSidebarContent`](https://www.nutrient.io/api/web/PSPDFKit.html#.defaultAnnotationsSidebarContent) array are the ones that will be rendered by this sidebar. You can filter out certain annotation types that you don’t want to render via the `includeContent` property of the [`PSPDFKit.AnnotationsSidebarOptions`](https://www.nutrient.io/api/web/PSPDFKit.html#AnnotationsSidebarOptions) object, which is specified as part of [`PSPDFKit.ViewState#sidebarOptions`](https://www.nutrient.io/api/web/PSPDFKit.ViewState.html#sidebarOptions).

As an example, here’s how you can make it only show images and ink annotations:

```js

const advanceConfiguration = {
	sidebarOptions: {
		[PSPDFKit.SidebarMode.Annotations]: {
			includeContent: [
				PSPDFKit.Annotations.ImageAnnotation,
				PSPDFKit.Annotations.InkAnnotation,
			],
		},
	},
};

```

You can also dynamically change this list during runtime by using [`PSPDFKit.Maui.MauiBridge.currentDocument.setViewState`](https://www.nutrient.io/api/web/PSPDFKit.Instance.html#setViewState).

Additionally, it’s possible to render comments in the annotations sidebar by adding the `PSPDFKit.Comment` class to the `includeContent` property of the [`PSPDFKit.AnnotationsSidebarOptions`](https://www.nutrient.io/api/web/PSPDFKit.html#AnnotationsSidebarOptions) object that you can optionally specify via [`PSPDFKit.ViewState#sidebarOptions`](https://www.nutrient.io/api/web/PSPDFKit.ViewState.html#sidebarOptions).

Here’s an example in which all the default annotation types and comments are rendered:

```js

const currentDocument = PSPDFKit.Maui.MauiBridge.currentDocument;
currentDocument.setViewState((viewState) =>
	viewState.set('sidebarOptions', {
		[PSPDFKit.SidebarMode.Annotations]: {
			includeContent: [...PSPDFKit.defaultAnnotationsSidebarContent,
				PSPDFKit.Comment,
			],
		},
	}),
);

```

## CSS customization

The annotations sidebar toolbar button can be styled with CSS using the public CSS class `.PSPDFKit-Toolbar-Button-Sidebar-Annotations`.

The annotations sidebar itself can also be customized with CSS by modifying the corresponding public CSS classes:

- [`.PSPDFKit-Sidebar-Annotations`](https://www.nutrient.io/api/web/css-Sidebar.html#.PSPDFKit-Sidebar-Annotations)

- [`.PSPDFKit-Sidebar-Annotations-Page-Number`](https://www.nutrient.io/api/web/css-Sidebar.html#.PSPDFKit-Sidebar-Annotations-Page-Number)

- [`.PSPDFKit-Sidebar-Annotations-Container`](https://www.nutrient.io/api/web/css-Sidebar.html#.PSPDFKit-Sidebar-Annotations-Container)

- [`.PSPDFKit-Sidebar-Annotations-Annotation`](https://www.nutrient.io/api/web/css-Sidebar.html#.PSPDFKit-Sidebar-Annotations-Annotation)

- [`.PSPDFKit-Sidebar-Annotations-Icon`](https://www.nutrient.io/api/web/css-Sidebar.html#.PSPDFKit-Sidebar-Annotations-Icon)

- [`.PSPDFKit-Sidebar-Annotations-Footer`](https://www.nutrient.io/api/web/css-Sidebar.html#.PSPDFKit-Sidebar-Annotations-Footer)

- [`.PSPDFKit-Sidebar-Annotations-Delete`](https://www.nutrient.io/api/web/css-Sidebar.html#.PSPDFKit-Sidebar-Annotations-Delete)
---

## Related pages

- [Hide or show sidebar navigation in our viewer](/guides/maui/user-interface/sidebar/hide-or-show.md)
- [Bookmark navigation in our MAUI PDF viewer](/guides/maui/user-interface/sidebar/bookmarks.md)
- [Document outline in our MAUI PDF viewer](/guides/maui/user-interface/sidebar/document-outline.md)
- [Thumbnail preview in our MAUI PDF viewer](/guides/maui/user-interface/sidebar/thumbnail-preview.md)