How to Open the Thumbnail Pane Programmatically in React PDF Viewer

14 Aug 20261 minute to read

The PDF Viewer exposes a openThumbnailPane() API to open the thumbnail pane from application code. Use this API when the UI needs to show the thumbnail pane in response to user actions or programmatic workflows.

Follow these steps to open the thumbnail pane from application code.

Step 1: Create a basic PDF Viewer sample using the getting started guide.

Step 2: Use the code snippet below to open the thumbnail pane.

    <button onclick="openThumbnail()">Open Thumbnail Pane</button>

    <script>
   function openThumbnail() {
      var viewer = document.getElementById('container').ej2_instances[0];
      // Open Thumbnail pane
      viewer.thumbnailViewModule.openThumbnailPane();
   }
   </script>

Find the sample: Open the thumbnail pane programmatically