Tree
A tree is a hierarchical structure with a parent node and one or more levels of child nodes that people can expand or collapse to help them understand and navigate complex data. It is useful for displaying a file structure, organizational hierarchy, or nested categories of information.
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 item
A basic tree item displays text and icons, and can have interactive buttons appear on hover.
Persona tree item
A persona tree item displays an avatar or image alongside text, and sometimes includes additional metadata.
Behavior
Nodes
A node is a fundamental unit that represents a tree item or data point in the tree. Each tree typically has branch nodes and leaf nodes.
Branch nodes (parents or children)
Use branch nodes to group related tree items into categories and subcategories within a hierarchical tree structure. A branch can be a parent of other nodes, a child of other nodes, or both. A branch node can connect up to a parent branch node and down to child nodes or leaf nodes.
Leaf nodes (childless)
A leaf node is a child node that contains no other child nodes below it. Leaf nodes cannot be parents, and they signify the end of the branching path.
Interaction modes
Expand and collapse only
Expand and collapse behavior is useful to show how information is organized. Users can select any branch node to expand it to show child branch or leaf nodes, and can select the node again to collapse it.
Navigation
In navigation mode, people can still expand and collapse nodes by selecting the chevron. But they can also select an item to see a detailed view on another surface. For example, in a file organization scenario, selecting the item exposes file or folder details in a panel.
Single select
In single select mode, radio buttons appear next to each node in the tree, and allow users to select nodes one at a time. Selecting a parent node also selects all of its child nodes.
Multiselect
This can be useful for performing batch operations on multiple nodes, such as deleting or moving them, or for selecting multiple nodes to view or edit at once.
Badges and quick actions
A tree item can display more information as badges, or provide further actions that appear on hover.
Reflow and overflow
Content within tree items wrap by default, and the maximum width is defined by the container that it sits in.
It is possible to change the behavior of tree items from wrapping text to truncate. If you have opted to truncate your tree item content be sure to include a tooltip that provides the full name of the item on hover.
Layout
A tree item has a couple of different optional interactions that can be implemented, such as badging, on hover actions, and icons. Here are a few best practices on how to implement those treatments.
Icons
Use simple, easily recognizable icons that are easy to understand. Avoid using complex or abstract icons that may confuse users. Leading icons can help provide a visual aid to users as to what a certain tree node means. This can also include product icons, if needed. Trailing icons can be used to highlight a configuration made to the tree node.
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.
A badge shows information about an item at a glance
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.
Indentation
Indentation of child and leaf nodes (recommended) helps to visually represent the hierarchy of a tree and make it easier to navigate.
Indentation from the parent node is 24px for medium nodes and 12px for small nodes. If the node is a leaf, an additional 24px is added to account for the space that the chevron would otherwise occupy.
Accessibility
The layout offers customization options through slots, such as expandIcon, iconBefore, iconAfter, and TreeItemAside for actionable content.
Content
Labels for tree items should be short, clear, and follow a consistent grammatical pattern. For example, the child nodes in a tree are either all actions, or all objects, but not a mixture of both.
Use sentence-style capitalization—only capitalize the first word of each node label. For more info, see Capitalization in the Microsoft Writing Style Guide.
If badges or quick actions are being used, include a short, clear tooltip for each badge or action.