Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 20 additions & 0 deletions Document-Processing-toc.html
Original file line number Diff line number Diff line change
Expand Up @@ -320,6 +320,7 @@
<ul>
<li><a href="/document-processing/pdf/pdf-viewer/asp-net-core/getting-started">with Standalone PDF Viewer</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/asp-net-core/getting-started-with-server-backed">with Server-Backed PDF Viewer</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/asp-net-core/server-to-standalone">Migrating from Server-Backed to Standalone</a></li>
</ul>
</li>
<li><a href="/document-processing/pdf/pdf-viewer/asp-net-core/feature-module">Feature Modules</a></li>
Expand Down Expand Up @@ -399,6 +400,8 @@
<li><a href="/document-processing/pdf/pdf-viewer/asp-net-core/annotation/annotation-permission">Annotation Permission</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/asp-net-core/annotation/signature-annotation">Handwritten Signature</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/asp-net-core/annotation/line-angle-constraints">Line Angle Constraint</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/asp-net-core/annotation/annotation-comment-filter">Annotation Comments Filter</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/asp-net-core/annotation/ink-eraser">Ink Eraser</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/asp-net-core/annotation/custom-data">Adding custom Data in annotations</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/asp-net-core/annotation/flatten-annotation">Flatten Annotations into the PDF </a></li>
<li>Export and Import Annotations
Expand Down Expand Up @@ -550,6 +553,7 @@
<ul>
<li><a href="/document-processing/pdf/pdf-viewer/asp-net-mvc/getting-started">with Standalone PDF Viewer</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/asp-net-mvc/getting-started-with-server-backed">with Server-Backed PDF Viewer</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/asp-net-mvc/server-to-standalone">Migrating from Server-Backed to Standalone</a></li>
</ul>
</li>
<li><a href="/document-processing/pdf/pdf-viewer/asp-net-mvc/feature-module">Feature Modules</a></li>
Expand Down Expand Up @@ -607,6 +611,8 @@
<li><a href="/document-processing/pdf/pdf-viewer/asp-net-mvc/annotation/comments">Comments</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/asp-net-mvc/annotation/ink-annotation">Ink Annotation</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/asp-net-mvc/annotation/line-angle-constraints">Line Angle Constraint</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/asp-net-mvc/annotation/annotation-comment-filter">Annotation Comments Filter</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/asp-net-mvc/annotation/ink-eraser">Ink Eraser</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/asp-net-mvc/annotation/signature-annotation">Handwritten signature</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/asp-net-mvc/annotation/annotation-event">Annotations Events</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/asp-net-mvc/annotation/annotations-in-mobile-view">Annotations in Mobile view</a></li>
Expand Down Expand Up @@ -753,6 +759,7 @@
<ul>
<li><a href="/document-processing/pdf/pdf-viewer/angular/getting-started">with Standalone PDF Viewer</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/angular/getting-started-with-server-backed">with Server-Backed PDF Viewer</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/angular/server-to-standalone">Migrating from Server-Backed to Standalone</a></li>
</ul>
</li>
<li><a href="/document-processing/pdf/pdf-viewer/angular/ui-builder-skill">Agentic UI Builder Skill</a></li>
Expand Down Expand Up @@ -871,6 +878,8 @@
<li><a href="/document-processing/pdf/pdf-viewer/angular/annotation/annotation-permission">Annotation Permission</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/angular/annotation/signature-annotation">Handwritten Signature</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/angular/annotation/line-angle-constraints">Line Angle Constraint</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/angular/annotation/annotation-comment-filter">Annotation Comments Filter</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/angular/annotation/ink-eraser">Ink Eraser</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/angular/annotation/custom-data">Adding custom Data in annotations</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/angular/annotation/flatten-annotation">Flatten Annotations into the PDF </a></li>
<li>Export and Import Annotations
Expand Down Expand Up @@ -1434,6 +1443,8 @@
<li><a href="/document-processing/pdf/pdf-viewer/react/annotation/annotation-permission">Annotation Permission</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/react/annotation/signature-annotation">Handwritten Signature</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/react/annotation/line-angle-constraints">Line Angle Constraint</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/react/annotation/annotation-comment-filter">Annotation Comments Filter</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/react/annotation/ink-eraser">Ink Eraser</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/react/annotation/custom-data">Adding custom Data in annotations</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/react/annotation/flatten-annotation">Flatten Annotations into the PDF </a></li>
<li>Export and Import Annotations
Expand Down Expand Up @@ -1628,6 +1639,7 @@
<ul>
<li><a href="/document-processing/pdf/pdf-viewer/vue/getting-started">with Standalone PDF Viewer</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/vue/getting-started-with-server-backed">with Server-Backed PDF Viewer</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/vue/server-to-standalone">Migrating from Server-Backed to Standalone</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/vue/getting-started-application">Vue 3</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/vue/quasar">Quasar</a></li>
</ul>
Expand Down Expand Up @@ -1697,6 +1709,8 @@
<li><a href="/document-processing/pdf/pdf-viewer/vue/annotation/free-text-annotation">Free Text Annotation</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/vue/annotation/ink-annotation">Ink Annotation</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/vue/annotation/line-angle-constraints">Line Angle Constraints</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/vue/annotation/annotation-comment-filter">Annotation Comments Filter</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/vue/annotation/ink-eraser">Ink Eraser</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/vue/annotation/annotation-event">Annotations Events</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/vue/annotation/annotations-in-mobile-view">Annotations in Mobile View</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/vue/annotation/comments">Comments</a></li>
Expand Down Expand Up @@ -1852,6 +1866,7 @@
<ul>
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es5/getting-started">with Standalone PDF Viewer</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es5/getting-started-with-server-backed">with Server-Backed PDF Viewer</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es5/server-to-standalone">Migrating from Server-Backed to Standalone</a></li>
</ul>
</li>
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es5/feature-module">Feature Modules</a></li>
Expand Down Expand Up @@ -1934,6 +1949,8 @@
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es5/annotations/annotation-permission">Annotation Permission</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es5/annotations/signature-annotation">Handwritten Signature</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es5/annotations/line-angle-constraints">Line Angle Constraint</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es5/annotations/annotation-comment-filter">Annotation Comments Filter</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es5/annotations/ink-eraser">Ink Eraser</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es5/annotations/custom-data">Adding custom Data in annotations</a></li>
<li>Export and Import Annotations
<ul>
Expand Down Expand Up @@ -2119,6 +2136,7 @@
<ul>
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/getting-started">with Standalone PDF Viewer</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/getting-started-with-server-backed">with Server-Backed PDF Viewer</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/server-to-standalone">Migrating from Server-Backed to Standalone</a></li>
</ul>
</li>
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/module-injection">Module Injection</a></li>
Expand Down Expand Up @@ -2202,6 +2220,8 @@
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/annotations/annotation-permission">Annotation Permission</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/annotations/signature-annotation">Handwritten Signature</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/annotations/line-angle-constraints">Line Angle Constraint</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/annotations/annotation-comment-filter">Annotation Comments Filter</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/annotations/ink-eraser">Ink Eraser</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/annotations/custom-data">Adding custom Data in annotations</a></li>
<li>Export and Import Annotations
<ul>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,22 +1,40 @@
---
layout: post
title: Table of contents navigation in PDF Viewer | Syncfusion
description: Learn how to navigate PDFs using the table of contents in the Syncfusion PDF Viewer control for React.
title: Hyperlink navigation in React PDF Viewer | Syncfusion
description: Learn how to configure hyperlink navigation, including table-of-contents entries, in the Syncfusion PDF Viewer control for React.
platform: document-processing
control: PDF Viewer
documentation: ug
domainurl: ##DomainURL##
---

# Table of contents navigation in PDF Viewer
# Hyperlink navigation in React PDF Viewer

## Overview:
## Overview

This guide shows how to configure hyperlink behavior in the React PDF Viewer: enable/disable links, control how links open, and handle hyperlink events.
This guide shows how to configure hyperlink behavior in the React PDF Viewer: table of contents navigation, enable/disable links, control how links open, and handle hyperlink events.

## Steps
N> The table of contents pane and hyperlink interactions rely on the same navigation infrastructure. When these capabilities are enabled, the PDF Viewer automatically surfaces TOC entries and clickable links defined in the PDF.

### 1. Enable or disable hyperlink interaction
## Required modules

Inject the following modules to enable navigation: `Toolbar`, `Magnification`, `Navigation`, `LinkAnnotation`, `BookmarkView`, `TextSelection`, `ThumbnailView`, and optionally `Annotation`.

## Table of contents navigation

Navigate through PDF sections using the table of contents pane. The viewer displays bookmarks and outline entries defined in the PDF. Select an entry to jump to that destination. Empty pane indicates the PDF has no table of contents structure.

![Table of contents pane in PDF Viewer](../images/toc.png)

## Hyperlink navigation

Configure how the PDF Viewer handles embedded links pointing to external websites or in-document destinations. Control link activation, behavior, and events.

![Hyperlink navigation example in PDF Viewer showing clickable links](../images/link.png)

## How to configure hyperlinks

### Enable or disable hyperlinks

By default hyperlinks are enabled. Set the [`enableHyperlink`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#enablehyperlink) property to `false` to make links non-interactive.

Expand Down Expand Up @@ -56,9 +74,9 @@ export default function App() {
{% endhighlight %}
{% endtabs %}

### 2. Control how links open
### Control how links open

Use the [`hyperlinkOpenState`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#hyperlinkopenstate) property to choose whether external links open in the current tab or a new tab or in a whole new window.
Use the [`hyperlinkOpenState`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#hyperlinkopenstate) property to choose whether external links open in the current tab or a new tab:

{% tabs %}
{% highlight ts tabtitle="App.tsx" %}
Expand Down Expand Up @@ -96,9 +114,9 @@ export default function App() {
{% endhighlight %}
{% endtabs %}

### 3. Handle hyperlink events
### Handle hyperlink events

Use the [`hyperlinkClick`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#hyperlinkclick) and [`hyperlinkMouseOver`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#hyperlinkmouseover) events to intercept clicks or show custom tooltips. The examples below show how to log the hyperlink and optionally cancel navigation.
Use the [`hyperlinkClick`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#hyperlinkclick) and [`hyperlinkMouseOver`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#hyperlinkmouseover) events to intercept clicks or show custom tooltips:

{% tabs %}
{% highlight ts tabtitle="App.tsx" %}
Expand Down Expand Up @@ -147,11 +165,12 @@ export default function App() {

## Troubleshooting

- If links still open when [`enableHyperlink={false}`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#enablehyperlink), ensure the page uses the correct [`resourceUrl`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#resourceurl)/[`serviceUrl`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#serviceurl) and that `LinkAnnotation` is not being re-enabled elsewhere.
- If links still open when [`enableHyperlink={false}`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#enablehyperlink), ensure the page uses the correct [`resourceUrl`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#resourceurl) and that `LinkAnnotation` is not being re-enabled elsewhere. Disabling hyperlinks only affects the viewer's behavior and does not alter the original PDF document.
- If events do not fire, verify that `Inject` includes `LinkAnnotation` and any other services shown in the examples.
- For TOC navigation, ensure the PDF document contains bookmarks or an outline structure. If the pane appears empty, the document may not have a table of contents defined.

## See also

- [Bookmark navigation](./bookmark)
- [Page navigation](./page)
- [Page thumbnail navigation](./page-thumbnail)
- [Page thumbnail navigation](./page-thumbnail)