Navigation widgets are designed to provide prototypes with the most common forms of application navigation that one can find in the real world. All of them are fully customizable and adaptable to every prototype's needs.
The Button is a widget shaped as a common button which holds a single line of text. The edition of its text works as for the Texts. Buttons are also the perfect candidates to place your events.
Editing text
Double-click a Button widget to start text edition. Make the desired changes to the text. To apply the changes press Return or click outside the widget. To cancel edition without applying changes press Escape.
Select the Button and change its default text in the Properties panel.
This widget shaped as a rectangle is usually used to create a transparent area to define events. Hotspots are displayed as a slightly transparent green rectangle during the edition of the user interface but become transparent and cannot be seen during the prototype's simulation.
Tip: Put hotspots over images to create event zones – For example, over the main logo of your application in the upper banner.
Trees are a very common navigation component in applications. Tree widgets are made of Tree Nodes organized in a hierarchical structure (Tree Nodes can contain other Tree Nodes). When a Tree widget is created on a page it contains, by default, two root Tree Nodes and one sub-node inside the first one.
Through the Properties panel you can customize the expand and collapse icons of your Tree as well as the visibility of the Tree hierarchy lines.
Adding nodes
To add a new node to a Tree:
Drag and drop a Tree Node widget over the position on the Tree you want to place it. When dragging the node widget, an orange dotted line feedback will guide you to place the new node.
Enter the name for the new node in the displayed dialog.
Click on the Ok button to apply and create the new node with the given name or press Cancel to close the dialog without applying changes.
To add a new node as a subnode of a Tree Node:
Drag and drop a Tree Node widget over another Tree Node. When dragging the node widget inside another one a gray rectangular feedback will guide you to place the new node.
Enter the name for the new node in the displayed dialog.
Click on the Ok button to apply and create the new node with the given name or press Cancel to close the dialog without applying changes.
Removing nodes
To remove a node from a Tree, first select the node you want to delete. Then press Delete or open the contextual menu with a right-click on the node and select Delete. If you delete a Tree Node that contains other nodes they will be deleted as well.
Moving nodes
The order and hierarchy of tree nodes can be changed once they are created. To change a Tree Node position within a Tree, drag and drop the node as you were creating a new one. The corresponding feedback will guide you while dragging the node.
Changing expand/collapse icons
When a Tree widget is created it has, by default, a plus icon 
to expand nodes and a minus icon 
to collapse them. These default icons can be changed in the Properties panel:
Select the Tree widget on the screen.
Click on the Browse button in the Properties panel.
Browse for an Expand image in your file system using the dialog displayed and press Ok.
Browse for a Collapse image in your file system using the second dialog displayed and press Ok.
When changing icons make sure both expand and collapse images have the same size.
A Tree Node widget can only be created inside an existing tree widget. To create a Tree Node drag and drop it on a tree as explained in 'Adding nodes'.
Editing node's text
To change the text displayed by a node, first select the node you want to change and then edit its text in the 'Value' field in the Properties panel.
Changing node's icons
Each tree node can display a different icon when expanded or collapsed. These icons can be assigned through the Properties panel:
To set an icon when the node is expanded: Select the tree node widget and click on the 'Select Expand Icon' option in the Properties panel. Then browse into your file system and select the desired image.
To set an icon when the node is collapsed: Select the tree node widget and click on the 'Select Collapse Icon' option in the Properties panel. Then browse into your file system and select the desired image.
Menu widget can be used to create basic flyout menus. Like a Tree widget, Menus are made of Menu Items also organized in a hierarchical structure (Menu Items can contain other Menu Items). Menus have two common configurations that can be defined in the 'Orientation' attribute in the Properties panel:
Horizontal: Like a main menu of a desktop application.
Vertical: Like a sidebar menu.
Adding items
To add a new menu item to a Menu:
Drag and drop a Menu Item widget over the position on the Menu you want to place it. When dragging the widget, an orange feedback will guide you to place the new item.
Enter the name for the new item in the displayed dialog.
Click on the Ok button to apply and create the new menu item with the given name or press Cancel to close the dialog without applying changes.
You can also add items before and after a Menu Item selecting the options 'Add Menu Item After' or 'Add Menu Item Before' in the contextual menu of a Menu Item.
To add a new item as a submenu of another Menu Item:
Drag and drop a Menu Item widget over another Menu Item. When dragging the Menu Item widget inside another one a gray rectangular feedback will guide you to place the new item.
Enter the name for the new item in the displayed dialog.
Click on the Ok button to apply and create the new item with the given name or press Cancel to close the dialog without applying changes.
You can also add submenus of a Menu Item selecting the option 'Add Submenu' in the contextual menu of a Menu Item.
Removing items
To remove an item from a Menu first select the Menu Item you want to delete. Then press Delete or open the contextual menu with a right-click on the item and select Delete. If you delete a Menu Item, all of its submenus will also be removed.
Moving items
The order and hierarchy of menu items can be changed once they are created. To change a Menu Item's position within a Menu, drag and drop the item as you were creating a new one. The corresponding feedback will guide you while dragging the item.
A Menu Item widget can only be created inside an existing menu widget. To create a Menu Item drag and drop it on a menu as explained in 'Adding items' for Menus.
Editing item's text
To change the text displayed by a menu item, first select the item you want to change and then edit its text in the 'Value' field in the Properties panel.
Changing item's icon
Each menu item can display an icon before its text that can be set and changed through the Properties panel. To set the icon for a menu item, first select the Menu Item widget on the screen and then select the 'Set Icon' option in the Properties panel. Browse for the desired image and press Ok. When a menu item has an icon assigned change or remove it using the buttons Browse and Delete next to the Icon field.