Tree
A tree is used to display a hierarchical view of nested data. It's useful for representing a menu structure, folder hierarchy, or nested categories at a glance. Each tree has a parent node and one or more levels of child nodes that can expand or collapse.
To show or hide information without regard to hierarchy, use an accordion instead. For information that's organized in a simpler structure, consider using a list or table instead.
Resources
Types
Basic tree
A basic tree item displays text and icons, and can have interactive buttons appear on hover.
Persona tree
A persona tree item displays an avatar or image alongside text and sometimes includes additional metadata.
Item types
Each item in the tree represents a data point. Depending on its position in the tree, it’s classified either as a branch (parent) or a leaf (child) in the tree.
Branches are always parents, sometimes children
Use branches to group related items into categories and subcategories within a hierarchical tree structure. A branch is always a parent of some items, but might also be a child of another item.
A leaf is a child only
A leaf is a child item that contains no other child items below it. Leaf items signify the end of the branching path.
Behavior
Interaction modes
Expand-and-collapse only
Expand-and-collapse-only mode is useful to show how information is organized. People can select any branch to expand it to show child nodes, and can select the branch again to hide them. This mode is informational only, so selecting an item does not navigate anywhere.
Navigation
In navigation mode, people can still expand and collapse items by selecting the chevron. But they can also select an item to see a detailed view on another surface. For example, for a tree that shows file organization, selecting the item exposes the file or folder details in a panel.
Multiselect
Multiselect mode can be useful for performing batch operations on multiple items, such as deleting or moving them, or for selecting multiple items to view or edit at once.
Selecting a parent item also selects all of its children
If a child item is deselected, the parent checkbox shows a mixed selection state.
Reflow and overflow
By default, the content of each tree item wraps. The maximum width is defined by the container that it sits in.
However, you can change the behavior of tree items from wrapping text to truncating. Only choose this if truncated items are still easily differentiated from one another at a glance. In this case, make sure that differentiating words appear closer to the beginning of each label. Also be sure to show the full name of any truncated labels in a tooltip on hover.
Layout
A tree item has several optional additions, including icons, badges, and quick actions.
Icons
Use simple, easily recognizable icons. Avoid complex or abstract icons that might confuse users. Leading icons can help provide a visual aid to users as to what type of item is being represented. This can include product icons, if needed. Trailing icons are best used to highlight a configuration made to the item.
Leading icons
Trailing icons
Badges
Badges can be used to provide more information about a node or to indicate its status. For example, a badge could indicate unread messages, recently updated, needs attention, or the number of child nodes that the node contains. In general, badges are a useful way to immediately convey information in a compact way.
Each badge provides a text equivalent in a tooltip on hover.
This tree item has badges to indicate that something needs attention (!) and one new notification (1).
Quick actions
Quick actions can be added to tree items to provide contextual information and functionality without cluttering the UI or requiring the user to click on the node. For example, a quick action can trigger a pop-up menu that allows the user to perform actions on the node, such as editing its properties or deleting it.
When a tree node has both badging and quick actions, the default behavior is for the quick actions to replace the badges. However, if it’s necessary to keep the badges visible while hovering, they can be pushed to the side to make room for the quick actions.
For accessibility, make sure that these actions are also available by a more visible method, such as a toolbar or menu. Limit the number of quick actions to one or two at the most.
Basic tree with badges and quick actions shown on hover
Persona tree with badges and quick actions shown on hover
Indentation
Indentat child items to help visually represent the hierarchy of a tree and make it easier to navigate.
Indentation from the parent item is 24 pixels for medium size items, and 12 pixels for small. If the child item is a leaf, an additional 24 pixels is added (regardless of size) to account for the space that the chevron would otherwise occupy.
Accessibility
Customization options such as the positioning of icons before or after a tree item are communicated to screen reader users through their slot properties.
To help screen readers understand the purpose of the tree overall, use the aria-label to provide an accessible name for the tree.
Quick actions are accessible for navigation, but are an unexpected pattern according to WAI-ARIA. To mitigate this, make sure that all quick actions are also available by an alternate method, such as a toolbar or menu.
Content
Labels for tree items should be short, clear, and follow a consistent grammatical pattern. For example, the child items in a tree are either all actions, all descriptors, or all objects, but not a mixture of these.
Short, clear labels
Labels for tree items should be short, clear, and follow a consistent grammatical pattern. For example, the child items in a tree are either all actions, all descriptors, or all objects, but not a mixture of these.
Truncated label with tooltip
If badges or quick actions are being used, include a short, clear tooltip for each badge or action.
Use sentence style capitalization—only capitalize the first word. For more info, see Capitalization in the Microsoft Writing Style Guide.