The Navigation Bar Editor is a versatile tool designed to provide you with control over the navigation bar's functionality and aesthetic of your ebook or HTML application. This tool makes the navigation bar highly customizable, enabling users to modify button panels and even design a visual ribbon.

Visual Editor

The Navigation Bar editor is similar to Embarcadero Delphi and C++ Builder Form Designer. On the top side, you have different tools: add item, remove, copy/cut/paste. On the left bottom side, you can edit properties of the selected control(s) with the Properties Editor. On the bottom right side, you can associate actions to the selected control.

 Recommended: Learn how to use the Navigation Bar Editor with our tutorial

Add a new control

Choose the type of control you want and place it onto the form. You can resize the control with the grips. Note that the Tab and Panel controls are containers and can own other controls called children.

  The best way to create new controls is to copy and paste existing ones. To quickly modify an existing UI model, use the Copy/Cut/Paste buttons:

Edit Properties

The Properties Editor shows all properties of a control. It works the same way as the Properties editor described here. You don't have to modify all properties. Only some of them are useful such as Caption, Align, Name, Enabled, Visible...

Align controls for resizing

To create UI controls that resize properly, use the following control properties (see more info):

•Align

•AlignWithMargins

•Anchors

•Margins

•Padding

Remove a control

Select the control(s) you want to delete and click the Delete button (or press the DEL key).

Import/Export a model

Several ready-to-use (and ready to modify) models are shipped with HTML Executable. You'll find them in the `UIModels` subfolder of your HTML Executable location. Model files are given the `.heuim` extension. You can export your own models too.

Control Actions

When you place buttons on the UI form, you must associate an action that will be performed when the user clicks the button.

Remember to click `Apply changes` after setting an action to save the changes.

  See all available control actions

Choose an image for a button

Button images are stored in svg format in a list common to your point project. You can manage this list using the SVG image manager accessible by clicking on Choose image. The SVG Image Manager will be shown. To select the image displayed on a currently edited button, you need to set the image index property to the number corresponding to the image in the list. However, for greater convenience, it's easier to click on the Choose image button, which allows you to visually select the image directly without having to enter a number.

Modify control at runtime

It's possible to change the control's properties at runtime.

  Refer to the dedicated topic "How To Modify Controls At Runtime".