In this article, learn how to use the built-in Menu and Tree widgets to add navigation to your design.

How to use the

Menu & Tree Widgets

Using Menu Widgets

The Menu Widget allows you to easily create a simple flyout menu typically found in desktop applications or website navigation. Vertical and Horizontal Menu widgets are available in the Wireframe widgets library.

If your design needs a custom menu, you can use dynamic panels for more flexibility. To learn more about dynamic panels, see the article Advanced Dynamic Panels.

Now you can save time creating these common navigations using the Menu and Tree widgets.

You can use the actions “Expand Tree Node(s” and “Collapse Tree Node(s)’ to dynamically expand or collapsed a node upon interacting with a widget. Note that clicking the expand and collapse icons on the Tree do this automatically. However, if you wanted to, say, click on a button and have it expand a branch in the tree, you can add an OnClick case to the button to do this.

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

Edit rollover and/or selected styles to change the look of the tree nodes when you rollover or set it to its selected state.

You can learn more about formatting widget styles in the article Widget Styles.

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

To format the styles, use the editor toolbar.

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

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 from the context menu. 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.

To add or remove nodes, right-click on a node and use the context menu. You can choose to add a child node or sibling node. Adding a child node will add a node item one level deeper. Adding a sibling node will add a tree node in the same level.

You can also move the nodes up and down or indent and outdent using the context menu.

The Tree Widget allows you to create an expandable/collapsible menu you typically find in a file browser or website navigation.

If your design needs a custom tree control, you can use dynamic panels and the Move Panel action. To learn more about this, see the article on Advanced Dynamic Panels.

To add a Menu widget to your wireframe, drag and drop a menu widget from the Wireframe widget library. By default, the menu includes three menu items and padding.

To edit or remove the padding, right-click on the widget and choose Edit Menu Padding.

To format the styles, use the Editor toolbar above the wireframe grid.  Since new menu items and submenus get their formatting from their parent menu item, it helps to format the menu before adding menu items.

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

To add or remove a menu item, right-click on the menu item and choose Add Menu Item Before/After and Delete Menu Item from the context menu.

To add a submenu, right-click on the menu item and choose Add Submenu from the context menu.

Edit rollover and/or selected styles to change the look of the menu items when you rollover them or set them to their selected state. For example, highlighting a menu item to show which page you are viewing.

You can learn more about formatting widget styles and the OnPageLoad event in the articles Widget Styles and Page Load Interactions.

Still need help? Check out the forum or drop us a line at support@axure.com.

© 2002-2013 Axure Software Solutions, Inc. All rights reserved.

Mockup Software

Wireframe Software

Flowchart Software

Prototyping Software

SRS Documents

Web Design Software

iPhone Mockup Tool

iPad Mockup App

Visio Alternative

Powerpoint Alternative

Use Axure RP as:

WYSIWYG Editor

The Round Up

Edit Menu Widgets

Add & Delete Menu Items

Edit Additional Styles

Using Tree Widgets

Edit Tree Widgets

Add & Delete Tree Nodes

Edit Additional Styles

Tree Widgets and Interactions