Skip to main content

Navigation Bar

After installing the plugin, you can configure a navigation bar for quick operations. Locate configs/Toolbar.json and customize the navigation bar page by specifying parameters.

This chapter will introduce how to configure the quick navigation bar:

  • You will learn how to customize the navigation bar.
  • You will learn how to debug the navigation bar online.

The navigation bar is located at the top menu of the upper computer.

Navigation Bar

It is commonly used to quickly view plugin status and operate the plugin while switching between interfaces.

Open Toolbar

Customizing the Navigation Bar​

JSON Content​

{
  "name": "DHGrip",
  "icon": "grip.svg",
  "width": 800,
  "height": 900
}

Description of Fields​

FieldTypeDefault ValueRequiredDescription
namestringNoneYesThe display name of the navigation bar.
iconnumber/stringNoneNoIf you need a custom icon, specify the icon path.
widthnumberNoneNoIf you need to customize the navigation page width, specify the width in pixels.
heightnumberNoneNoIf you need to customize the navigation page height, specify the height in pixels.

Navigation Bar Page Development​

The navigation bar page is developed in the ui/Toolbar.tsx file, using the React framework for development.