|
| 1 | +--- |
| 2 | +layout: post |
| 3 | +title: Modern navigation panel in Blazor SfPdfViewer | Syncfusion |
| 4 | +description: Learn how the modern navigation panel in the Blazor PDF Viewer with custom panels with flexible layouts. |
| 5 | +platform: document-processing |
| 6 | +control: SfPdfViewer |
| 7 | +documentation: ug |
| 8 | +--- |
| 9 | + |
| 10 | +# Modern navigation panel in SfPdfViewer |
| 11 | + |
| 12 | +The modern navigation panel consolidates thumbnails, bookmarks, comments, and custom panels in a single, flexible side panel for a streamlined navigation experience. |
| 13 | + |
| 14 | +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. |
| 15 | + |
| 16 | +The following example enables the modern navigation panel: |
| 17 | + |
| 18 | +```cshtml |
| 19 | +
|
| 20 | +@using Syncfusion.Blazor.SfPdfViewer; |
| 21 | +
|
| 22 | +<SfPdfViewer2 DocumentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf" |
| 23 | + Height="100%" |
| 24 | + Width="100%" |
| 25 | + EnableNavigationPanel="true"> |
| 26 | +</SfPdfViewer2> |
| 27 | +
|
| 28 | +``` |
| 29 | + |
| 30 | + |
| 31 | + |
| 32 | +## Default items in the navigation panel |
| 33 | + |
| 34 | +The modern navigation panel contains the following built-in items: |
| 35 | + |
| 36 | +- Comment panel |
| 37 | +- Thumbnail panel |
| 38 | +- Bookmark panel |
| 39 | + |
| 40 | +## Rearrange default items in the navigation panel |
| 41 | + |
| 42 | +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. |
| 43 | + |
| 44 | +The following example displays Thumbnails first, followed by Bookmarks and the Comment panel. |
| 45 | + |
| 46 | +```cshtml |
| 47 | +
|
| 48 | +@using Syncfusion.Blazor.SfPdfViewer; |
| 49 | +
|
| 50 | +<SfPdfViewer2 DocumentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf" |
| 51 | + Height="100%" |
| 52 | + Width="100%" |
| 53 | + EnableNavigationPanel="true"> |
| 54 | + <NavigationToolbarSettings BuiltInItems="navigationToolbarItems"></NavigationToolbarSettings> |
| 55 | +</SfPdfViewer2> |
| 56 | +
|
| 57 | +@code { |
| 58 | + // Defines the list of built-in navigation items in the desired order. |
| 59 | + List<NavigationToolbarItem> navigationToolbarItems = new List<NavigationToolbarItem>() |
| 60 | + { |
| 61 | + NavigationToolbarItem.Thumbnails, |
| 62 | + NavigationToolbarItem.Bookmarks, |
| 63 | + NavigationToolbarItem.CommentPanel, |
| 64 | + }; |
| 65 | +} |
| 66 | +
|
| 67 | +``` |
| 68 | + |
| 69 | + |
| 70 | + |
| 71 | +## Open or close the navigation panel programmatically |
| 72 | + |
| 73 | +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. |
| 74 | + |
| 75 | +The following example toggles the visibility of the second item in the navigation panel (index 1). |
| 76 | + |
| 77 | +```cshtml |
| 78 | +
|
| 79 | +@using Syncfusion.Blazor.SfPdfViewer; |
| 80 | +
|
| 81 | +<button id="toggle-custom-panel-visibility-api-btn" @onclick="OpenCustomPanel">OpenCustomPanel</button> |
| 82 | +<SfPdfViewer2 DocumentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf" |
| 83 | + @ref="pdfViewer" |
| 84 | + Height="100%" |
| 85 | + Width="100%" |
| 86 | + EnableNavigationPanel="true"> |
| 87 | +</SfPdfViewer2> |
| 88 | +
|
| 89 | +@code { |
| 90 | + private SfPdfViewer2? pdfViewer; |
| 91 | + private async Task OpenCustomPanel() |
| 92 | + { |
| 93 | + // Toggles the visibility of the navigation panel item at the specified index (1 in this case). |
| 94 | + await pdfViewer.ToggleItemByIndex(1); |
| 95 | + } |
| 96 | +} |
| 97 | +
|
| 98 | +``` |
| 99 | + |
| 100 | + |
| 101 | + |
| 102 | +### Add custom items to the navigation panel |
| 103 | + |
| 104 | +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. |
| 105 | + |
| 106 | +Each CustomNavigationToolbarItem object includes: |
| 107 | +- Index: Position of the item in the toolbar. |
| 108 | +- Name: Display name of the item. |
| 109 | +- TooltipText: Text shown on hover. |
| 110 | +- HeaderText: Header displayed at the top of the custom panel. |
| 111 | +- IconCss: CSS class for the item's icon. |
| 112 | +- Template: Custom template for panel content. |
| 113 | +- 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). |
| 114 | + |
| 115 | +### Add a custom template for the navigation panel |
| 116 | + |
| 117 | +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). |
| 118 | + |
| 119 | +The following example adds a default toolbar with a custom item containing a small, interactive panel with a customized UI. |
| 120 | + |
| 121 | +```cshtml |
| 122 | +
|
| 123 | +@using Syncfusion.Blazor.SfPdfViewer |
| 124 | +
|
| 125 | +<SfPdfViewer2 @ref="pdfViewer" |
| 126 | + DocumentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf" |
| 127 | + Height="100%" |
| 128 | + Width="100%" EnableNavigationPanel="true"> |
| 129 | + <PdfViewerToolbarSettings ToolbarItems="ToolbarItems"></PdfViewerToolbarSettings> |
| 130 | + <NavigationToolbarSettings BuiltInItems="navigationToolbarItems" CustomItems="customNavigationToolbarItems"></NavigationToolbarSettings> |
| 131 | +</SfPdfViewer2> |
| 132 | +
|
| 133 | +@code { |
| 134 | + SfPdfViewer2 pdfViewer; |
| 135 | + // List of standard toolbar items. |
| 136 | + List<ToolbarItem> ToolbarItems = new List<ToolbarItem>() |
| 137 | + { |
| 138 | + ToolbarItem.OpenOption, |
| 139 | + ToolbarItem.PageNavigationTool, |
| 140 | + ToolbarItem.MagnificationTool, |
| 141 | + ToolbarItem.CommentTool, |
| 142 | + ToolbarItem.SelectionTool, |
| 143 | + ToolbarItem.PanTool, |
| 144 | + ToolbarItem.UndoRedoTool, |
| 145 | + ToolbarItem.SubmitForm, |
| 146 | + ToolbarItem.SearchOption, |
| 147 | + ToolbarItem.PrintOption, |
| 148 | + ToolbarItem.DownloadOption |
| 149 | + }; |
| 150 | + // List of built-in navigation panel items. |
| 151 | + List<NavigationToolbarItem> navigationToolbarItems = new List<NavigationToolbarItem>() |
| 152 | + { |
| 153 | + NavigationToolbarItem.Thumbnails, |
| 154 | + NavigationToolbarItem.Bookmarks, |
| 155 | + NavigationToolbarItem.CommentPanel, |
| 156 | + }; |
| 157 | + // List to hold the custom navigation toolbar items. |
| 158 | + List<CustomNavigationToolbarItem> customNavigationToolbarItems; |
| 159 | +
|
| 160 | + // Initializes the component and sets up the custom navigation items. |
| 161 | + protected override void OnInitialized() |
| 162 | + { |
| 163 | + customNavigationToolbarItems = new List<CustomNavigationToolbarItem>() |
| 164 | + { |
| 165 | + new CustomNavigationToolbarItem() |
| 166 | + { |
| 167 | + Name = "Edit Annotation", |
| 168 | + HeaderText = "Edit Annotation", |
| 169 | + IconCss = "e-pv-annotation-icon e-pv-icon", |
| 170 | + Index = 4, |
| 171 | + TooltipText = "Edit Annotation", |
| 172 | + ItemType = NavigationToolbarItemType.Button, |
| 173 | + Template = EditAnnotationTemplate() |
| 174 | + } |
| 175 | + }; |
| 176 | + } |
| 177 | +
|
| 178 | + // Defines the RenderFragment for the custom panel's content. |
| 179 | + private RenderFragment EditAnnotationTemplate() |
| 180 | + { |
| 181 | + return @<div style="padding: 16px 24px; background-color: #f9fafb; border-top: 1px solid #e5e7eb; display: flex; flex-direction: column; align-items: center; gap: 12px; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px;"> |
| 182 | + <button style="background: #ffffff; color: #374151; border: 1px solid #d1d5db; padding: 10px 18px; border-radius: 6px; font-size: 14px; font-weight: 500; cursor: pointer;" @onclick="AddRectangle"> |
| 183 | + Add Rectangle |
| 184 | + </button> |
| 185 | + <button style="background: #ffffff; color: #374151; border: 1px solid #d1d5db; padding: 10px 18px; border-radius: 6px; font-size: 14px; font-weight: 500; cursor: pointer;" @onclick="AddRadius"> |
| 186 | + Add Radius |
| 187 | + </button> |
| 188 | + <button style="background: #ffffff; color: #374151; border: 1px solid #d1d5db; padding: 10px 18px; border-radius: 6px; font-size: 14px; font-weight: 500; cursor: pointer;" @onclick="AddFreeText"> |
| 189 | + Add Free text |
| 190 | + </button> |
| 191 | + </div>; |
| 192 | + } |
| 193 | +
|
| 194 | + // Sets the annotation mode to Rectangle. |
| 195 | + private async Task AddRectangle() |
| 196 | + { |
| 197 | + await pdfViewer.SetAnnotationModeAsync(AnnotationType.Rectangle); |
| 198 | + } |
| 199 | +
|
| 200 | + // Sets the annotation mode to Radius. |
| 201 | + private async Task AddRadius() |
| 202 | + { |
| 203 | + await pdfViewer.SetAnnotationModeAsync(AnnotationType.Radius); |
| 204 | + } |
| 205 | +
|
| 206 | + // Sets the annotation mode to FreeText. |
| 207 | + private async Task AddFreeText() |
| 208 | + { |
| 209 | + await pdfViewer.SetAnnotationModeAsync(AnnotationType.FreeText); |
| 210 | + } |
| 211 | +} |
| 212 | +
|
| 213 | +``` |
| 214 | + |
| 215 | + |
| 216 | + |
| 217 | +### Demand rendering for the navigation panel |
| 218 | + |
| 219 | +SfPdfViewer supports different loading strategies for navigation panel content to optimize performance. The available options are: |
| 220 | + |
| 221 | +* **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. |
| 222 | +* **Init** : The content for all navigation panels is rendered during the initial load and is always present in the DOM. |
| 223 | +* **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. |
| 224 | + |
| 225 | +The following example sets the loading strategy to Demand. |
| 226 | + |
| 227 | +```cshtml |
| 228 | +
|
| 229 | +@using Syncfusion.Blazor.SfPdfViewer; |
| 230 | +@using Syncfusion.Blazor.Navigations; |
| 231 | +
|
| 232 | +<SfPdfViewer2 DocumentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf" |
| 233 | + Height="100%" |
| 234 | + Width="100%" |
| 235 | + EnableNavigationPanel="true"> |
| 236 | + <NavigationToolbarSettings LoadOn="ContentLoad.Demand"></NavigationToolbarSettings> |
| 237 | +</SfPdfViewer2> |
| 238 | +
|
| 239 | +``` |
| 240 | + |
| 241 | +### Modern navigation panel in mobile view |
| 242 | + |
| 243 | +On mobile devices, the navigation toolbar collapses into a toggle menu to save space. Any custom items appear at the beginning of this menu. |
| 244 | + |
| 245 | + |
0 commit comments