Page thumbnail navigation in Blazor SfPdfViewer Component

17 Jul 20261 minute to read

Use the thumbnail panel to preview pages and quickly navigate a PDF. Each thumbnail previews a page; selecting a thumbnail navigates the viewer to that page by default.

Thumbnail panel in Blazor PDF Viewer showing page previews

Enable or disable the thumbnail panel

Show or hide the thumbnail panel by setting the EnableThumbnailPanel property to true or false. To show the thumbnail panel when the document loads, also set the IsThumbnailPanelOpen property to true. EnableThumbnailPanel controls the feature; IsThumbnailPanelOpen controls initial visibility at load time.

@using Syncfusion.Blazor.SfPdfViewer

<SfPdfViewer2 @ref="@SfPdfViewer"
              DocumentPath="@DocumentPath"
              EnableThumbnailPanel="true"
              IsThumbnailPanelOpen="true"
              Height="100%"
              Width="100%">
</SfPdfViewer2>

@code {
    private SfPdfViewer2 SfPdfViewer { get; set; }
    //Sets the PDF document path for initial loading.
    private string DocumentPath { get; set; } = "wwwroot/Data/PDF_Succinctly.pdf";
}

View sample in GitHub.

See also