diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation.md b/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation.md
new file mode 100644
index 000000000..a4065af1f
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation.md
@@ -0,0 +1,24 @@
+---
+layout: post
+title: Navigation in Blazor SfPdfViewer Component | Syncfusion
+description: Learn all about page navigation, bookmarks, thumbnails, hyperlinks, and the modern navigation panel in the Blazor SfPdfViewer component.
+platform: document-processing
+control: SfPdfViewer
+documentation: ug
+---
+
+# Navigation in Blazor SfPdfViewer Component
+
+Page navigation in the Syncfusion® SfPdfViewer component can be performed using the following methods:
+
+* Scroll through the pages.
+* Use the Go to page option in the built-in toolbar.
+* Select a bookmark in the bookmark panel.
+* Select a page in the thumbnail panel.
+* Click hyperlinks or entries in the table of contents.
+* Modern navigation panel.
+
+## See also
+
+* [Magnification in Blazor SfPdfViewer Component](./magnification)
+* [Getting Started with SmartPdfViewer in Blazor Web App](../../Smart-PDF-Viewer/blazor/getting-started/web-app)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/bookmark-navigation.md b/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/bookmark-navigation.md
new file mode 100644
index 000000000..c4564d0d9
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/bookmark-navigation.md
@@ -0,0 +1,30 @@
+---
+layout: post
+title: Bookmark navigation in Blazor SfPdfViewer | Syncfusion
+description: Learn how to use the bookmark panel in the Blazor PDF Viewer to navigate to labeled destinations, including visibility options and behavior.
+platform: document-processing
+control: SfPdfViewer
+documentation: ug
+---
+
+# Bookmark navigation
+
+Use the bookmark panel to jump directly to labeled destinations in a PDF.
+
+Bookmarks defined in the PDF document are automatically loaded and listed in the bookmark panel. Selecting a bookmark navigates to its target. Nested bookmarks are supported; if the document has no bookmarks, the panel appears empty.
+
+
+
+Enable or disable the bookmark panel by setting the [EnableBookmarkPanel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableBookmarkPanel) property. This property only controls the panel’s visibility; bookmarks are read from the PDF.
+
+```cshtml
+
+@using Syncfusion.Blazor.SfPdfViewer
+
+
+
+@code{
+ public string DocumentPath { get; set; } = "wwwroot/Data/PDF_Succinctly.pdf";
+}
+
+```
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/hyperlink-navigation.md b/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/hyperlink-navigation.md
new file mode 100644
index 000000000..8c694908a
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/hyperlink-navigation.md
@@ -0,0 +1,19 @@
+---
+layout: post
+title: Hyperlink navigation in Blazor SfPdfViewer | Syncfusion
+description: Learn how the Blazor PDF Viewer handles hyperlinks, including external URLs and in-document links, click behavior, and common link types.
+platform: document-processing
+control: SfPdfViewer
+documentation: ug
+---
+
+# Hyperlink navigation
+
+Use hyperlinks in a PDF to navigate either to external URLs or to destinations within the same document. Hyperlinks are detected from the PDF content and work by default.
+
+- External links (HTTP/HTTPS, mailto, etc.) open in the browser according to browser security and settings (for example, a new tab or window).
+- In-document links navigate directly to the referenced page or location in the viewer.
+
+If a document does not contain hyperlinks, no link-specific highlighting appears.
+
+
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/modern-navigation-panel.md b/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/modern-navigation-panel.md
new file mode 100644
index 000000000..c63bbf11e
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/modern-navigation-panel.md
@@ -0,0 +1,245 @@
+---
+layout: post
+title: Modern navigation panel in Blazor SfPdfViewer | Syncfusion
+description: Learn how the modern navigation panel in the Syncfusion Blazor PDF Viewer (SfPdfViewer2) consolidates thumbnails, bookmarks, comments, and custom panels with flexible layouts.
+platform: document-processing
+control: SfPdfViewer
+documentation: ug
+---
+
+# Modern navigation panel
+
+The modern navigation panel consolidates thumbnails, bookmarks, comments, and custom panels in a single, flexible side panel for a streamlined navigation experience.
+
+Enable the modern navigation panel using the [EnableNavigationPanel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableNavigationPanel) property. Visibility can be toggled from the UI or programmatically.
+
+The following example enables the modern navigation panel:
+
+```cshtml
+
+@using Syncfusion.Blazor.SfPdfViewer;
+
+
+
+
+```
+
+
+
+## Default items in the navigation panel
+
+The modern navigation panel contains the following built-in items:
+
+- Comment panel
+- Thumbnail panel
+- Bookmark panel
+
+## Rearrange default items in the navigation panel
+
+Use the `BuiltInItems` property, which accepts a list of [NavigationToolbarItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.NavigationToolbarItem.html) enums. The viewer renders the navigation icons in the exact sequence provided.
+
+The following example displays Thumbnails first, followed by Bookmarks and the Comment panel.
+
+```cshtml
+
+@using Syncfusion.Blazor.SfPdfViewer;
+
+
+
+
+
+@code {
+ // Defines the list of built-in navigation items in the desired order.
+ List navigationToolbarItems = new List()
+ {
+ NavigationToolbarItem.Thumbnails,
+ NavigationToolbarItem.Bookmarks,
+ NavigationToolbarItem.CommentPanel,
+ };
+}
+
+```
+
+
+
+## Open or close the navigation panel programmatically
+
+Open or close a navigation panel programmatically by calling the [ToggleItemByIndex](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_ToggleItemByIndex_System_Int32_) method. Indices are zero-based and apply to the combined sequence of built-in and custom items.
+
+The following example toggles the visibility of the second item in the navigation panel (index 1).
+
+```cshtml
+
+@using Syncfusion.Blazor.SfPdfViewer;
+
+
+
+
+
+@code {
+ private SfPdfViewer2? pdfViewer;
+ private async Task OpenCustomPanel()
+ {
+ // Toggles the visibility of the navigation panel item at the specified index (1 in this case).
+ await pdfViewer.ToggleItemByIndex(1);
+ }
+}
+
+```
+
+
+
+### Add custom items to the navigation panel
+
+You can add custom items to the SfPdfViewer navigation toolbar. Create a list of [CustomNavigationToolbarItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.CustomNavigationToolbarItem.html) objects and assign it to the `CustomItems` property.
+
+Each CustomNavigationToolbarItem object includes:
+- Index: Position of the item in the toolbar.
+- Name: Display name of the item.
+- TooltipText: Text shown on hover.
+- HeaderText: Header displayed at the top of the custom panel.
+- IconCss: CSS class for the item's icon.
+- Template: Custom template for panel content.
+- ItemType: Item type, such as [NavigationToolbarItemType.Button](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.NavigationToolbarItemType.html#Syncfusion_Blazor_SfPdfViewer_NavigationToolbarItemType_Button) or [NavigationToolbarItemType.Separator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.NavigationToolbarItemType.html#Syncfusion_Blazor_SfPdfViewer_NavigationToolbarItemType_Separator).
+
+### Add a custom template for the navigation panel
+
+Define a custom UI for a navigation panel by assigning a RenderFragment to the `Template` property of a [CustomNavigationToolbarItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.CustomNavigationToolbarItem.html).
+
+The following example adds a default toolbar with a custom item containing a small, interactive panel with a customized UI.
+
+```cshtml
+
+@using Syncfusion.Blazor.SfPdfViewer
+
+
+
+
+
+
+@code {
+ SfPdfViewer2 pdfViewer;
+ // List of standard toolbar items.
+ List ToolbarItems = new List()
+ {
+ ToolbarItem.OpenOption,
+ ToolbarItem.PageNavigationTool,
+ ToolbarItem.MagnificationTool,
+ ToolbarItem.CommentTool,
+ ToolbarItem.SelectionTool,
+ ToolbarItem.PanTool,
+ ToolbarItem.UndoRedoTool,
+ ToolbarItem.SubmitForm,
+ ToolbarItem.SearchOption,
+ ToolbarItem.PrintOption,
+ ToolbarItem.DownloadOption
+ };
+ // List of built-in navigation panel items.
+ List navigationToolbarItems = new List()
+ {
+ NavigationToolbarItem.Thumbnails,
+ NavigationToolbarItem.Bookmarks,
+ NavigationToolbarItem.CommentPanel,
+ };
+ // List to hold the custom navigation toolbar items.
+ List customNavigationToolbarItems;
+
+ // Initializes the component and sets up the custom navigation items.
+ protected override void OnInitialized()
+ {
+ customNavigationToolbarItems = new List()
+ {
+ new CustomNavigationToolbarItem()
+ {
+ Name = "Edit Annotation",
+ HeaderText = "Edit Annotation",
+ IconCss = "e-pv-annotation-icon e-pv-icon",
+ Index = 4,
+ TooltipText = "Edit Annotation",
+ ItemType = NavigationToolbarItemType.Button,
+ Template = EditAnnotationTemplate()
+ }
+ };
+ }
+
+ // Defines the RenderFragment for the custom panel's content.
+ private RenderFragment EditAnnotationTemplate()
+ {
+ return @
+
+
+
+
;
+ }
+
+ // Sets the annotation mode to Rectangle.
+ private async Task AddRectangle()
+ {
+ await pdfViewer.SetAnnotationModeAsync(AnnotationType.Rectangle);
+ }
+
+ // Sets the annotation mode to Radius.
+ private async Task AddRadius()
+ {
+ await pdfViewer.SetAnnotationModeAsync(AnnotationType.Radius);
+ }
+
+ // Sets the annotation mode to FreeText.
+ private async Task AddFreeText()
+ {
+ await pdfViewer.SetAnnotationModeAsync(AnnotationType.FreeText);
+ }
+}
+
+```
+
+
+
+### Demand rendering for the navigation panel
+
+SfPdfViewer supports different loading strategies for navigation panel content to optimize performance. The available options are:
+
+* **Dynamic** : The content for a panel is only loaded into the DOM when that panel is selected. When you switch to a different panel, the previous content is removed and replaced.
+* **Init** : The content for all navigation panels is rendered during the initial load and is always present in the DOM.
+* **Demand** : The content for a panel is loaded into the DOM the first time it is selected. The content is then kept in the DOM, even if you navigate to other panels.
+
+The following example sets the loading strategy to Demand.
+
+```cshtml
+
+@using Syncfusion.Blazor.SfPdfViewer;
+@using Syncfusion.Blazor.Navigations;
+
+
+
+
+
+```
+
+### Modern navigation panel in mobile view
+
+On mobile devices, the navigation toolbar collapses into a toggle menu to save space. Any custom items appear at the beginning of this menu.
+
+
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/page-navigation.md b/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/page-navigation.md
new file mode 100644
index 000000000..2920f0ca4
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/page-navigation.md
@@ -0,0 +1,109 @@
+---
+layout: post
+title: Navigation in Blazor SfPdfViewer Component | Syncfusion
+description: Learn how to navigate PDF pages in Blazor SfPdfViewer using toolbar buttons and programmatic APIs—first, previous, next, last, and go to page.
+platform: document-processing
+control: SfPdfViewer
+documentation: ug
+---
+
+# Page navigation
+
+Move between pages using the built-in toolbar or programmatic APIs.
+
+The built-in toolbar of SfPdfViewer contains the following page navigation tools:
+
+* **First page**: Navigates to the first page in the document.
+* **Previous page**: Scrolls backward one page at a time.
+* **Next page**: Scrolls forward one page at a time.
+* **Last page**: Navigates to the last page in the document.
+* **Go to page**: Jumps to a specified page number.
+
+
+
+The navigation tools appear in the primary toolbar. Enable or disable these buttons by setting the [EnableNavigation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableNavigation) property. This setting affects only the toolbar buttons; programmatic navigation APIs remain available regardless of this value.
+
+```cshtml
+
+@using Syncfusion.Blazor.SfPdfViewer
+
+
+
+@code{
+ public string DocumentPath { get; set; } = "wwwroot/Data/PDF_Succinctly.pdf";
+}
+
+```
+
+Page navigation can also be performed programmatically. The following example shows how to navigate between pages using APIs.
+
+N> GoToPageAsync expects a 1-based page number.
+
+```cshtml
+
+@using Syncfusion.Blazor.Buttons
+@using Syncfusion.Blazor.Inputs
+@using Syncfusion.Blazor.SfPdfViewer
+
+
+ Go To First Page
+
+
+
+ Go To Last Page
+
+
+
+ Go To Next Page
+
+
+
+
+
+
+
+ Go To Page
+
+
+
+ Go To Previous Page
+
+
+
+
+@code{
+ SfPdfViewer2 Viewer;
+ SfTextBox TextBox;
+ public string DocumentPath { get; set; } = "wwwroot/data/PDF_Succinctly.pdf";
+
+ public async void OnFirstPageClick(MouseEventArgs args)
+ {
+ await Viewer.GoToFirstPageAsync();
+ }
+
+ public async void OnLastPageClick(MouseEventArgs args)
+ {
+ await Viewer.GoToLastPageAsync();
+ }
+
+ public async void OnNextPageClick(MouseEventArgs args)
+ {
+ await Viewer.GoToNextPageAsync();
+ }
+
+ public async void OnPageClick(MouseEventArgs args)
+ {
+ int pageIndex = int.Parse(TextBox.Value.ToString());
+ await Viewer.GoToPageAsync(pageIndex);
+ }
+
+ public async void OnPreviousPageClick(MouseEventArgs args)
+ {
+ await Viewer.GoToPreviousPageAsync();
+ }
+}
+
+```
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/page-thumbnail-navigation.md b/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/page-thumbnail-navigation.md
new file mode 100644
index 000000000..d5d55f7e8
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/page-thumbnail-navigation.md
@@ -0,0 +1,57 @@
+---
+layout: post
+title: Page thumbnail navigation in Blazor SfPdfViewer | Syncfusion
+description: Learn how to use the thumbnail panel in the Blazor PDF Viewer to preview pages and navigate quickly, with visibility and startup options.
+platform: document-processing
+control: SfPdfViewer
+documentation: ug
+---
+
+# Page thumbnail navigation
+
+Use the thumbnail panel to preview pages and navigate quickly through a PDF. Each thumbnail represents a page; selecting one navigates to that page in the viewer.
+
+
+
+Enable or disable the thumbnail panel by setting the [EnableThumbnailPanel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableThumbnailPanel) property. This property enables the feature; visibility at load time is controlled separately.
+
+```cshtml
+
+@using Syncfusion.Blazor.SfPdfViewer
+
+
+
+@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](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_IsThumbnailPanelOpen) property to true. This controls initial visibility and works when the thumbnail feature is enabled.
+
+The following example opens the thumbnail panel at initial render.
+
+```cshtml
+
+@using Syncfusion.Blazor.SfPdfViewer
+
+
+
+
+
+@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](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Thumbnail/Show%20thumbnail%20panel).
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/table-of-content-navigation.md b/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/table-of-content-navigation.md
new file mode 100644
index 000000000..337947cce
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/table-of-content-navigation.md
@@ -0,0 +1,44 @@
+---
+layout: post
+title: Table of contents navigation in Blazor SfPdfViewer | Syncfusion
+description: Learn how to use the table of contents and hyperlinks in the Blazor PDF Viewer to navigate within a PDF, with link target options.
+platform: document-processing
+control: SfPdfViewer
+documentation: ug
+---
+
+# Table of contents navigation
+
+Use the table of contents (TOC) to jump to sections within a PDF. Each TOC entry maps to a location in the document; selecting one navigates to that destination.
+
+
+
+Enable or disable both hyperlink and TOC navigation by setting the [EnableHyperlink](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableHyperlink) property. TOC entries are parsed from the PDF; if the document has no TOC, no entries appear.
+
+```cshtml
+
+@using Syncfusion.Blazor.SfPdfViewer
+
+
+
+@code{
+ public string DocumentPath { get; set; } = "wwwroot/Data/PDF_Succinctly.pdf";
+}
+
+```
+
+Control where external hyperlinks open by using the [HyperlinkOpenState](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_HyperlinkOpenState) property (for example, a new tab). In-document TOC links always navigate within the viewer.
+
+```cshtml
+
+@using Syncfusion.Blazor.SfPdfViewer
+
+
+
+@code{
+ public string DocumentPath { get; set; } = "wwwroot/Data/PDF_Succinctly.pdf";
+}
+```
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/navigation.md b/Document-Processing/PDF/PDF-Viewer/blazor/navigation.md
deleted file mode 100644
index c8c9c8177..000000000
--- a/Document-Processing/PDF/PDF-Viewer/blazor/navigation.md
+++ /dev/null
@@ -1,468 +0,0 @@
----
-layout: post
-title: Navigation in Blazor SfPdfViewer Component | Syncfusion
-description: Learn all about page navigation, bookmarks, thumbnails, hyperlinks, and the modern navigation panel in the Blazor SfPdfViewer component.
-platform: document-processing
-control: SfPdfViewer
-documentation: ug
----
-
-# Navigation in Blazor SfPdfViewer Component
-
-Page navigation in the Syncfusion® SfPdfViewer component can be performed using the following methods:
-
-* Scroll through the pages.
-* Use the Go to page option in the built-in toolbar.
-* Select a bookmark in the bookmark panel.
-* Select a page in the thumbnail panel.
-* Click hyperlinks or entries in the table of contents.
-
-## Page navigation
-
-The built-in toolbar of SfPdfViewer contains the following page navigation tools:
-
-* **First** **Page**: Navigates to the first page in the document.
-* **Last** **Page**: Navigates to the last page in the document.
-* **Next** **Page**: Scrolls forward one page at a time.
-* **Go** **To**: Quickly jumps to a specified page number.
-* **Previous** **Page**: Scrolls backward one page at a time.
-
-
-
-Enable or disable the page navigation tools in the default toolbar by setting the [EnableNavigation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableNavigation) property.
-
-```cshtml
-
-@using Syncfusion.Blazor.SfPdfViewer
-
-
-
-@code{
- public string DocumentPath { get; set; } = "wwwroot/Data/PDF_Succinctly.pdf";
-}
-
-```
-
-You can also perform page navigation programmatically as follows.
-
-```cshtml
-
-@using Syncfusion.Blazor.Buttons
-@using Syncfusion.Blazor.Inputs
-@using Syncfusion.Blazor.SfPdfViewer
-
-
- Go To First Page
-
-
-
- Go To Last Page
-
-
-
- Go To Next Page
-
-
-
-
-
-
-
- Go To Page
-
-
-
- Go To Previous Page
-
-
-
-
-@code{
- SfPdfViewer2 Viewer;
- SfTextBox TextBox;
- public string DocumentPath { get; set; } = "wwwroot/data/PDF_Succinctly.pdf";
-
- public async void OnFirstPageClick(MouseEventArgs args)
- {
- await Viewer.GoToFirstPageAsync();
- }
-
- public async void OnLastPageClick(MouseEventArgs args)
- {
- await Viewer.GoToLastPageAsync();
- }
-
- public async void OnNextPageClick(MouseEventArgs args)
- {
- await Viewer.GoToNextPageAsync();
- }
-
- public async void OnPageClick(MouseEventArgs args)
- {
- int pageIndex = int.Parse(TextBox.Value.ToString());
- await Viewer.GoToPageAsync(pageIndex);
- }
-
- public async void OnPreviousPageClick(MouseEventArgs args)
- {
- await Viewer.GoToPreviousPageAsync();
- }
-}
-
-```
-
-## Bookmark navigation
-
-Bookmarks saved in the PDF are loaded and listed in the bookmark panel (left navigation pane). Users can jump to areas of interest by selecting a bookmark.
-
-
-
-Enable or disable the bookmark panel by setting the [EnableBookmarkPanel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableBookmarkPanel) property.
-
-```cshtml
-
-@using Syncfusion.Blazor.SfPdfViewer
-
-
-
-@code{
- public string DocumentPath { get; set; } = "wwwroot/Data/PDF_Succinctly.pdf";
-}
-
-```
-
-## Page thumbnail navigation
-
-Page thumbnails are miniature representations of the document pages. Selecting a thumbnail navigates to the corresponding page in the viewer.
-
-
-
-Enable or disable the thumbnail panel by setting the [EnableThumbnailPanel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableThumbnailPanel) property.
-
-```cshtml
-
-@using Syncfusion.Blazor.SfPdfViewer
-
-
-
-@code{
- public string DocumentPath { get; set; } = "wwwroot/Data/PDF_Succinctly.pdf";
-}
-
-```
-
-### Open thumbnail panel programmatically
-
-To display the thumbnail panel initially when loading a document, set the [IsThumbnailPanelOpen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_IsThumbnailPanelOpen) property to true.
-
-The following code illustrates how to open the thumbnail panel programmatically.
-
-```cshtml
-
-@using Syncfusion.Blazor.SfPdfViewer
-
-
-
-
-
-@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](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Thumbnail/Show%20thumbnail%20panel).
-
-## Hyperlink navigation
-
-The hyperlink navigation feature enables navigation to URLs (website links) in a PDF file.
-
-
-
-## Table of content navigation
-
-Table of contents navigation allows users to move to different sections of a PDF listed in the table of contents.
-
-
-
-Enable or disable both hyperlink and table of contents navigation by setting the [EnableHyperlink](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableHyperlink) property.
-
-```cshtml
-
-@using Syncfusion.Blazor.SfPdfViewer
-
-
-
-@code{
- public string DocumentPath { get; set; } = "wwwroot/Data/PDF_Succinctly.pdf";
-}
-
-```
-
-Specify the target behavior for hyperlinks using the [HyperlinkOpenState](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_HyperlinkOpenState) property.
-
-```cshtml
-
-@using Syncfusion.Blazor.SfPdfViewer
-
-
-
-@code{
- public string DocumentPath { get; set; } = "wwwroot/Data/PDF_Succinctly.pdf";
-}
-```
-
-## Modern Navigation Panel
-
-The SfPdfViewer includes a modern navigation panel that replaces the legacy panel. It extends the viewer beyond thumbnails, bookmarks, and comments to provide a more comprehensive and interactive experience.
-
-Toggle the visibility of the modern navigation panel using the [EnableNavigationPanel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableNavigationPanel) property.
-
-The following example enables the modern navigation panel:
-
-```cshtml
-
-@using Syncfusion.Blazor.SfPdfViewer;
-
-
-
-
-```
-
-
-
-### Default items in navigation panel
-
-The modern navigation panel contains the following built-in items:
-
-* **Comment** **panel**
-* **Thumbnail** **panel**
-* **Bookmark** **panel**
-
-### Rearrange the default items of navigation panel
-
-Use the `BuiltInItems` property, which accepts a list of [NavigationToolbarItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.NavigationToolbarItem.html) enums. The viewer renders the navigation icons in the exact sequence provided.
-
-The following example displays Thumbnails first, followed by Bookmarks and the Comment panel.
-
-```cshtml
-
-@using Syncfusion.Blazor.SfPdfViewer;
-
-
-
-
-
-@code {
- // Defines the list of built-in navigation items in the desired order.
- List navigationToolbarItems = new List()
- {
- NavigationToolbarItem.Thumbnails,
- NavigationToolbarItem.Bookmarks,
- NavigationToolbarItem.CommentPanel,
- };
-}
-
-```
-
-
-
-### Open or close navigation panel programmatically
-
-Open or close a navigation panel programmatically by calling the [ToggleItemByIndex](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_ToggleItemByIndex_System_Int32_) method. This method toggles the item at the specified index, opening it if closed and closing it if open.
-
-The following example toggles the visibility of the second item in the navigation panel (index 1).
-
-```cshtml
-
-@using Syncfusion.Blazor.SfPdfViewer;
-
-
-
-
-
-@code {
- private SfPdfViewer2? pdfViewer;
- private async Task OpenCustomPanel()
- {
- // Toggles the visibility of the navigation panel item at the specified index (1 in this case).
- await pdfViewer.ToggleItemByIndex(1);
- }
-}
-
-```
-
-
-
-### How to add customize items in the navigation panel
-
-You can add custom items to the SfPdfViewer navigation toolbar. Create a list of [CustomNavigationToolbarItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.CustomNavigationToolbarItem.html) objects and assign it to the `CustomItems` property.
-
-Each CustomNavigationToolbarItem object has the following properties to define its appearance and behavior:
-* **Index** : Sets the position of the item in the toolbar.
-* **Name** : Assigns a custom name to the item.
-* **TooltipText** : Defines the text shown on hover.
-* **HeaderText** : Sets the header text displayed at the top of the custom panel.
-* **IconCss** : Specifies the CSS class for the item's icon.
-* **Template** : Defines a custom template for the panel content.
-* **ItemType** : Determines the item type, such as a clickable button [NavigationToolbarItemType.Button](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.NavigationToolbarItemType.html#Syncfusion_Blazor_SfPdfViewer_NavigationToolbarItemType_Button) or a visual separator [NavigationToolbarItemType.Separator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.NavigationToolbarItemType.html#Syncfusion_Blazor_SfPdfViewer_NavigationToolbarItemType_Separator).
-
-### How to add the customize template for the navigation panel
-
-Define a custom UI for a navigation panel by assigning a RenderFragment to the `Template` property of a [CustomNavigationToolbarItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.CustomNavigationToolbarItem.html).
-
-The following example adds a default toolbar with a custom item containing a small, interactive panel with a customized UI.
-
-```cshtml
-
-@using Syncfusion.Blazor.SfPdfViewer
-
-
-
-
-
-
-@code {
- SfPdfViewer2 pdfViewer;
- // List of standard toolbar items.
- List ToolbarItems = new List()
- {
- ToolbarItem.OpenOption,
- ToolbarItem.PageNavigationTool,
- ToolbarItem.MagnificationTool,
- ToolbarItem.CommentTool,
- ToolbarItem.SelectionTool,
- ToolbarItem.PanTool,
- ToolbarItem.UndoRedoTool,
- ToolbarItem.SubmitForm,
- ToolbarItem.SearchOption,
- ToolbarItem.PrintOption,
- ToolbarItem.DownloadOption
- };
- // List of built-in navigation panel items.
- List navigationToolbarItems = new List()
- {
- NavigationToolbarItem.Thumbnails,
- NavigationToolbarItem.Bookmarks,
- NavigationToolbarItem.CommentPanel,
- };
- // List to hold the custom navigation toolbar items.
- List customNavigationToolbarItems;
-
- // Initializes the component and sets up the custom navigation items.
- protected override void OnInitialized()
- {
- customNavigationToolbarItems = new List()
- {
- new CustomNavigationToolbarItem()
- {
- Name = "Edit Annotation",
- HeaderText = "Edit Annotation",
- IconCss = "e-pv-annotation-icon e-pv-icon",
- Index = 4,
- TooltipText = "Edit Annotation",
- ItemType = NavigationToolbarItemType.Button,
- Template = EditAnnotationTemplate()
- }
- };
- }
-
- // Defines the RenderFragment for the custom panel's content.
- private RenderFragment EditAnnotationTemplate()
- {
- return @
-
-
-
-
;
- }
-
- // Sets the annotation mode to Rectangle.
- private async Task AddRectangle()
- {
- await pdfViewer.SetAnnotationModeAsync(AnnotationType.Rectangle);
- }
-
- // Sets the annotation mode to Radius.
- private async Task AddRadius()
- {
- await pdfViewer.SetAnnotationModeAsync(AnnotationType.Radius);
- }
-
- // Sets the annotation mode to FreeText.
- private async Task AddFreeText()
- {
- await pdfViewer.SetAnnotationModeAsync(AnnotationType.FreeText);
- }
-}
-
-```
-
-
-
-### Demand rendering for navigation panel
-
-SfPdfViewer supports different loading strategies for navigation panel content to optimize performance. The available options are:
-
-* **Dynamic** : The content for a panel is only loaded into the DOM when that panel is selected. When you switch to a different panel, the previous content is removed and replaced.
-* **Init** : The content for all navigation panels is rendered during the initial load and is always present in the DOM.
-* **Demand** : The content for a panel is loaded into the DOM the first time it is selected. The content is then kept in the DOM, even if you navigate to other panels.
-
-The following example sets the loading strategy to Demand.
-
-```cshtml
-
-@using Syncfusion.Blazor.SfPdfViewer;
-@using Syncfusion.Blazor.Navigations;
-
-
-
-
-
-```
-
-### Modern Navigation Panel in Mobile view
-
-On mobile devices, the navigation toolbar is collapsed into a toggle menu to save space. Custom items you add will appear at the beginning of this menu.
-
-
-
-## See also
-
-* [Magnification in Blazor SfPdfViewer Component](./magnification)
-* [Getting Started with SmartPdfViewer in Blazor Web App](../../Smart-PDF-Viewer/blazor/getting-started/web-app)
\ No newline at end of file
From 4c90380cb1a8017861bd39a0d5e843cb06e51761 Mon Sep 17 00:00:00 2001
From: Tamilselvan-Durairaj
<153176971+Tamilselvan-Durairaj@users.noreply.github.com>
Date: Tue, 30 Sep 2025 23:20:15 +0530
Subject: [PATCH 2/3] 984373: Update the navigation url
---
Document-Processing/PDF/PDF-Viewer/blazor/interaction.md | 2 +-
.../PDF/PDF-Viewer/blazor/magnification.md | 2 +-
Document-Processing/PDF/PDF-Viewer/blazor/overview.md | 8 ++++----
3 files changed, 6 insertions(+), 6 deletions(-)
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/interaction.md b/Document-Processing/PDF/PDF-Viewer/blazor/interaction.md
index dada96805..235e5130d 100644
--- a/Document-Processing/PDF/PDF-Viewer/blazor/interaction.md
+++ b/Document-Processing/PDF/PDF-Viewer/blazor/interaction.md
@@ -99,4 +99,4 @@ The following code illustrates how to disable the annotation interaction.
## See also
-* [Navigation in Blazor SfPdfViewer Component](./navigation)
\ No newline at end of file
+* [Navigation in Blazor SfPdfViewer Component](./interactive-pdf-navigation)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/magnification.md b/Document-Processing/PDF/PDF-Viewer/blazor/magnification.md
index d31be50f6..e20e963d5 100644
--- a/Document-Processing/PDF/PDF-Viewer/blazor/magnification.md
+++ b/Document-Processing/PDF/PDF-Viewer/blazor/magnification.md
@@ -358,4 +358,4 @@ See the following image.
## See also
-* [Navigation in Blazor SfPdfViewer Component](./navigation)
\ No newline at end of file
+* [Navigation in Blazor SfPdfViewer Component](./interactive-pdf-navigation)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/overview.md b/Document-Processing/PDF/PDF-Viewer/blazor/overview.md
index cd0d67f07..bf5823e73 100644
--- a/Document-Processing/PDF/PDF-Viewer/blazor/overview.md
+++ b/Document-Processing/PDF/PDF-Viewer/blazor/overview.md
@@ -33,10 +33,10 @@ In the classic viewer, many C# service calls were required to retrieve informati
* Accurate, reliable rendering of PDF pages.
* Easy page navigation with:
- * [Thumbnail page view](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/navigation#page-thumbnail-navigation)
- * [Bookmark panel](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/navigation#bookmark-navigation)
- * [Hyperlink navigation](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/navigation#hyperlink-navigation)
- * [Table of contents navigation](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/navigation#table-of-content-navigation)
+ * [Thumbnail page view](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/interactive-pdf-navigation/page-thumbnail-navigation)
+ * [Bookmark panel](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/interactive-pdf-navigation/bookmark-navigation)
+ * [Hyperlink navigation](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/interactive-pdf-navigation/hyperlink-navigation)
+ * [Table of contents navigation](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/interactive-pdf-navigation/table-of-content-navigation)
* Core interactions:
* [Zooming](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/magnification) and [panning](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/interaction#panning-mode)
* [Text searching](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/text-search)
From 1aa7701b3463ae32f08b60a857004cae878ca851 Mon Sep 17 00:00:00 2001
From: Tamilselvan-Durairaj
<153176971+Tamilselvan-Durairaj@users.noreply.github.com>
Date: Tue, 30 Sep 2025 23:41:11 +0530
Subject: [PATCH 3/3] 984373: Update the CI failures
---
.../interactive-pdf-navigation/bookmark-navigation.md | 2 +-
.../interactive-pdf-navigation/hyperlink-navigation.md | 4 ++--
.../interactive-pdf-navigation/modern-navigation-panel.md | 4 ++--
.../blazor/interactive-pdf-navigation/page-navigation.md | 2 +-
.../page-thumbnail-navigation.md | 2 +-
.../table-of-content-navigation.md | 2 +-
Document-Processing/PDF/PDF-Viewer/blazor/overview.md | 8 ++++----
7 files changed, 12 insertions(+), 12 deletions(-)
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/bookmark-navigation.md b/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/bookmark-navigation.md
index c4564d0d9..f5308d366 100644
--- a/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/bookmark-navigation.md
+++ b/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/bookmark-navigation.md
@@ -7,7 +7,7 @@ control: SfPdfViewer
documentation: ug
---
-# Bookmark navigation
+# Bookmark navigation in SfPdfViewer
Use the bookmark panel to jump directly to labeled destinations in a PDF.
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/hyperlink-navigation.md b/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/hyperlink-navigation.md
index 8c694908a..8459b9538 100644
--- a/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/hyperlink-navigation.md
+++ b/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/hyperlink-navigation.md
@@ -7,11 +7,11 @@ control: SfPdfViewer
documentation: ug
---
-# Hyperlink navigation
+# Hyperlink navigation in SfPdfViewer
Use hyperlinks in a PDF to navigate either to external URLs or to destinations within the same document. Hyperlinks are detected from the PDF content and work by default.
-- External links (HTTP/HTTPS, mailto, etc.) open in the browser according to browser security and settings (for example, a new tab or window).
+- External links (HTTP/HTTPS, etc.) open in the browser according to browser security and settings (for example, a new tab or window).
- In-document links navigate directly to the referenced page or location in the viewer.
If a document does not contain hyperlinks, no link-specific highlighting appears.
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/modern-navigation-panel.md b/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/modern-navigation-panel.md
index c63bbf11e..394ffd78c 100644
--- a/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/modern-navigation-panel.md
+++ b/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/modern-navigation-panel.md
@@ -1,13 +1,13 @@
---
layout: post
title: Modern navigation panel in Blazor SfPdfViewer | Syncfusion
-description: Learn how the modern navigation panel in the Syncfusion Blazor PDF Viewer (SfPdfViewer2) consolidates thumbnails, bookmarks, comments, and custom panels with flexible layouts.
+description: Learn how the modern navigation panel in the Blazor PDF Viewer with custom panels with flexible layouts.
platform: document-processing
control: SfPdfViewer
documentation: ug
---
-# Modern navigation panel
+# Modern navigation panel in SfPdfViewer
The modern navigation panel consolidates thumbnails, bookmarks, comments, and custom panels in a single, flexible side panel for a streamlined navigation experience.
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/page-navigation.md b/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/page-navigation.md
index 2920f0ca4..4478566a2 100644
--- a/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/page-navigation.md
+++ b/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/page-navigation.md
@@ -7,7 +7,7 @@ control: SfPdfViewer
documentation: ug
---
-# Page navigation
+# Page navigation in SfPdfViewer
Move between pages using the built-in toolbar or programmatic APIs.
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/page-thumbnail-navigation.md b/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/page-thumbnail-navigation.md
index d5d55f7e8..4b114924b 100644
--- a/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/page-thumbnail-navigation.md
+++ b/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/page-thumbnail-navigation.md
@@ -7,7 +7,7 @@ control: SfPdfViewer
documentation: ug
---
-# Page thumbnail navigation
+# Page thumbnail navigation in SfPdfViewer
Use the thumbnail panel to preview pages and navigate quickly through a PDF. Each thumbnail represents a page; selecting one navigates to that page in the viewer.
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/table-of-content-navigation.md b/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/table-of-content-navigation.md
index 337947cce..24aa6b091 100644
--- a/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/table-of-content-navigation.md
+++ b/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/table-of-content-navigation.md
@@ -7,7 +7,7 @@ control: SfPdfViewer
documentation: ug
---
-# Table of contents navigation
+# Table of contents navigation in SfPdfViewer
Use the table of contents (TOC) to jump to sections within a PDF. Each TOC entry maps to a location in the document; selecting one navigates to that destination.
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/overview.md b/Document-Processing/PDF/PDF-Viewer/blazor/overview.md
index bf5823e73..cd0d67f07 100644
--- a/Document-Processing/PDF/PDF-Viewer/blazor/overview.md
+++ b/Document-Processing/PDF/PDF-Viewer/blazor/overview.md
@@ -33,10 +33,10 @@ In the classic viewer, many C# service calls were required to retrieve informati
* Accurate, reliable rendering of PDF pages.
* Easy page navigation with:
- * [Thumbnail page view](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/interactive-pdf-navigation/page-thumbnail-navigation)
- * [Bookmark panel](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/interactive-pdf-navigation/bookmark-navigation)
- * [Hyperlink navigation](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/interactive-pdf-navigation/hyperlink-navigation)
- * [Table of contents navigation](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/interactive-pdf-navigation/table-of-content-navigation)
+ * [Thumbnail page view](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/navigation#page-thumbnail-navigation)
+ * [Bookmark panel](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/navigation#bookmark-navigation)
+ * [Hyperlink navigation](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/navigation#hyperlink-navigation)
+ * [Table of contents navigation](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/navigation#table-of-content-navigation)
* Core interactions:
* [Zooming](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/magnification) and [panning](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/interaction#panning-mode)
* [Text searching](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/text-search)