Tree view definition and primary use
A tree view is a hierarchical structure that provides nested levels of navigation. It consists of nested heading levels that create a content hierarchy and assist with navigating large amounts of information.
tree-view
21 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
Tree view when to use
Use tree view when navigating file system structures made up of folders and documents. Use it to organize large amounts of information that can nest within multiple levels.
Tree view when not to use
Do not use tree view to show and hide UI elements or content on a page. Do not use it when you only need one level of nested information; instead use accordion or data table for expandable views that go one level deep. Do not use it as the primary navigation in a product's UI; instead use the UI Shell left panel for product navigation. A combination of UI shell left panel and breadcrumb component can support an information architecture several levels deep.
Tree view anatomy components
Tree view consists of: (1) Branch node - a node that has one or more child nodes, can be expanded or collapsed to reveal or hide child nodes. (2) Leaf node - a node that has no child nodes and can appear at any level of the tree view hierarchy. (3) Caret icon - an icon to expand or collapse a branch node. (4) Node icon (optional) - an icon to visually represent and support a node label, can assist users to scan different content types quickly.
Tree view node sizes
Tree view supports two node sizes: Small (32px / 2rem height) - this is the default size and most commonly used as it has similar geometries as the UI shell left navigation panel. Extra small (24px / 1.5rem height) - use when space is constricted on the page and/or when you need a more condensed view to show more of the tree view on the screen. When in doubt of which size to use, use the small node size because it is the default.
Tree view node stacking
Nodes stack directly on top of each other with 0px space between them. Having nodes flush with each other ensures consistent spacing and alignment between each node in the tree view.
Tree view nested node alignment
Nested nodes in a tree view rely on vertical type and icon alignment to visually group nodes together. Branch icons and leaf icons sit to the left of type and align vertically.
Tree view branch node label guidelines
Be brief but clear while summarizing what kind of child nodes the branch node contains.
Tree view leaf node label guidelines
Be brief and descriptive about what information the leaf node contains.
Tree view overflow content handling
If the node label is too long for one line in the tree view, add an ellipsis (…) and accompany with a browser-based tooltip to show the full string of text. You can customize the view by positioning the ellipsis at the front-line, mid-line, or end-line of a node label depending on what information is most useful to the user to keep persistent in the tree view.
Tree view selected state inheritance
If the branch node of a selected child node is collapsed, the parent node should inherit the selected state so the user does not lose the context of what is selected, even if it is out of view.
Tree view focus behavior
When a single-select tree receives focus, focus is set on the previously selected node. If none of the nodes were selected before the tree receives focus, focus is set on the first node.
Tree view expand and collapse interaction
To expand or collapse a branch node, the user can click anywhere within the caret icon bounding box.
Tree view node selection interaction
To select a branch node, the user can click anywhere on the node excluding the caret icon bounding box. To select a leaf node, the user can click anywhere on the node container.
Tree view keyboard controls
Keyboard controls: Right arrow - when focus is on a closed node, opens the node; focus does not move. When focus is on an open node, moves focus to the first child node. When focus is on a leaf node, does nothing. Left arrow - when focus is on an open node, closes the node. When focus is on a child node that is also either a leaf node or a closed node, moves focus to its parent node. When focus is on a top level node that is also either a leaf node or a closed node, does nothing. Down arrow - moves focus to the next node that is focusable without opening or closing a node. Up arrow - moves focus to the previous node that is focusable without opening or closing. Enter - activates a node. In single-select trees where selection does not follow focus, the default action is typically to select the focused node.
Tree view node icons guidance
You can add node icons to visually represent and support a written node label. Recommend having consistent icon usage for all branch and leaf nodes. Make sure the icons accurately represent each node that they are related to. Using a folder icon for branch nodes and a document icon for leaf nodes is a commonly recognized pairing. If individual node data cannot be identified, do not display icons. When in doubt, use nodes without icons.
Tree view icon alignment requirement
When adding icons to nodes in a tree view, there must be an icon present for every node. Not having an icon for every branch or leaf node can cause alignment inconsistencies and make groupings of nodes harder to visualize. Do not mix text-only and icon nodes in a tree view.
Tree view versus accordion
Use the accordion component when you need to organize lengthy information in sections that only go one level deep. Tree view is best used for nesting categories of information in a hierarchy of multiple levels.
Tree view versus UI Shell left panel
Use the UI Shell left panel component for product navigation. A combination of the UI Shell left panel and the breadcrumb component can support an information architecture several levels deep of a product. Tree view is best used for on-page navigation instead of being used for architecture of a website or product.
Tree view versus data table
Use the data table component for displaying large amounts of detailed information that is easy to scan horizontally in one view. Data table rows can be expanded, but it is recommended to only expand a row one level deep. Tree view is used to organize multiple nested levels of information with concise labels that do not need to be organized in a column structure.
Tree view feature flag
A feature flag has been added to tree view to improve accessibility and changes parts of its functionality, not its visual appearance. The current tree view is not being deprecated, but teams are encouraged to use the feature flag tree view for their products moving forward. Once the next major release (v12) is released in the future, this feature flag will become the default version of the component.