Skip to content
Patternfly Logo

Tree view

A tree view is a structure that displays data in a hierarchical view. It can be used in a dropdown, drawer, primary-detail, modal, or wizard.

A default tree view provides a tree structure with items and arrows to expand or collapse child items. Every tree view can be extended with these optional capabilities.

Tree view elements

A default tree view consists of 5 elements:

  1. Expand/collapse: An option to expand or collapse parent nodes to reveal child nodes
  2. Parent node: A node that contains other items (for example, a folder that contains multiple documents)
  3. Child node: A node within the parent node (for example, a document within a folder)
  4. Leaf node: A node without children
  5. Truncation indicator: Ellipses indicating truncated text for longer names that don't fit in the node width

Usage

A tree view can be used for:

  1. Changing the content on a page based on the selected item.
  2. Selecting items or applying filters.

Use a tree view when:

  • Selecting is the main use-case.
  • You apply filters that need to be structured in a clear hierarchy.
  • The data is structured into levels.
  • You need to display hierarchies that have more than 2 levels.

Don’t use a tree view when:

Tree view capabilities

You can add these functionalities to a tree view:

  • Search bar for searching items in the tree view
  • Checkboxes for selecting items in the tree view
  • Badges for showing the number of child nodes in the tree view
  • Icons for visually representing the node types in the tree view
  • Action items for adding an action to each item in the tree view

Adding a search bar to a tree view

Add a search bar to a tree view if you're including a large amount of data and need to provide users with a quick way to find a single item. If your dataset is small and easy to navigate, then you don't need to add a search bar.

Adding checkboxes to a tree view

Add checkboxes to a tree view if you’re selecting multiple items or applying multiple filters. Selecting should be a primary function of your use-case. If your dataset is small and you select just 1 item, use select lists, radio buttons, checkboxes, or a dropdown instead.

Adding badges to a tree view

Add badges to a tree view if you want to show the number of items inside. Don’t use it for displaying different information. Items without children can't have badges as they don't contain anything.

Adding icons to a tree view

Add icons to a tree view if you want to visually representing the type of items in a tree. For example, a folder system. If you choose to add icons to a tree view, apply the icons on all items in a tree or leave the items without children iconless, to maintain consistency. We don’t recommend using icons and checkboxes at the same time due to the large indentation and loss of space it would result in.

Adding action items to a tree view

Add action items to a tree view if you’re triggering some type of action above the items. These actions appear on hover to avoid overcrowding the tree view. We recommend using 1 type of action across the whole tree and to limit the maximum of actions for 1 item to 1.

Tree view in a page

Tree views can be included in pages within these components: dropdown, drawer, primary-detail, modal, or wizard.

Tree view in a wizard

A tree view in a wizard allows users to apply multiple filters or select multiple items that are specific to their current step.

Tree view in a primary-detail or drawer

A tree view in a primary-detail or drawer allows users to switch content based on their selection from a tree.


View source on GitHub