Navigation: Create Ebooks And Publications > Designing User Interface > All UI Components >

Navigation Bar





In HTML Executable, a Navigation Bar is a customizable element of the user interface where you can add panels, buttons to access commands, design ribbons similar to the ones used in Microsoft Office, to create simple or complex interfaces tailored to your needs.



You have the flexibility to design your Navigation Bar in a way that best suits your publication or eBook, whether that be a minimalist design with just a few key buttons or a more extensive set up with various panels and features.


A dedicated editor is available for creating and editing your Navigation Bar. This editor allows you to drag-and-drop different components such as buttons and panels to customize the Navigation Bar according to your requirements. More information on how to use this editor is available.


Generally, if you have a navigation bar in your ebook or HTML application, you can at least have these buttons on it:


1.Home: return to the contents page.

2.Reload: refresh the current page.

3.Back: return to the previous loaded page.

4.Forward: go to the next page (in the case end users have already pressed Back).

5.Print: displays the page printer dialog.

6.Search: displays the search panel.

7.Contents: displays or hides the table of contents (TOC) panel.

8.Favorites: displays or hides the Favorites panel.


 To hide the navigation bar, set its Visible property to false.


Buttons can bear images (icons). To manage these images (in SVG format), use the "Manage SVG images" button. Thus, you can import your own icon images in SVG format to create your own personalized buttons.


List of properties


ImageHeight: you can set the height in pixels for the SVG images used on buttons. By default, the height is set to 32 pixels. All buttons share the same image height.

ImageWidth: you can set the width in pixels for the SVG images used on buttons. By default, the width is set to 32 pixels. All buttons share the same image width.

Visible: if set to false, the tool bar is removed.