This tutorial introduces you to the concept of creating a ribbon using HTML Executable's Navigation Bar Editor. If you are familiar with Microsoft Office, you would already have a fair understanding of what a ribbon is. In the context of Microsoft Office, a ribbon is a tool that houses the command buttons and icons in a series of tabs at the top of a window. It provides a rich command presentation and replaces traditional menus with tabs and buttons.

In HTML Executable, you can create a similar structure for your ebook or HTML application using the Navigation Bar Editor. This tool allows you to organize your user interface into different tabs, each containing panels and buttons for various commands. This structure can greatly enhance the user experience, making it easy to find and use different features within your ebook or publication.

In the coming sections, we will delve deeper into the process of creating a ribbon using HTML Executable's Navigation Bar Editor. We'll cover the basics of setting up tabs, adding panels, and populating those panels with buttons for various commands.

How To Manage Tabs

To manage the different tabs in your ribbon, select the ribbon in the editor by clicking on it or choose the "navbar" control in the object list of the Properties editor

Double-click on the "Tabs" property or click the '...' button

The collection editor appears, allowing you to add, delete or move the various tabs in your ribbon. Use the Caption property to change the title of your tabs.

Add a new toolbar to a tab in the ribbon

The easiest way to do this is cloning an existing toolbar. HTML Executable ships with ready-to-import models, just use them as a start.

1.Select the toolbar you want to clone

2.Click "Copy"

3.Deselect the control and choose the destination tab where you want to place the new toolbar.

4.Click "Paste"

The new toolbar can be moved but ensure the "Align" property remains to "alLeft".

You can also change its title with the "Caption" property.

Add a new button to the toolbar and optionally a separator

To add a new button to the toolbar, we clone an existing one. Select the original button to clone (1) and click Copy to clipboard (2)

Select the panel where you want to place the new button and increase its width with the selectors:

Click Paste (1) to paste the clone, and you can then edit the button's properties. For instance, its Caption (2):

Modify the button's icon

To change the button's icon, click "Choose Image" and select the icon (SVG format) you want. You can import new SVG by clicking Add or use existing ones already available in your HTML Executable project.

You then need to associate an action to be executed when the user clicks the button. To do this, select the action to be carried out (1), then enter any parameters required for the action, such as which page to go to (2), and don't forget to click Apply Changes to save (3).