Use Menu and Tree Widgets

Learn to use the built in Menu and Tree widgets to add navigation to your designs.

Menu Widgets Overview
     Edit Menu Widgets
     Add and Delete Menu Items
     Edit Styles

Tree Widgets Overview
     Edit Tree Widgets
     Add and Delete Tree Nodes
     Edit Styles
     Add Interactions to Affect Tree Nodes

Menu Widgets Overview

Use the Menu widget to create a simple flyout menu you typically find in a desktop application or website navigation. Vertical and Horizontal Menu widgets are available in the Wireframe widgets library. If your design needs a custom menu, use dynamic panels for more flexibility.

To add a menu, drag and drop the widget from the widgets library to the wireframe. By default, the menu has three menu items and padding.

Edit Menu Widgets

To edit the text, select a menu item and type inline.

To format the styles, use the editor toolbar.

To edit the padding, right click the menu and select “Edit Menu Padding”.

Add and Delete Menu Items

To add or remove a menu item, right click a menu item and use the “Add Menu Item” and “Delete Menu Item” options in the context menu.

To add a submenu, right click a menu item and select “Add Submenu”.

Edit Styles

Edit rollover and/or selected styles to change the style when you rollover a menu item or set a menu item to its selected state. This is discussed in more detail in Formatting styles for menus, button shapes, and images.

Tree Widgets Overview

Use the Tree widget to create an expandable/collapsible menu you typically find in a file browser or website navigation. The Tree widget is available in the Wireframe widgets library.

To add a tree, drag and drop the widget from the widgets library to the wireframe. By default, the tree has one root node and three child nodes.

Edit Tree Widgets

To edit the text, select a node and type inline.

To format the styles, use the editor toolbar.

To expand/collapse the item for the default view, click the +/- icon next to the root.

To edit tree properties, right-click on the widget and select Edit Tree->Edit Tree Properties. You can choose whether to show node icons or expand/collapse icons and also edit the expand/collapse icons.

To import an image for the node icon, select a tree node, right-click and select “Edit Icon”. In the Edit Icon dialog, import an image file and select which nodes to assign that icon.

Add and Delete Tree Nodes

To add or remove nodes, right click a node and use the context menu. You can choose to add a child node or sibling node.

To move the nodes up/down and indent/outdent, use the context menu.

Edit Styles

Edit rollover and/or selected styles to change the style when you rollover or select a tree node. This is discussed in more detail in Formatting styles for menus, button shapes, and images.

Add Interactions to Affect Tree Nodes

Use the actions “Expand Tree Node(s)” and “Collapse Tree Node(s)” to dynamically expand or collapse a tree node from an interaction. Note that clicking the expand and collapse icons do this automatically.

To choose which node(s) to expand/collapse, click the blue underlined “Tree Node” link in the Actions description.