Modern navigation panel in SfPdfViewer
17 Jul 20268 minutes to read
The modern navigation panel consolidates thumbnails, bookmarks, comments, and custom panels into a single flexible side panel for streamlined navigation.
Enable the modern navigation panel by setting the EnableNavigationPanel property. You can toggle its visibility from the UI or programmatically.
Example: enable the modern navigation panel:
@using Syncfusion.Blazor.SfPdfViewer
<SfPdfViewer2 DocumentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
Height="100%"
Width="100%"
EnableNavigationPanel="true">
</SfPdfViewer2>
Default items in the modern navigation panel
The modern navigation panel contains the following built-in items:
- Comment panel
- Thumbnail panel
- Bookmark panel
Rearrange default items in the modern navigation panel
Use the BuiltInItems property, which accepts a list of NavigationToolbarItem enums. The viewer renders the navigation icons in the exact sequence provided.
Example: display Thumbnails first, followed by Bookmarks and the CommentPanel item.
@using Syncfusion.Blazor.SfPdfViewer
<SfPdfViewer2 DocumentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
Height="100%"
Width="100%"
EnableNavigationPanel="true">
<NavigationToolbarSettings BuiltInItems="navigationToolbarItems"></NavigationToolbarSettings>
</SfPdfViewer2>
@code {
// Defines the list of built-in navigation items in the desired order.
List<NavigationToolbarItem> navigationToolbarItems = new List<NavigationToolbarItem>()
{
NavigationToolbarItem.Thumbnails,
NavigationToolbarItem.Bookmarks,
NavigationToolbarItem.CommentPanel,
};
}
Open or close the navigation panel programmatically
Open or close a navigation panel programmatically by calling the ToggleItemByIndex method. Indices are zero-based and apply to the combined sequence of built-in and custom items.
Example: toggle the navigation panel item at index 1 (Bookmarks, with Thumbnails at index 0):
@using Syncfusion.Blazor.SfPdfViewer
<button id="toggle-navigation-panel-item-btn" @onclick="ToggleBookmarksPanel">Toggle Bookmarks Panel</button>
<SfPdfViewer2 DocumentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
@ref="pdfViewer"
Height="100%"
Width="100%"
EnableNavigationPanel="true">
</SfPdfViewer2>
@code {
private SfPdfViewer2 pdfViewer;
private async Task ToggleBookmarksPanel()
{
// 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 modern navigation panel by creating a list of CustomNavigationToolbarItem objects and assigning it to the CustomItems property.
Each CustomNavigationToolbarItem object includes:
- Index: Zero-based position of the item in the modern navigation panel. The position is relative to the combined sequence of built-in and custom items.
- 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 or 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.
Example: add a custom item that renders a small interactive panel:
@using Syncfusion.Blazor.SfPdfViewer
<SfPdfViewer2 @ref="pdfViewer"
DocumentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
Height="100%"
Width="100%" EnableNavigationPanel="true">
<PdfViewerToolbarSettings ToolbarItems="ToolbarItems"></PdfViewerToolbarSettings>
<NavigationToolbarSettings BuiltInItems="navigationToolbarItems" CustomItems="customNavigationToolbarItems"></NavigationToolbarSettings>
</SfPdfViewer2>
@code {
private SfPdfViewer2 pdfViewer;
// List of standard toolbar items.
List<ToolbarItem> ToolbarItems = new List<ToolbarItem>()
{
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<NavigationToolbarItem> navigationToolbarItems = new List<NavigationToolbarItem>()
{
NavigationToolbarItem.Thumbnails,
NavigationToolbarItem.Bookmarks,
NavigationToolbarItem.CommentPanel,
};
// List to hold the custom navigation toolbar items.
List<CustomNavigationToolbarItem> customNavigationToolbarItems;
// Initializes the component and sets up the custom navigation items.
protected override void OnInitialized()
{
customNavigationToolbarItems = new List<CustomNavigationToolbarItem>()
{
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 @<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;">
<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">
Add Rectangle
</button>
<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">
Add Radius
</button>
<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">
Add Free text
</button>
</div>;
}
// 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);
}
}
Rendering strategies for the navigation panel
SfPdfViewer supports different loading strategies for modern navigation panel content to optimize performance:
- Dynamic: Content for a panel is loaded into the DOM only when that panel is selected. Switching panels replaces the previous content.
- Init: Content for all navigation panels is rendered during the initial load and remains in the DOM.
- Demand: Content for a panel is loaded into the DOM the first time it is selected and then retained.
Example: set the loading strategy to Demand:
@using Syncfusion.Blazor.SfPdfViewer
@using Syncfusion.Blazor.Navigations
<SfPdfViewer2 DocumentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
Height="100%"
Width="100%"
EnableNavigationPanel="true">
<NavigationToolbarSettings LoadOn="ContentLoad.Demand"></NavigationToolbarSettings>
</SfPdfViewer2>Modern navigation panel in mobile view
On mobile devices the modern navigation panel collapses into a toggle menu to save space. Custom items appear at the beginning of this menu.
