Bookmark navigation in React PDF Viewer

13 Jul 202615 minutes to read

Overview

This guide shows how to enable and use bookmark navigation in the EJ2 React PDF Viewer. You will enable bookmarks, navigate programmatically using goToBookmark, and retrieve the document’s bookmark list with getBookmarks.

Steps

1. Enable bookmark

Add enableBookmark={true} to PdfViewerComponent and inject BookmarkView into the viewer.

import {
    PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
    ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner,
    PageOrganizer, Inject
} from '@syncfusion/ej2-react-pdfviewer';
import { useRef, RefObject } from 'react';

export default function App() {
    const viewerRef: RefObject<PdfViewerComponent | null> = useRef<PdfViewerComponent>(null);
    return (
        <div style={{ height: '100vh' }}>
            <PdfViewerComponent
                id="PdfViewer"
                ref={viewerRef}
                documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
                resourceUrl="https://cdn.syncfusion.com/ej2/32.2.3/dist/ej2-pdfviewer-lib"
                style={{ height: '100%' }}
                enableBookmark={true}
            >
                <Inject
                    services={[
                        Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView,
                        ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer
                    ]}
                />
            </PdfViewerComponent>
        </div>
    );
}

Expected result: The Bookmarks button on the left navigation toolbar is enabled.

2. Toggle bookmark view programmatically

Open or close the bookmark pane programmatically using the openBookmarkPane and closeBookmarkPane APIs. Call openBookmarkPane to show the panel and closeBookmarkPane to hide it. Both methods have no return value.

import {
    PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
    ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner,
    PageOrganizer, Inject
} from '@syncfusion/ej2-react-pdfviewer';
import { useRef, RefObject } from 'react';

export default function App() {
    const viewerRef: RefObject<PdfViewerComponent | null> = useRef<PdfViewerComponent>(null);
    return (
        <div style={{ height: '100vh' }}>
            <PdfViewerComponent
                id="PdfViewer"
                ref={viewerRef}
                documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
                resourceUrl="https://cdn.syncfusion.com/ej2/32.2.3/dist/ej2-pdfviewer-lib"
                style={{ height: '100%' }}
                enableBookmark={true}
            >
                <Inject
                    services={[
                        Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView,
                        ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer
                    ]}
                />
            </PdfViewerComponent>
        </div>
    );
}

Expected result: The viewer shows a Bookmarks panel and users can click entries to navigate.

3. Navigate programmatically

Call goToBookmark(pageIndex, y) where pageIndex is the zero-based page index (so 1 navigates to the second page) and y is the vertical coordinate in PDF page space used to position the view.

import {
    PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
    ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner,
    PageOrganizer, Inject
} from '@syncfusion/ej2-react-pdfviewer';
import { useRef, RefObject } from 'react';

export default function App() {
    const viewerRef: RefObject<PdfViewerComponent | null> = useRef<PdfViewerComponent>(null);
    const goTo = () => {
        viewerRef.current?.bookmark.goToBookmark(1, 0);
    }
    return (
        <div style={{ height: '100vh' }}>
            <button onClick={goTo}>Go to Page 2</button>
            <PdfViewerComponent
                id="PdfViewer"
                ref={viewerRef}
                documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
                resourceUrl="https://cdn.syncfusion.com/ej2/32.2.3/dist/ej2-pdfviewer-lib"
                style={{ height: '100%' }}
            >
                <Inject
                    services={[
                        Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView,
                        ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer
                    ]}
                />
            </PdfViewerComponent>
        </div>
    );
}

4. Retrieve the bookmarks list

Use getBookmarks() to obtain the bookmark tree.

import {
    PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
    ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner,
    PageOrganizer, Inject
} from '@syncfusion/ej2-react-pdfviewer';
import { useRef, RefObject } from 'react';

export default function App() {
    const viewerRef: RefObject<PdfViewerComponent | null> = useRef<PdfViewerComponent>(null);
    const getBookmarks = () => {
        const bookMarks: any = viewerRef.current?.bookmark.getBookmarks();
        console.log('Bookmarks:', bookMarks);
    }
    return (
        <div style={{ height: '100vh' }}>
            <button onClick={getBookmarks}>List bookmarks</button>
            <PdfViewerComponent
                id="PdfViewer"
                ref={viewerRef}
                documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
                resourceUrl="https://cdn.syncfusion.com/ej2/32.2.3/dist/ej2-pdfviewer-lib"
                style={{ height: '100%' }}
            >
                <Inject
                    services={[
                        Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView,
                        ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer
                    ]}
                />
            </PdfViewerComponent>
        </div>
    );
}

Complete example

The following is a self-contained example demonstrating enabling bookmarks, navigating to a bookmark programmatically, and listing bookmarks.

import {
    PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
    ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner,
    PageOrganizer, Inject
} from '@syncfusion/ej2-react-pdfviewer';
import { useRef, RefObject } from 'react';

export default function App() {
    const viewerRef: RefObject<PdfViewerComponent | null> = useRef<PdfViewerComponent>(null);
    const getBookmarks = () => {
        const bookMarks: any = viewerRef.current?.bookmark.getBookmarks();
        console.log('Bookmarks:', bookMarks);
    }
    const goTo = () => {
        viewerRef.current?.bookmark.goToBookmark(1, 0);
    }
    return (
        <div style={{ height: '100vh' }}>
            <button onClick={getBookmarks}>List bookmarks</button>
            <button onClick={goTo} style={{ marginLeft: 8 }}>Go to Page 2</button>
            <PdfViewerComponent
                id="PdfViewer"
                ref={viewerRef}
                documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
                resourceUrl="https://cdn.syncfusion.com/ej2/32.2.3/dist/ej2-pdfviewer-lib"
                style={{ height: '100%' }}
                enableBookmark={true}
            >
                <Inject
                    services={[
                        Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView,
                        ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer
                    ]}
                />
            </PdfViewerComponent>
        </div>
    );
}

Expected result: The Bookmarks button on the navigation toolbar is enabled and clicking it opens the Bookmarks panel (when the PDF contains bookmarks). Clicking a bookmark navigates to the target location; the buttons demonstrate programmatic navigation and retrieving the bookmark list in the console.

Troubleshooting

  • Bookmarks button is not enabled: confirm the PDF actually contains bookmarks and enableBookmark={true} is set.
  • goToBookmark throws an error: ensure the target page index and coordinates exist; validate values before calling.
  • Missing features: add BookmarkView to the <Inject services={[BookmarkView]} /> list and include resourceUrl or serviceUrl when required.