diff --git a/Document-Processing-toc.html b/Document-Processing-toc.html
index d5af25b16..298f66293 100644
--- a/Document-Processing-toc.html
+++ b/Document-Processing-toc.html
@@ -507,16 +507,24 @@
To Box cloud file storage
- Toolbar Customization
+ Toolbar
+
+
Command Manager
Interactive PDF Navigation
Magnification
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/annotation/redaction-annotation.md b/Document-Processing/PDF/PDF-Viewer/blazor/annotation/redaction-annotation.md
index 0a16bf1dd..7e3485346 100644
--- a/Document-Processing/PDF/PDF-Viewer/blazor/annotation/redaction-annotation.md
+++ b/Document-Processing/PDF/PDF-Viewer/blazor/annotation/redaction-annotation.md
@@ -33,7 +33,7 @@ Use the redaction tool on the toolbar to draw over content that should be redact
-N> The redaction tool is not shown on the toolbar by default. Customize the toolbar to include it. For instructions, see the [Toolbar customization](./../toolbar-customization).
+N> The redaction tool is not shown on the toolbar by default. Customize the toolbar to include it. For instructions, see the [Redaction Toolbar customization](../toolbar/redaction-toolbar-customization).
### Adding a Redaction annotation using Programmatically
@@ -350,5 +350,5 @@ For details, see the [Export and import annotations documentation](./import-expo
## See also
* [Adding the shape annotation in PDF viewer](./shape-annotation)
-* [Toolbar customization in PDF viewer](./../toolbar-customization)
+* [Annotation Toolbar customization in PDF viewer](../toolbar/annotation-toolbar-customization)
* [Form designer in PDF viewer](../form-designer/overview)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-print-large-page-document.md b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-print-large-page-document.md
index 123df8d26..095370033 100644
--- a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-print-large-page-document.md
+++ b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-print-large-page-document.md
@@ -57,4 +57,4 @@ N> Ensure that the browser allows pop-ups for the site, because this approach op
## See also
-* [Primary Toolbar Customization in SfPdfViewer](../toolbar-customization)
\ No newline at end of file
+* [Primary Toolbar Customization in SfPdfViewer](../toolbar/primary-toolbar-customization)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/images/annotation-toolbar-mobile-view.png b/Document-Processing/PDF/PDF-Viewer/blazor/images/annotation-toolbar-mobile-view.png
new file mode 100644
index 000000000..0c231776d
Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/images/annotation-toolbar-mobile-view.png differ
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-annotation-toolbar.png b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-annotation-toolbar.png
new file mode 100644
index 000000000..8af0dbbed
Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-annotation-toolbar.png differ
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-form-deigner-toolbar.png b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-form-deigner-toolbar.png
new file mode 100644
index 000000000..787d8ae6b
Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-form-deigner-toolbar.png differ
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-redaction-toolbar.png b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-redaction-toolbar.png
new file mode 100644
index 000000000..0f0c092a0
Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/images/blazor-redaction-toolbar.png differ
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/images/form-designer-toolbar-mobile-view.png b/Document-Processing/PDF/PDF-Viewer/blazor/images/form-designer-toolbar-mobile-view.png
new file mode 100644
index 000000000..3aee851a2
Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/images/form-designer-toolbar-mobile-view.png differ
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/images/mobile-redaction-toolbar.png b/Document-Processing/PDF/PDF-Viewer/blazor/images/mobile-redaction-toolbar.png
new file mode 100644
index 000000000..f1a937fc9
Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/images/mobile-redaction-toolbar.png differ
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/images/modern-navigation-mobile.png b/Document-Processing/PDF/PDF-Viewer/blazor/images/modern-navigation-mobile.png
new file mode 100644
index 000000000..f295048e4
Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/images/modern-navigation-mobile.png differ
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/images/more-options.png b/Document-Processing/PDF/PDF-Viewer/blazor/images/more-options.png
new file mode 100644
index 000000000..b9e93928b
Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/images/more-options.png differ
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/images/primary-toolbar-mobile-view.png b/Document-Processing/PDF/PDF-Viewer/blazor/images/primary-toolbar-mobile-view.png
new file mode 100644
index 000000000..e415a9684
Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/images/primary-toolbar-mobile-view.png differ
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/toolbar-customization.md b/Document-Processing/PDF/PDF-Viewer/blazor/toolbar-customization.md
deleted file mode 100644
index 970898921..000000000
--- a/Document-Processing/PDF/PDF-Viewer/blazor/toolbar-customization.md
+++ /dev/null
@@ -1,643 +0,0 @@
----
-layout: post
-title: Toolbar Customization in Blazor SfPdfViewer Component | Syncfusion
-description: Learn how to customize the toolbar in the Syncfusion SfPdfViewer, including show hide toolbar items, rearrange, adding custom items, and redaction toolbars.
-platform: document-processing
-control: SfPdfViewer
-documentation: ug
----
-
-# Toolbar Customization in Blazor SfPdfViewer Component
-
-The SfPdfViewer includes a built-in toolbar that offers the following options:
-
-* Open PDF file
-* Page navigation
-* Magnification
-* Pan tool
-* Text selection tool
-* Text search
-* Print
-* SubmitForm
-* Comment Tool
-* Download
-* Undo and redo
-* Various annotation tools
-* Form designer tools
-* Redaction annotation tools
-* Bookmark panel
-* Thumbnail panel
-
-
-
-## Show or hide toolbar
-
-In scenarios where a custom toolbar is required, the built-in toolbar can be hidden. Use the [EnableToolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableToolbar) property or the [ShowToolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_ShowToolbarAsync_System_Boolean_) method to show or hide the primary toolbar.
-
-The following code snippet explains how to show or hide toolbar using the EnableToolbar property.
-
-```cshtml
-
-@using Syncfusion.Blazor.SfPdfViewer
-
-
-
-```
-
-The following code snippet explains how to show or hide toolbar using the ShowToolbar method.
-
-```cshtml
-
-@using Syncfusion.Blazor.Buttons
-@using Syncfusion.Blazor.SfPdfViewer
-
-Hide Toolbar
-
-
-
-
-@code {
-
- SfPdfViewer2 pdfViewer;
- public string DocumentPath { get; set; } = "wwwroot/Data/PDF_Succinctly.pdf";
-
- public async void OnClick(MouseEventArgs args)
- {
- await pdfViewer.ShowToolbarAsync(false);
- }
-}
-
-```
-
-[View the sample on GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Toolbar/Custom%20Toolbar/Custom%20Toolbar).
-
-## Show or hide navigation toolbar
-
-The navigation toolbar is the sidebar that provides options to expand or collapse the bookmark and page thumbnail panels. Toggle its visibility by using the [EnableNavigationToolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableNavigationToolbar) property or the [ShowNavigationToolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_ShowNavigationToolbar_System_Boolean_) method.
-
-The following code snippet explains how to show or hide navigation toolbar using the EnableNavigationToolbar property.
-
-```cshtml
-
-@using Syncfusion.Blazor.SfPdfViewer
-
-
-
-```
-
-The following code snippet explains how to show or hide navigation toolbar using the ShowNavigationToolbar method.
-
-```cshtml
-
-@using Syncfusion.Blazor.Buttons
-@using Syncfusion.Blazor.SfPdfViewer
-
-Hide Navigation Toolbar
-
-
-
-@code {
-
- SfPdfViewer2 pdfViewer;
- public string DocumentPath { get; set; } = "wwwroot/Data/PDF_Succinctly.pdf";
-
- public void OnClick(MouseEventArgs args)
- {
- pdfViewer.ShowNavigationToolbar(false);
- }
-}
-
-```
-
-## Show or hide the toolbar item
-
-Toolbar items can be shown or hidden by configuring the `PdfViewerToolbarSettings` class. The following example demonstrates how to display only the specified items in the toolbar. The toolbar will only render the items listed in the collection.
-
-```cshtml
-
-@using Syncfusion.Blazor.SfPdfViewer
-
-
-
-
-
-@code{
-
- public string DocumentPath { get; set; } = "wwwroot/data/PDF_Succinctly.pdf";
-
- List ToolbarItems = new List()
- {
- ToolbarItem.PageNavigationTool,
- ToolbarItem.MagnificationTool,
- ToolbarItem.CommentTool,
- ToolbarItem.SelectionTool,
- ToolbarItem.PanTool,
- ToolbarItem.UndoRedoTool,
- ToolbarItem.CommentTool,
- ToolbarItem.AnnotationEditTool,
- ToolbarItem.SearchOption,
- ToolbarItem.PrintOption,
- ToolbarItem.DownloadOption
- };
-}
-```
-
-## Show or hide annotation toolbar
-
-The annotation toolbar appears below the primary toolbar and provides options to edit annotations. Toggle its visibility using the [EnableAnnotationToolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableAnnotationToolbar) property or the [ShowAnnotationToolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_ShowAnnotationToolbar_System_Boolean_) method.
-
-The following code snippet explains how to show or hide annotation toolbar using the ShowAnnotationToolbar method.
-
-```cshtml
-
-@using Syncfusion.Blazor.SfPdfViewer
-
-
-
-
-
-@code {
-
- private string documentPath { get; set; } = "wwwroot/Data/PDF_Succinctly.pdf";
-
- SfPdfViewer2 viewer;
-
- //Invokes while loading document in the PDFViewer.
- public void DocumentLoad(LoadEventArgs args)
- {
- //Shows the annotation toolbar on initial loading.
- viewer.ShowAnnotationToolbar(true);
- //Code to hide the annoatation toolbar.
- //viewer.ShowAnnotationToolbar(false);
- }
-}
-
-```
-[View the sample on GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Toolbar/Annotation%20Toolbar/Show%20or%20hide%20on%20loading).
-
-## Primary Toolbar Customization
-
-The primary toolbar can be customized by rearranging existing options, disabling default options, and adding new items. A specific index can also be provided to place new items among existing options.
-
-## Rearrange the default options of toolbar
-
-Reorder the [ToolbarItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerToolbarSettings.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerToolbarSettings_ToolbarItems) list to control the display order. The toolbar renders items in the order defined in the collection.
-
-```cshtml
-
-@using Syncfusion.Blazor.SfPdfViewer
-
-
-
-
-
-@code {
-
- public string DocumentPath { get; set; } = "wwwroot/data/PDF_Succinctly.pdf";
-
- List ToolbarItems = new List()
- {
- ToolbarItem.OpenOption,
- ToolbarItem.PageNavigationTool,
- ToolbarItem.SelectionTool,
- ToolbarItem.MagnificationTool,
- ToolbarItem.PanTool,
- ToolbarItem.UndoRedoTool,
- ToolbarItem.CommentTool,
- ToolbarItem.AnnotationEditTool,
- ToolbarItem.SearchOption,
- ToolbarItem.DownloadOption,
- ToolbarItem.PrintOption,
- };
-}
-
-```
-
-
-
-[View the sample on GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Toolbar/Custom%20Toolbar/Primary%20Custom%20Toolbar/Rearrange-Default-Options).
-
-## Disable the default items and Add new items in Primary Toolbar
-
-To customize the primary toolbar by replacing defaults with custom items, set the [ToolbarItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerToolbarSettings.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerToolbarSettings_ToolbarItems) property to null and provide a list of [PdfToolbarItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfToolbarItem.html#Syncfusion_Blazor_SfPdfViewer_PdfToolbarItem__ctor) objects. Each PdfToolbarItem defines a **RenderFragment** and an **Index** to position the custom item. Assign the list to [CustomToolbarItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerToolbarSettings.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerToolbarSettings_CustomToolbarItems).
-
-```cshtml
-
-@using Syncfusion.Blazor.SfPdfViewer;
-@using Syncfusion.Blazor.Navigations;
-
-
-
-
-
-
-@code{
- private string DocumentPath { get; set; } = "wwwroot/Data/PDF_Succinctly.pdf";
- SfPdfViewer2 Viewer;
- MemoryStream stream;
-
- // List provide the position and element for the custom toolbar items
- public List CustomToolbarItems = new List()
- {
- new PdfToolbarItem (){ Index = 0, Template = @GetTemplate("PreviousPage")},
- new PdfToolbarItem (){ Index = 1, Template = @GetTemplate("NextPage")},
- new PdfToolbarItem (){ Index = 2, Template = @GetTemplate("Save")},
- new PdfToolbarItem (){ Index = 3, Template = @GetTemplate("Download")}
- };
-
- // Get the renderfragment element for the custom toolbaritems in the primary toolbar
- private static RenderFragment GetTemplate(string name)
- {
- return __builder =>
- {
- if (name == "PreviousPage")
- {
-
-
- }
- else if(name == "NextPage")
- {
-
-
- }
- else if(name == "Save")
- {
-
-
- }
- else if(name == "Download")
- {
-
-
- }
- };
- }
-
- // Click for the custom toolbaritems in the primary toolbar
- public async void ClickAction(ClickEventArgs Item)
- {
- if (Item.Item.Id == "previousPage")
- {
- //Navigate to previous page of the PDF document.
- await Viewer.GoToPreviousPageAsync();
- }
- else if (Item.Item.Id == "nextPage")
- {
- //Navigate to next page page of the PDF document.
- await Viewer.GoToNextPageAsync();
- }
- else if(Item.Item.Id == "save")
- {
- //Gets the loaded PDF document with the changes.
- byte[] data = await Viewer.GetDocumentAsync();
- //Save the PDF document to a MemoryStream.
- stream = new MemoryStream(data);
- //Load a PDF document from the MemoryStream.
- await Viewer.LoadAsync(stream);
- }
- else if (Item.Item.Id == "download")
- {
- //Downloads the PDF document
- await Viewer.DownloadAsync();
- }
- }
-}
-
-```
-
-
-
-[View the sample on GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Toolbar/Custom%20Toolbar/Primary%20Custom%20Toolbar/Without-Default-Options).
-
-## How to customize the Primary Toolbar with default options
-
-Both [ToolbarItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerToolbarSettings.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerToolbarSettings_ToolbarItems) and [CustomToolbarItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerToolbarSettings.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerToolbarSettings_CustomToolbarItems) can be used together. Items defined in CustomToolbarItems are inserted at the specified index positions among the ToolbarItems.
-
-```cshtml
-
-@using Syncfusion.Blazor.SfPdfViewer;
-@using Syncfusion.Blazor.Navigations;
-
-
-
-
-
-
-@code {
- private string DocumentPath { get; set; } = "wwwroot/Data/PDF_Succinctly.pdf";
- SfPdfViewer2 Viewer;
- MemoryStream stream;
-
- // List provide the position and element for the custom toolbar items
- public List CustomToolbarItems = new List()
- {
- new PdfToolbarItem (){ Index = 1, Template = @GetTemplate("PreviousPage")},
- new PdfToolbarItem (){ Index = 2, Template = @GetTemplate("NextPage")},
- new PdfToolbarItem (){ Index = 4, Template = @GetTemplate("Save")},
- new PdfToolbarItem (){ Index = 7, Template = @GetTemplate("Download")}
- };
-
- // GetTemaplate and ClickAction function as same as the previous example
-
- // Default toolbar items list provided for the toolbaritems
- public List ToolbarItems = new List()
- {
- Syncfusion.Blazor.SfPdfViewer.ToolbarItem.OpenOption,
- Syncfusion.Blazor.SfPdfViewer.ToolbarItem.SelectionTool,
- Syncfusion.Blazor.SfPdfViewer.ToolbarItem.SearchOption,
- Syncfusion.Blazor.SfPdfViewer.ToolbarItem.PrintOption
- };
-}
-
-```
-
-
-[View the sample on GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Toolbar/Custom%20Toolbar/Primary%20Custom%20Toolbar/With-Default-Options).
-
-## How modify the toolbar Icons in the Primary Toolbar
-
-The appearance of toolbar icons can be customized. The following example demonstrates a custom toolbar with custom icon styles.
-
-```cshtml
-
-@using Syncfusion.Blazor.SfPdfViewer;
-@using Syncfusion.Blazor.Navigations;
-
-
-
-
-
-
-@code {
- private string DocumentPath { get; set; } = "wwwroot/Data/PDF_Succinctly.pdf";
- SfPdfViewer2 Viewer;
- MemoryStream stream;
-
- // List provide the position and element for the custom toolbar items
- public List CustomToolbarItems = new List()
- {
- new PdfToolbarItem (){ Index = 1, Template = @GetTemplate("PreviousPage")},
- new PdfToolbarItem (){ Index = 2, Template = @GetTemplate("NextPage")},
- new PdfToolbarItem (){ Index = 4, Template = @GetTemplate("Save")},
- new PdfToolbarItem (){ Index = 7, Template = @GetTemplate("Download")}
- };
-
- // GetTemaplate and ClickAction function as same as the previous example
-
- // Default toolbar items list provided for the toolbaritems
- public List ToolbarItems = new List()
- {
- Syncfusion.Blazor.SfPdfViewer.ToolbarItem.OpenOption,
- Syncfusion.Blazor.SfPdfViewer.ToolbarItem.SelectionTool,
- Syncfusion.Blazor.SfPdfViewer.ToolbarItem.SearchOption,
- Syncfusion.Blazor.SfPdfViewer.ToolbarItem.PrintOption
- };
-}
-
-
-
-```
-
-
-[View the sample on GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Toolbar/Custom%20Toolbar/Primary%20Custom%20Toolbar/Icon-Style-Change).
-
-N> This applies only to a custom toolbar.
-
-## How to customize the Annotation Toolbar
-
-The [`PdfViewerToolbarSettings`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerToolbarSettings.html) in [SfPdfViewer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.html) allows customization of the Annotation Toolbar by specifying which annotation tools should be displayed. The [`AnnotationToolbarItems`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerToolbarSettings.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerToolbarSettings_AnnotationToolbarItems) property accepts a list of [`AnnotationToolbarItem`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.AnnotationToolbarItem.html) values, ensuring that only the selected tools are available while hiding others. This helps create a simplified and user-friendly toolbar based on the application's needs.
-
-The following example demonstrates how to customize the Annotation Toolbar by specifying a selected set of tools using [`AnnotationToolbarItem`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.AnnotationToolbarItem.html).
-
-```cshtml
-
-
-
-@code {
- // Reference to the SfPdfViewer2 instance
- SfPdfViewer2 PdfViewerInstance { get; set; }
-
- // Define a list of annotation toolbar items to be displayed and usable
- List AnnotationToolbarItems { get; set; } = new List()
- {
- AnnotationToolbarItem.UnderlineTool,
- AnnotationToolbarItem.StampAnnotationTool,
- AnnotationToolbarItem.FreeTextAnnotationTool,
- AnnotationToolbarItem.FontSizeAnnotationTool,
- AnnotationToolbarItem.CloseTool
- };
-}
-```
-Refer to the image below for the desktop view.
-
-
-
-Refer to the image below for the mobile view.
-
-
-
-[View the sample on GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/blob/master/Form%20Designer/Components/Pages/CustomAnnotationToolbar.razor).
-
-## How to customize the Form Designer Toolbar
-
-The [`PdfViewerToolbarSettings`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerToolbarSettings.html) component in [SfPdfViewer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.html) enables customization of the Form Designer Toolbar by defining the available form design tools. The [`FormDesignerToolbarItems`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerToolbarSettings.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerToolbarSettings_FormDesignerToolbarItems) property takes a list of [`FormDesignerToolbarItem`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormDesignerToolbarItem.html) values, allowing you to display only the necessary tools while hiding others. This ensures a more focused and user-friendly form designing experience.
-
-The following example demonstrates how to customize the Form Designer Toolbar by configuring specific tools using [`FormDesignerToolbarItem`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormDesignerToolbarItem.html).
-
-```cshtml
-
-
-
-
-
-
-@code {
- // Reference to the SfPdfViewer2 instance
- SfPdfViewer2 PdfViewerInstance { get; set; }
-
- // Define a list of form designer toolbar items to be displayed and usable
- List FormDesignerToolbarItems { get; set; } = new List()
- {
- FormDesignerToolbarItem.TextBox,
- FormDesignerToolbarItem.CheckBox,
- FormDesignerToolbarItem.ListBox,
- FormDesignerToolbarItem.Delete
- };
-}
-```
-
-Refer to the image below for the desktop view.
-
-
-
-Refer to the image below for the mobile view.
-
-
-
-[View the sample on GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/blob/master/Form%20Designer/Components/Pages/CustomFormDesignerToolbar.razor).
-
-## How to customize the Redaction Toolbar
-
-The Redaction toolbar allows users to mark and permanently redact sensitive content in a PDF document. The following sections explain how to enable and customize the Redaction toolbar for desktop and mobile views and how to control its visibility.
-
-### Enabling the Redaction Toolbar on Desktop
-
-To enable the Redaction toolbar on desktop, include the required `ToolbarItems` in the `SfPdfViewer` component as shown below:
-
-#### Code Example
-
-```cshtml
-@page "/"
-
-
-
-
-
-@code {
- private List ToolbarItems = new List();
- protected override void OnInitialized()
- {
- ToolbarItems = new List()
- {
- ToolbarItem.OpenOption,
- ToolbarItem.PageNavigationTool,
- ToolbarItem.MagnificationTool,
- ToolbarItem.SelectionTool,
- ToolbarItem.PanTool,
- ToolbarItem.UndoRedoTool,
- ToolbarItem.CommentTool,
- ToolbarItem.SubmitForm,
- ToolbarItem.SearchOption,
- ToolbarItem.AnnotationEditTool,
- ToolbarItem.Redaction, // Enables Redaction toolbar
- ToolbarItem.FormDesigner,
- ToolbarItem.PrintOption,
- ToolbarItem.DownloadOption
- };
- }
-}
-```
-Refer to the following image for the desktop view.
-
-
-### Enabling the Redaction Toolbar on Mobile
-
-To enable the Redaction toolbar on mobile, configure the `MobileToolbarItems` property as shown below:
-
-#### Code Example
-
-```cshtml
-@page "/"
-
-
-
-
-
-@code {
- private List MobileToolbarItems = new List();
- protected override void OnInitialized()
- {
- MobileToolbarItems = new List()
- {
- MobileToolbarItem.Open,
- MobileToolbarItem.UndoRedo,
- MobileToolbarItem.EditAnnotation,
- MobileToolbarItem.Redaction, // Enables Redaction toolbar
- MobileToolbarItem.FormDesigner,
- MobileToolbarItem.Search
- };
- }
-}
-```
-
-Refer to the following image for the mobile view.
-
-
-
-## Showing or Hiding the Redaction Toolbar
-
-The Redaction toolbar can be shown or hidden using the built-in toolbar icon or programmatically through the `ShowRedactionToolbar` API.
-
-### Displaying the Redaction Toolbar Using the Toolbar Icon
-
-When `ToolbarItem.Redaction` or `MobileToolbarItem.Redaction` is enabled, selecting the redaction icon in the primary toolbar toggles the visibility of the Redaction toolbar.
-
-Refer to the following image for details.
-
-
-### Displaying the Redaction Toolbar Programmatically
-
-The visibility of the Redaction toolbar can also be controlled programmatically by invoking the `ShowRedactionToolbar` method on the SfPdfViewer instance. This is useful when visibility must be driven by application logic, permissions, or context.
-
-The following example demonstrates how to toggle the visibility of the Redaction toolbar using a button:
-
-```cshtml
-private void ToggleRedactionToolbar()
-{
- isRedactionToolbarVisible = !isRedactionToolbarVisible;
- SfPdfViewer2.ShowRedactionToolbar(isRedactionToolbarVisible);
-}
-```
-
-Refer to the following image for details.
-
-
-## See also
-
-* [Adding the shape annotation in PDF viewer](./annotation/shape-annotation)
-* [Adding the redaction annotation in PDF viewer](./annotation/redaction-annotation)
-* [Form designer in PDF viewer](./form-designer/overview)
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/toolbar.md b/Document-Processing/PDF/PDF-Viewer/blazor/toolbar.md
new file mode 100644
index 000000000..f1b778a57
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/blazor/toolbar.md
@@ -0,0 +1,96 @@
+---
+layout: post
+title: Overview of the toolbars in Blazor SfPdfViewer Component | Syncfusion
+description: Check out and learn about the primary, annotation, form designer, and redaction toolbars in the Syncfusion Blazor SfPdfViewer component.
+platform: document-processing
+control: SfPdfViewer
+documentation: ug
+---
+
+# Toolbar in Blazor SfPdfViewer Component
+
+The SfPdfViewer includes a built-in, responsive toolbar that surfaces common PDF actions and provides entry points to feature-specific toolbars. It adapts across desktop, tablet, and mobile, and can be customized to show or hide items, reorder commands, add custom items, and handle toolbar events.
+
+There are four toolbars in the SfPdfViewer:
+* Primary toolbar
+* Annotation toolbar
+* Form designer toolbar
+* Redaction toolbar
+
+## Primary Toolbar in Blazor SfPdfViewer Component
+
+The SfPdfViewer includes a built-in, responsive primary toolbar that provides quick access to common viewer actions and feature-specific toolbars. It adapts to the available width for desktop, tablet, and mobile layouts.
+
+The primary toolbar includes the following options:
+
+* Open PDF file
+* Page navigation
+* Magnification
+* Pan tool
+* Text selection
+* Text search
+* Print
+* Submit form
+* Comments panel
+* Download
+* Undo and redo
+* Annotation tools
+* Form designer tools
+* Redaction tools
+* Bookmark panel
+* Thumbnail panel
+
+
+
+* [Get more info about primary toolbar customization](./toolbar/primary-toolbar-customization)
+
+## Annotation toolbar in Blazor SfPdfViewer Component
+
+The Annotation toolbar appears below the primary toolbar when annotation features are enabled. It provides tools to create and edit annotations.
+
+* Text markup: Highlight, Underline, Strikethrough, Squiggly
+* Shapes: Line, Arrow, Rectangle, Circle, Polygon
+* Measurement: Distance, Perimeter, Area, Radius, Volume
+* Freehand: Ink, Signature
+* Text: Free text
+* Stamp: Predefined and custom stamps
+* Properties: Color, opacity, thickness, font
+* Edit helpers: Comments panel, Delete
+* Close
+
+
+
+* [Get more info about annotation toolbar customization](./toolbar/annotation-toolbar-customization)
+
+## Form Designer toolbar in Blazor SfPdfViewer Component
+
+Use the Form Designer toolbar to add and configure interactive form fields in the PDF. It appears below the primary toolbar when form designer is enabled.
+
+* Field types: Button, Text box, Password, Checkbox, Radio button, Drop-down, List box, Signature, Initial
+* Edit helpers: Delete
+* Close
+
+
+
+* [Get more info about form designer toolbar customization](./toolbar/form-designer-toolbar-customization)
+
+## Redaction toolbar in Blazor SfPdfViewer Component
+
+The Redaction toolbar provides tools to mark and permanently remove sensitive content from the document. It appears below the primary toolbar when redaction is enabled.
+
+* Redaction marks: Mark for redaction, Redact page
+* Apply redactions: Permanently remove marked content
+* Properties: Redaction properties
+* Edit helpers: Delete
+* Close
+
+
+
+* [Get more info about redaction toolbar customization](./toolbar/redaction-toolbar-customization)
+
+## See also
+
+* [Mobile toolbar](./toolbar/mobile-toolbar)
+* [Adding the shape annotation in PDF viewer](./annotation/shape-annotation)
+* [Adding the redaction annotation in PDF viewer](./annotation/redaction-annotation)
+* [Form designer in PDF viewer](./form-designer/overview)
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/toolbar/annotation-toolbar-customization.md b/Document-Processing/PDF/PDF-Viewer/blazor/toolbar/annotation-toolbar-customization.md
new file mode 100644
index 000000000..4c193c1fb
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/blazor/toolbar/annotation-toolbar-customization.md
@@ -0,0 +1,102 @@
+---
+layout: post
+title: Customize the annotation toolbar in Blazor SfPdfViewer | Syncfusion
+description: Learn how to customize the annotation toolbar in the Syncfusion Blazor SfPdfViewer by showing or hiding default items.
+platform: document-processing
+control: SfPdfViewer
+documentation: ug
+---
+
+# Annotation toolbar customization
+
+The annotation toolbar can be customized by showing or hiding default items and by controlling the order in which the items appear.
+
+## Show or hide the annotation toolbar
+
+Show or hide the annotation toolbar programmatically during initialization or at runtime.
+
+Use the [EnableAnnotationToolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableAnnotationToolbar) property or the [ShowAnnotationToolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_ShowAnnotationToolbar_System_Boolean_) method to toggle visibility.
+
+The following code snippet explains how to show or hide the annotation toolbar using the ShowAnnotationToolbar method.
+
+```cshtml
+
+@using Syncfusion.Blazor.SfPdfViewer
+
+
+
+
+
+@code {
+
+ private string documentPath { get; set; } = "wwwroot/Data/PDF_Succinctly.pdf";
+
+ SfPdfViewer2 viewer;
+
+ //Invokes while loading document in the PDFViewer.
+ public void DocumentLoad(LoadEventArgs args)
+ {
+ //Shows the annotation toolbar on initial loading.
+ viewer.ShowAnnotationToolbar(true);
+ //Code to hide the annoatation toolbar.
+ //viewer.ShowAnnotationToolbar(false);
+ }
+}
+
+```
+[View the sample on GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Toolbar/Annotation%20Toolbar/Show%20or%20hide%20on%20loading).
+
+## How to customize the annotation toolbar
+
+Choose which tools appear and control their order in the annotation toolbar.
+
+Use [`PdfViewerToolbarSettings`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerToolbarSettings.html) with the [`AnnotationToolbarItems`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerToolbarSettings.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerToolbarSettings_AnnotationToolbarItems) property to choose which tools are displayed in the annotation toolbar. The property accepts a list of [`AnnotationToolbarItem`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.AnnotationToolbarItem.html) values. Only the items included in this list are shown; any item not listed is hidden. The rendered order follows the sequence of items in the list.
+
+The annotation toolbar is presented when entering annotation mode in SfPdfViewer2 and adapts responsively based on the available width. Include the Close tool to allow users to exit the annotation toolbar when needed.
+
+The following example demonstrates how to customize the annotation toolbar by specifying a selected set of tools using [`AnnotationToolbarItem`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.AnnotationToolbarItem.html).
+
+```cshtml
+
+
+
+
+@code {
+ // Reference to the SfPdfViewer2 instance
+ SfPdfViewer2 PdfViewerInstance { get; set; }
+
+ // Define a list of annotation toolbar items to be displayed and usable
+ List AnnotationToolbarItems { get; set; } = new List()
+ {
+ AnnotationToolbarItem.UnderlineTool,
+ AnnotationToolbarItem.StampAnnotationTool,
+ AnnotationToolbarItem.FreeTextAnnotationTool,
+ AnnotationToolbarItem.FontSizeAnnotationTool,
+ AnnotationToolbarItem.CloseTool
+ };
+}
+
+```
+Refer to the image below for the desktop view (items shown in the order configured).
+
+
+
+Refer to the image below for the mobile view (responsive layout adapts to width).
+
+
+
+[View the sample on GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/blob/master/Form%20Designer/Components/Pages/CustomAnnotationToolbar.razor).
+
+## See also
+
+* [Adding the shape annotation in PDF viewer](./annotation/shape-annotation)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/toolbar/form-designer-toolbar-customization.md b/Document-Processing/PDF/PDF-Viewer/blazor/toolbar/form-designer-toolbar-customization.md
new file mode 100644
index 000000000..749cd04b5
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/blazor/toolbar/form-designer-toolbar-customization.md
@@ -0,0 +1,78 @@
+---
+layout: post
+title: Customize the form designer toolbar in Blazor SfPdfViewer | Syncfusion
+description: Learn how to customize the form designer toolbar in the Syncfusion Blazor SfPdfViewer by showing or hiding default items.
+platform: document-processing
+control: SfPdfViewer
+documentation: ug
+---
+
+# Form designer toolbar customization
+
+The form designer toolbar can be customized by showing or hiding default items and by controlling the order in which the items appear.
+
+## Show or hide the form designer toolbar
+
+Show or hide the form designer toolbar programmatically.
+
+Use the [EnableFormDesigner](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableFormDesigner) property to toggle visibility.
+
+The following code snippet explains how to show or hide the toolbar using the EnableFormDesigner property.
+
+```cshtml
+
+@using Syncfusion.Blazor.SfPdfViewer
+
+
+
+
+```
+
+## How to customize the form designer toolbar
+
+Choose which tools appear and control their order in the form designer toolbar.
+
+The [`PdfViewerToolbarSettings`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerToolbarSettings.html) component in [SfPdfViewer2](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.html) customizes which form design tools are available. The [`FormDesignerToolbarItems`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerToolbarSettings.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerToolbarSettings_FormDesignerToolbarItems) property accepts a list of [`FormDesignerToolbarItem`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormDesignerToolbarItem.html) values. The items you include are both displayed and rendered in the order listed; any items you omit are hidden. This provides a streamlined, user-friendly form design experience across devices.
+
+The following example demonstrates how to customize the form designer toolbar by configuring specific tools using [`FormDesignerToolbarItem`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormDesignerToolbarItem.html).
+
+```cshtml
+
+
+
+
+
+
+
+@code {
+ // Reference to the SfPdfViewer2 instance
+ SfPdfViewer2 PdfViewerInstance { get; set; }
+
+ // Define a list of form designer toolbar items to be displayed and usable
+ List FormDesignerToolbarItems { get; set; } = new List()
+ {
+ FormDesignerToolbarItem.TextBox,
+ FormDesignerToolbarItem.CheckBox,
+ FormDesignerToolbarItem.ListBox,
+ FormDesignerToolbarItem.Delete
+ };
+}
+
+```
+
+Refer to the image below for the desktop view.
+
+
+
+Refer to the image below for the mobile view.
+
+
+
+[View the sample on GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/blob/master/Form%20Designer/Components/Pages/CustomFormDesignerToolbar.razor).
+
+## See also
+
+* [Form designer in PDF viewer](./form-designer/overview)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/toolbar/mobile-toolbar.md b/Document-Processing/PDF/PDF-Viewer/blazor/toolbar/mobile-toolbar.md
new file mode 100644
index 000000000..f9aa38441
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/blazor/toolbar/mobile-toolbar.md
@@ -0,0 +1,163 @@
+---
+layout: post
+title: Mobile toolbar overview in Blazor SfPdfViewer | Syncfusion
+description: Learn about the primary, annotation, form designer, and redaction toolbars in the Syncfusion Blazor SfPdfViewer component in mobile mode.
+platform: document-processing
+control: SfPdfViewer
+documentation: ug
+---
+
+# Mobile toolbar in Blazor SfPdfViewer
+
+Use the mobile toolbar to access core viewer actions and feature tools on small screens. The primary toolbar adapts to the available width, and feature toolbars (annotation, form designer, redaction) when the corresponding feature is enabled and activated.
+
+## Primary toolbar in mobile mode
+
+The SfPdfViewer includes a built-in, responsive primary toolbar that provides quick access to common viewer actions and feature-specific toolbars. In mobile mode, the toolbar adapts to available width.
+
+The primary toolbar includes the following options:
+
+* Open PDF File
+* Undo and Redo
+* Annotation tools
+* Form designer tools
+* Redaction tools
+* Text search
+
+Reorder the [MobileToolbarItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerToolbarSettings.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerToolbarSettings_MobileToolbarItems) list to control the display order. The toolbar renders items in the order they appear in the collection.
+
+Use the following code snippet to add the redaction toolbar to the PDF Viewer.
+
+```cshtml
+
+@page "/";
+
+
+
+
+@code {
+ SfPdfViewer2? SfPdfViewer2;
+ bool redactionToolbar;
+ private string DocumentPath { get; set; } = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
+ public List? ToolbarItems { get; set; }
+ public List? MobileToolbarItems { get; set; }
+ protected override void OnInitialized()
+ {
+ MobileToolbarItems = new List()
+ {
+ MobileToolbarItem.Open,
+ MobileToolbarItem.UndoRedo,
+ MobileToolbarItem.EditAnnotation,
+ MobileToolbarItem.Redaction,
+ MobileToolbarItem.FormDesigner,
+ MobileToolbarItem.Search
+ };
+ }
+}
+
+```
+
+
+
+### More options menu
+
+Open the overflow (three-dots) menu to access additional actions such as:
+
+- Download: Download the currently opened PDF document.
+- Bookmark: View and navigate bookmarks within the document.
+
+
+
+## Annotation toolbar in mobile mode
+
+The annotation toolbar appears when annotation features are enabled and provides tools to create and edit annotations. In mobile mode, it appears at the bottom of the viewer.
+
+* Text markup: Highlight, Underline, Strikethrough, Squiggly
+* Shapes: Line, Arrow, Rectangle, Circle, Polygon, Volume
+* Measurement: Distance, Perimeter, Area, Radius
+* Freehand: Ink, Signature
+* Text: Free text
+* Stamp: Predefined and custom stamps
+* Properties: Color, Opacity, Thickness, Font
+* Edit helpers: Delete
+* Close
+
+
+
+## Form designer toolbar in mobile mode
+
+Use the form designer toolbar to add and configure interactive form fields in the PDF. In mobile mode, it appears at the bottom of the viewer.
+
+* Field types: Button, Text box, Password, Check box, Radio button, Drop-down, List box, Signature, Initial
+* Edit helpers: Delete
+* Close
+
+
+
+## Redaction toolbar in mobile mode
+
+The redaction toolbar provides tools to mark and permanently remove sensitive content from the document. In mobile mode, it appears at the bottom of the viewer.
+
+* Redaction marks: Mark for redaction, Redact page
+* Apply redactions: Permanently remove marked content
+* Properties: Redaction properties
+* Edit helpers: Delete
+* Close
+
+
+
+## Enable desktop mode on mobile
+
+Enable the desktop toolbar on mobile devices with the [EnableDesktopMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableDesktopMode) API. This replaces the mobile toolbar with the desktop layout and provides access to additional actions and controls.
+
+```cshtml
+@using Syncfusion.Blazor.SfPdfViewer
+
+
+
+```
+
+[View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Toolbar)
+
+## Modern navigation panel in mobile view
+
+On mobile devices, the navigation toolbar collapses into a toggle menu to save space. Any custom items added appear at the beginning of this menu.
+
+
+
+Enable the modern navigation panel by setting [EnableNavigationPanel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableNavigationPanel) to true.
+
+```cshtml
+@using Syncfusion.Blazor.SfPdfViewer
+
+
+
+```
+[View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Toolbar)
+
+## Enable scrolling in desktop mode with touch gestures
+
+For smooth scrolling of PDF documents on mobile while in desktop mode, disable text selection (set [EnableTextSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableTextSelection) to false) to allow touch panning.
+
+```cshtml
+@using Syncfusion.Blazor.SfPdfViewer
+
+
+
+```
+[View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Toolbar)
+
+## Print option availability
+
+The Print option is not available in mobile mode by default. To use printing on mobile, enable the desktop toolbar with the [EnableDesktopMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableDesktopMode) API. Availability and behavior may vary by mobile browser.
+
+## See also
+
+- [Annotations in mobile view](../annotation/annotations-in-mobile-view)
+- [Form designer in mobile view](../form-designer/form-designer-in-mobile-view)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/toolbar/primary-toolbar-customization.md b/Document-Processing/PDF/PDF-Viewer/blazor/toolbar/primary-toolbar-customization.md
new file mode 100644
index 000000000..64356ca03
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/blazor/toolbar/primary-toolbar-customization.md
@@ -0,0 +1,408 @@
+---
+layout: post
+title: Customize the primary toolbar in Blazor SfPdfViewer | Syncfusion
+description: Learn how to customize the primary toolbar in the SfPdfviewer by showing or hiding default items, rearranging items, and adding custom items.
+platform: document-processing
+control: SfPdfViewer
+documentation: ug
+---
+
+# Primary toolbar customization
+
+The primary toolbar can be customized by rearranging existing items, disabling default items, and adding custom items. New items can be placed at specific index positions among the existing items.
+
+## Show or hide the primary toolbar
+
+Toggle the built-in primary toolbar to create custom toolbar experiences or simplify the UI.
+
+In scenarios where a custom toolbar is required, the built-in toolbar can be hidden. Use the [EnableToolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableToolbar) property or the [ShowToolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_ShowToolbarAsync_System_Boolean_) method to show or hide the primary toolbar.
+
+The following code snippet explains how to show or hide the toolbar using the EnableToolbar property.
+
+```cshtml
+
+@using Syncfusion.Blazor.SfPdfViewer
+
+
+
+```
+
+The following code snippet explains how to show or hide the toolbar using the ShowToolbar method.
+
+```cshtml
+
+@using Syncfusion.Blazor.Buttons
+@using Syncfusion.Blazor.SfPdfViewer
+
+Hide Toolbar
+
+
+
+
+@code {
+
+ SfPdfViewer2 pdfViewer;
+ public string DocumentPath { get; set; } = "wwwroot/Data/PDF_Succinctly.pdf";
+
+ public async void OnClick(MouseEventArgs args)
+ {
+ await pdfViewer.ShowToolbarAsync(false);
+ }
+}
+
+```
+
+[View the sample on GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Toolbar/Custom%20Toolbar/Custom%20Toolbar).
+
+## Show or hide the navigation toolbar
+
+Control the sidebar that toggles bookmarks and thumbnails to match the app’s layout needs.
+
+The navigation toolbar is the sidebar that provides options to expand or collapse the bookmark and page thumbnail panels. Toggle its visibility by using the [EnableNavigationToolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableNavigationToolbar) property or the [ShowNavigationToolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_ShowNavigationToolbar_System_Boolean_) method.
+
+The following code snippet explains how to show or hide the navigation toolbar using the EnableNavigationToolbar property.
+
+```cshtml
+
+@using Syncfusion.Blazor.SfPdfViewer
+
+
+
+```
+
+The following code snippet explains how to show or hide the navigation toolbar using the ShowNavigationToolbar method.
+
+```cshtml
+
+@using Syncfusion.Blazor.Buttons
+@using Syncfusion.Blazor.SfPdfViewer
+
+Hide Navigation Toolbar
+
+
+
+@code {
+
+ SfPdfViewer2 pdfViewer;
+ public string DocumentPath { get; set; } = "wwwroot/Data/PDF_Succinctly.pdf";
+
+ public void OnClick(MouseEventArgs args)
+ {
+ pdfViewer.ShowNavigationToolbar(false);
+ }
+}
+
+```
+
+## Customize the default toolbar items
+
+Display only the required default actions and control their order.
+
+Customize toolbar items by configuring the `PdfViewerToolbarSettings` class. The following example shows how to display only the specified items. The toolbar renders only the items listed in the collection and in the same order.
+
+```cshtml
+
+@using Syncfusion.Blazor.SfPdfViewer
+
+
+
+
+
+@code{
+
+ public string DocumentPath { get; set; } = "wwwroot/data/PDF_Succinctly.pdf";
+
+ List ToolbarItems = new List()
+ {
+ ToolbarItem.PageNavigationTool,
+ ToolbarItem.MagnificationTool,
+ ToolbarItem.CommentTool,
+ ToolbarItem.SelectionTool,
+ ToolbarItem.PanTool,
+ ToolbarItem.UndoRedoTool,
+ ToolbarItem.CommentTool,
+ ToolbarItem.AnnotationEditTool,
+ ToolbarItem.SearchOption,
+ ToolbarItem.PrintOption,
+ ToolbarItem.DownloadOption
+ };
+}
+
+```
+
+## Rearrange the default toolbar items
+
+Change the visual order of default items by reordering the collection.
+
+Reorder the [ToolbarItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerToolbarSettings.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerToolbarSettings_ToolbarItems) list to control the display order. The toolbar renders items in the order they appear in the collection.
+
+```cshtml
+
+@using Syncfusion.Blazor.SfPdfViewer
+
+
+
+
+
+@code {
+
+ public string DocumentPath { get; set; } = "wwwroot/data/PDF_Succinctly.pdf";
+
+ List ToolbarItems = new List()
+ {
+ ToolbarItem.OpenOption,
+ ToolbarItem.PageNavigationTool,
+ ToolbarItem.SelectionTool,
+ ToolbarItem.MagnificationTool,
+ ToolbarItem.PanTool,
+ ToolbarItem.UndoRedoTool,
+ ToolbarItem.CommentTool,
+ ToolbarItem.AnnotationEditTool,
+ ToolbarItem.SearchOption,
+ ToolbarItem.DownloadOption,
+ ToolbarItem.PrintOption,
+ };
+}
+
+```
+
+
+
+[View the sample on GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Toolbar/Custom%20Toolbar/Primary%20Custom%20Toolbar/Rearrange-Default-Options).
+
+## Disable default items and add custom items in the primary toolbar
+
+Replace built-in items entirely with custom buttons rendered via templates at specific indexes.
+
+To replace the default items with custom items, set the [ToolbarItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerToolbarSettings.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerToolbarSettings_ToolbarItems) property to null and provide a list of [PdfToolbarItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfToolbarItem.html#Syncfusion_Blazor_SfPdfViewer_PdfToolbarItem__ctor) objects. Each PdfToolbarItem defines a **RenderFragment** template and an **Index** to position the custom item. Assign the list to [CustomToolbarItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerToolbarSettings.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerToolbarSettings_CustomToolbarItems) to render the custom items at the specified index positions.
+
+```cshtml
+
+@using Syncfusion.Blazor.SfPdfViewer;
+@using Syncfusion.Blazor.Navigations;
+
+
+
+
+
+
+@code{
+ private string DocumentPath { get; set; } = "wwwroot/Data/PDF_Succinctly.pdf";
+ SfPdfViewer2 Viewer;
+ MemoryStream stream;
+
+ // List provide the position and element for the custom toolbar items
+ public List CustomToolbarItems = new List()
+ {
+ new PdfToolbarItem (){ Index = 0, Template = @GetTemplate("PreviousPage")},
+ new PdfToolbarItem (){ Index = 1, Template = @GetTemplate("NextPage")},
+ new PdfToolbarItem (){ Index = 2, Template = @GetTemplate("Save")},
+ new PdfToolbarItem (){ Index = 3, Template = @GetTemplate("Download")}
+ };
+
+ // Get the renderfragment element for the custom toolbaritems in the primary toolbar
+ private static RenderFragment GetTemplate(string name)
+ {
+ return __builder =>
+ {
+ if (name == "PreviousPage")
+ {
+
+
+ }
+ else if(name == "NextPage")
+ {
+
+
+ }
+ else if(name == "Save")
+ {
+
+
+ }
+ else if(name == "Download")
+ {
+
+
+ }
+ };
+ }
+
+ // Click for the custom toolbaritems in the primary toolbar
+ public async void ClickAction(ClickEventArgs Item)
+ {
+ if (Item.Item.Id == "previousPage")
+ {
+ //Navigate to previous page of the PDF document.
+ await Viewer.GoToPreviousPageAsync();
+ }
+ else if (Item.Item.Id == "nextPage")
+ {
+ //Navigate to next page page of the PDF document.
+ await Viewer.GoToNextPageAsync();
+ }
+ else if(Item.Item.Id == "save")
+ {
+ //Gets the loaded PDF document with the changes.
+ byte[] data = await Viewer.GetDocumentAsync();
+ //Save the PDF document to a MemoryStream.
+ stream = new MemoryStream(data);
+ //Load a PDF document from the MemoryStream.
+ await Viewer.LoadAsync(stream);
+ }
+ else if (Item.Item.Id == "download")
+ {
+ //Downloads the PDF document
+ await Viewer.DownloadAsync();
+ }
+ }
+}
+
+```
+
+
+
+[View the sample on GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Toolbar/Custom%20Toolbar/Primary%20Custom%20Toolbar/Without-Default-Options).
+
+## Customize the primary toolbar with default options
+
+Combine default and custom items; custom items are inserted at their Index among the default items.
+
+Use both [ToolbarItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerToolbarSettings.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerToolbarSettings_ToolbarItems) and [CustomToolbarItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerToolbarSettings.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerToolbarSettings_CustomToolbarItems) together to combine default and custom items. Custom items are inserted at the specified index positions among the default ToolbarItems.
+
+```cshtml
+
+@using Syncfusion.Blazor.SfPdfViewer;
+@using Syncfusion.Blazor.Navigations;
+
+
+
+
+
+
+@code {
+ private string DocumentPath { get; set; } = "wwwroot/Data/PDF_Succinctly.pdf";
+ SfPdfViewer2 Viewer;
+ MemoryStream stream;
+
+ // List provide the position and element for the custom toolbar items
+ public List CustomToolbarItems = new List()
+ {
+ new PdfToolbarItem (){ Index = 1, Template = @GetTemplate("PreviousPage")},
+ new PdfToolbarItem (){ Index = 2, Template = @GetTemplate("NextPage")},
+ new PdfToolbarItem (){ Index = 4, Template = @GetTemplate("Save")},
+ new PdfToolbarItem (){ Index = 7, Template = @GetTemplate("Download")}
+ };
+
+ // GetTemaplate and ClickAction function as same as the previous example
+
+ // Default toolbar items list provided for the toolbaritems
+ public List ToolbarItems = new List()
+ {
+ Syncfusion.Blazor.SfPdfViewer.ToolbarItem.OpenOption,
+ Syncfusion.Blazor.SfPdfViewer.ToolbarItem.SelectionTool,
+ Syncfusion.Blazor.SfPdfViewer.ToolbarItem.SearchOption,
+ Syncfusion.Blazor.SfPdfViewer.ToolbarItem.PrintOption
+ };
+}
+
+```
+
+
+[View the sample on GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Toolbar/Custom%20Toolbar/Primary%20Custom%20Toolbar/With-Default-Options).
+
+## Modify the toolbar icons in the primary toolbar
+
+Adjust icon glyphs and styles for custom toolbar items using CSS.
+
+Customize the appearance of toolbar icons for custom toolbar items. The following example demonstrates a custom toolbar with custom icon styles.
+
+```cshtml
+
+@using Syncfusion.Blazor.SfPdfViewer;
+@using Syncfusion.Blazor.Navigations;
+
+
+
+
+
+
+@code {
+ private string DocumentPath { get; set; } = "wwwroot/Data/PDF_Succinctly.pdf";
+ SfPdfViewer2 Viewer;
+ MemoryStream stream;
+
+ // List provide the position and element for the custom toolbar items
+ public List CustomToolbarItems = new List()
+ {
+ new PdfToolbarItem (){ Index = 1, Template = @GetTemplate("PreviousPage")},
+ new PdfToolbarItem (){ Index = 2, Template = @GetTemplate("NextPage")},
+ new PdfToolbarItem (){ Index = 4, Template = @GetTemplate("Save")},
+ new PdfToolbarItem (){ Index = 7, Template = @GetTemplate("Download")}
+ };
+
+ // GetTemaplate and ClickAction function as same as the previous example
+
+ // Default toolbar items list provided for the toolbaritems
+ public List ToolbarItems = new List()
+ {
+ Syncfusion.Blazor.SfPdfViewer.ToolbarItem.OpenOption,
+ Syncfusion.Blazor.SfPdfViewer.ToolbarItem.SelectionTool,
+ Syncfusion.Blazor.SfPdfViewer.ToolbarItem.SearchOption,
+ Syncfusion.Blazor.SfPdfViewer.ToolbarItem.PrintOption
+ };
+}
+
+
+
+```
+
+
+[View the sample on GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Toolbar/Custom%20Toolbar/Primary%20Custom%20Toolbar/Icon-Style-Change).
+
+N> This applies only to a custom toolbar.
+
+## See also
+
+* [Mobile toolbar](./toolbar/mobile-toolbar)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/toolbar/redaction-toolbar-customization.md b/Document-Processing/PDF/PDF-Viewer/blazor/toolbar/redaction-toolbar-customization.md
new file mode 100644
index 000000000..44536f338
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/blazor/toolbar/redaction-toolbar-customization.md
@@ -0,0 +1,118 @@
+---
+layout: post
+title: Customize the redaction toolbar in Blazor SfPdfViewer | Syncfusion
+description: Learn how to customize the redaction toolbar in the Syncfusion Blazor SfPdfViewer by showing or hiding default items.
+platform: document-processing
+control: SfPdfViewer
+documentation: ug
+---
+
+# Redaction toolbar customization
+
+The redaction toolbar can be customized by rearranging existing items, disabling default items, and adding custom items. New items can be placed at specific index positions among the existing items.
+
+## Enable the redaction toolbar on desktop
+
+Show the redaction toolbar on desktop by including the required [ToolbarItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.ToolbarItem.html) in the SfPdfViewer2 component.
+
+### Code example
+
+```cshtml
+@page "/"
+
+
+
+
+
+@code {
+ private List ToolbarItems = new List();
+ protected override void OnInitialized()
+ {
+ ToolbarItems = new List()
+ {
+ ToolbarItem.OpenOption,
+ ToolbarItem.PageNavigationTool,
+ ToolbarItem.MagnificationTool,
+ ToolbarItem.SelectionTool,
+ ToolbarItem.PanTool,
+ ToolbarItem.UndoRedoTool,
+ ToolbarItem.CommentTool,
+ ToolbarItem.SubmitForm,
+ ToolbarItem.SearchOption,
+ ToolbarItem.AnnotationEditTool,
+ ToolbarItem.Redaction, // Enables Redaction toolbar
+ ToolbarItem.FormDesigner,
+ ToolbarItem.PrintOption,
+ ToolbarItem.DownloadOption
+ };
+ }
+}
+```
+Refer to the following image for the desktop view.
+
+
+## Enable the redaction toolbar on mobile
+
+Show the redaction toolbar on mobile by configuring the [MobileToolbarItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.MobileToolbarItem.html) property.
+
+### Code example
+
+```cshtml
+@page "/"
+
+
+
+
+
+@code {
+ private List MobileToolbarItems = new List();
+ protected override void OnInitialized()
+ {
+ MobileToolbarItems = new List()
+ {
+ MobileToolbarItem.Open,
+ MobileToolbarItem.UndoRedo,
+ MobileToolbarItem.EditAnnotation,
+ MobileToolbarItem.Redaction, // Enables Redaction toolbar
+ MobileToolbarItem.FormDesigner,
+ MobileToolbarItem.Search
+ };
+ }
+}
+```
+
+Refer to the following image for the mobile view.
+
+
+
+## Show or hide the redaction toolbar
+
+Show or hide the redaction toolbar using the built-in toolbar icon or programmatically with the [ShowRedactionToolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_ShowRedactionToolbar) API.
+
+### Display the redaction toolbar using the toolbar icon
+
+When [ToolbarItem.Redaction](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.ToolbarItem.html#Syncfusion_Blazor_SfPdfViewer_ToolbarItem_Redaction) or [MobileToolbarItem.Redaction](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.MobileToolbarItem.html#Syncfusion_Blazor_SfPdfViewer_MobileToolbarItem_Redaction) is enabled, selecting the redaction icon in the primary toolbar toggles the redaction toolbar.
+
+Refer to the following image for details.
+
+
+### Display the redaction toolbar programmatically
+
+Control visibility through application logic by invoking the `ShowRedactionToolbar` method on the viewer instance.
+
+The following example demonstrates how to toggle the visibility of the redaction toolbar using a button:
+
+```cshtml
+private void ToggleRedactionToolbar()
+{
+ isRedactionToolbarVisible = !isRedactionToolbarVisible;
+ SfPdfViewer2.ShowRedactionToolbar(isRedactionToolbarVisible);
+}
+```
+
+Refer to the following image for details.
+
+
+## See also
+
+* [Adding the redaction annotation in PDF viewer](./annotation/redaction-annotation)
\ No newline at end of file