Justinmind

SUPPORT

Learn how to prototype web and mobile apps

Navigation UI widgets for wireframing

In this tutorial we will explore navigation UI elements that are available in the Basic Widget Library in Justinmind’s user interface.

Navigation widgets are designed to provide prototypes with the most common forms of web and app navigation. These widgets are fully customizable and adaptable.

Button

The Button widget holds a single line of text, as a regular button would.

interactive-prototypes-navigation-widget-button

Editing text

  • Double-click on a Button widget to start editing the text. Make the desired changes to the text. To apply the changes, press Enter or click outside the widget. To cancel the change, press Escape.
  • Select the Button and change its default text in the Properties panel.

Hotspot

The Hotspot widget is shaped as a rectangle and is usually used to create a transparent area to define events. Hotspots are displayed as a slightly transparent green rectangles on the canvas and become invisible upon simulation.

interactive-prototypes-navigation-widget-hotspot

Tip: Place hotspots over images to create a selective zone to apply events to giving the user more space within the UI element to click on.

Tree

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. 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.

interactive-prototypes-navigation-widget-tree

Adding nodes

To add a new node to a Tree:

  1. 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 will guide you to place the new node.
  2. Enter a name for the new node in the displayed dialog.
  3. Click OK and create the new node with the given name or press Cancel to close the dialog without applying changes.

Adding a new node as a subnode:

  1. Drag and drop a Tree Node widget over another Tree Node. When dragging the node widget inside another one a gray rectangular line will guide you to place the new node.
  2. Enter a name for the new node in the displayed dialog.
  3. Click OK 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:

  1. Icon Preview: Preview current expand and collapse icons.
  2. Browse: Change expand and collapse icons with your own files. 
  3. Delete: Delete the current expand and collapse icons.

When changing icons, make sure both expand and collapse images have the same size.

Tree Node

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’.

interactive-prototypes-navigation-widget-tree-node

Editing a 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 a 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

A Menu widget can be used to create basic fly-out menus. Like a Tree widget, Menus are made of Menu Items also organized in a hierarchical structure (menu items can contain other menu items).

interactive-prototypes-navigation-widget-menu

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:

  1. 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.
  2. Enter s name for the new item in the displayed dialog.
  3. Click OK 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 sub menu of another Menu Item:

  1. 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.
  2. Enter a name for the new item in the displayed dialog.
  3. Click OK and create the new item with the given name or press Cancel to close the dialog without applying changes.

You can also add sub menus 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 click Delete or open the menu with a right-click on the item and select Delete. If you delete a Menu Item, all of its sub menus 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.

Menu 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.

interactive-prototypes-navigation-widget-menu-item

Editing an 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 an 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 click OK. When a menu item has an icon assigned change or remove it using the buttons Browse and Delete next to the Icon field.

Next tutorial > Dynamic content widgets for wireframing