Axure: menu & tree 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 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.

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

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.

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.

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