Skip to main content

Tree widgets

Tree widgets are most often used to simulate file browsers and to visualize other hierarchical structures. Clicking the various nodes of the tree widget can show different widgets on the page or open different pages in the project.

Tree widget

Adding, deleting, and moving tree nodes​

To add a node, right-click on an existing node and use the Add submenu. You can choose to add a child node or sibling node.

To move a node, right-click it and use the Move submenu. You can choose to move a node up or down or to indent or outdent it.

To delete a node, right-click it and select Delete node. Alternatively, select the node and press DELETE. Deleting a node will also delete its child nodes.

adding nodes to a tree widget

info

A tree widget must always contain at least one node. If you attempt a deletion that would leave the widget with no nodes, you'll receive an alert stating: Cannot delete all items.

The expand/collapse icons​

the tree properties dialog

By default, each tree node with at least one child node has an icon you can click to expand and collapse its child(ren). These icons are functional on both the Axure RP canvas and in the web browser.

By default, the expand/collapse icons are triangles. You can select different icons by selecting the tree widget or one of its nodes and clicking Edit tree props in the Tree section of the Style pane. In the dialog that appears, you can choose between the two built-in options, Plus/minus and Triangle, or you can import your own icons.

You can also hide the expand/collapse icons by unchecking Show expand/collapse icon in the Tree properties dialog.

Adding icons to tree nodes​

the Tree Node Icons dialog

In addition to the expand/collapse icons, you can also add custom static icons to the left of your tree nodes:

  1. Select the tree widget or one of its nodes and click Edit tree props in the Tree section of the Style pane.

  2. In the dialog that appears, check the box for Show icon. Then, click OK to close the dialog.

  3. Select the tree node you want to add an icon to and click Edit icon in the Tree section of the Style pane.

  4. In the dialog that appears, import your icon and select where it will be shown:

    • This node only
    • This node and siblings
    • This node, siblings, and all child nodes

Limitations and workarounds​

Embedding widgets into tree nodes​

Tree nodes can only contain text and an icon; it is not possible to add widgets to a tree node. If you need additional tree contents, try building a custom tree structure with shape widgets.

Not adaptive​

All aspects of tree widgets are consistent across all adaptive views. To style a tree differently across adaptive views, you can "place" a different tree widget in each adaptive view, "unplacing" from each view the tree widgets designed for other adaptive views.