Tree pane guidelines

A tree pane is a versatile component that allows for hierarchical navigation and selection.

Parent and child relationships in tree panes

The power of a tree pane comes from its ability to show multiple levels of hierarchy within a single component. The top or parent items usually contain multiple child items or sub-items, which can also have further sub-items.

---

Types of tree panes

Tree panes are a versatile component that can be used in many different places. The 3 most common instances are:

• tree folder navigation,
• side navigation, and
• checkbox selectors.

Tree folder navigation

Tree folder navigation allows users to manage their files and folders while still seeing all their folders in a list. You can use this when designing cloud and local storage systems.

Side navigation

Side navigation is a primary (sometimes secondary) navigation method used when a website or app has many features or pages.

Due to their size and position, side menus can have a lot more links than top menus. The links can also work like accordions that reveal sub links to different pages.

Usually, side navigation will only have 2 levels of hierarchy.

Checkbox selectors

Checkbox selectors work like regular checkboxes, except that they can have child items. While not technically considered to be navigational components, checkbox selectors can be used to filter search results.

---

States

Tree panes and their options may change their state or appearance so that users know what they can do.

Normal and disabled state

The normal or default state means that you can click and interact with the items in the tree pane.

When disabled, the user can't interact with the options. If a user sees this, they probably have to click something else first to access its normal state.

Open and closed state

When a user clicks to open a parent item, it will reveal sub-items. If a parent item is closed, you won’t be able to see the sub-items.

Selected and not selected state

The selected state shows where you have currently navigated to in the tree pane. It indicates to the user what is now in focus, what page you are on, or what is currently selected. You can only have one item selected at a time.

Elements that are not currently in use or selected are called ‘not selected.’

---

Best practices

There are a few general rules for tree panes, regardless of the form they take.

Icons should be obvious

The icons used in a tree pane should clearly indicate whether they are open or closed and whether the item is a child or parent node. This can be done using open and closed folder icons, arrows, or plus/minus icons.

Tree panes should sit on the left of the screen

In hierarchical navigational structures, navigation for a component or a website will usually be positioned at the top or left-hand side. Tree panes follow the same rules and will usually sit on the left of the screen.

Sub-items should be indented to show nesting

It should be apparent to the user whether items are sub-items or parent items. Sub-items should be indented to the right to show the hierarchy clearly.

Allow multiple folders to be open at once

It’s a best practice to have only one parent-level item open at a time in a standard accordion. In folder tree panes, however, you can have multiple parent items open at the same time. This makes it easier for users to reference what is in different folders.

Default all items to closed

All items within a tree pane should be defaulted to closed when the user first opens the page or program.

---

Balsamiq formatting text

The power of the Balsamiq Tree Pane is how customizable it is. Below is a cheat sheet with some formatting text that you can use to add symbols and spaces.

---

Variations

There are many different variations of tree panes. Using more specific input styles makes it more apparent to the user what they are expected to do.

DIY symbols

You can use the Tree Pane component make your own custom accordion and other hierarchical categorization Symbols in Balsamiq .

Standard accordion: You can use the hierarchy in a Tree Pane to make a simple accordion with arrow icons.

Nested checkboxes: You can make a long list of hierarchical checkboxes (often used in advanced search settings) using a Tree Pane.

Folder navigation: A folder navigation component works very similarly to an accordion as it allows you to navigate through your files.

Horizontal folder navigation: While tree panes tend to open down, like an accordion, you can also make it so that they open horizontally. This is one of the patterns used by Mac’s finder app. You can make this using 3 tree panes and ensuring that each of them has a selected option.

---