HelpBot Assistant

How can I help you?

Page thumbnail navigation in SfPdfViewer

12 Feb 20261 minute to read

Use the thumbnail panel to preview pages and quickly navigate a PDF. Each thumbnail represents a page — select one to jump to that page in the viewer.

Thumbnail panel in Blazor PDF Viewer showing page previews

Show or hide the thumbnail panel by setting the EnableThumbnailPanel property. This property enables the feature; initial visibility at load time is controlled separately.

@using Syncfusion.Blazor.SfPdfViewer

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

@code{
    public string DocumentPath { get; set; } = "wwwroot/Data/PDF_Succinctly.pdf";
}

Open thumbnail panel programmatically

To show the thumbnail panel when the document loads, set the IsThumbnailPanelOpen property to true. This controls initial visibility and requires the thumbnail feature to be enabled.

Example — open the thumbnail panel at initial render:

@using Syncfusion.Blazor.SfPdfViewer

<!--IsThumbnailPanelOpen property will enable the thumbnail panel on initial rendering itself-->
<SfPdfViewer2 @ref="@SfPdfViewer"
              DocumentPath="@DocumentPath"
              IsThumbnailPanelOpen="true"
              Height="100%"
              Width="100%">
</SfPdfViewer2>

@code {

    public 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