Updated: November 25, 2020

Hierarchy View


The hierarchy view presents hierarchical data in a way that shows the relationship between parent and child objects. It serves as an entry point for a user to see where an object lives in a larger hierarchical structure.

For single level data sets, it is recommended to use a list report. To learn more, see List Report.


Single Line Object Cell
Use the horizontal variation of the hierarchy accessory to avoid creating unnecessary space between object cells.

Action Buttons
Be careful when using single action buttons and contact icons within an object cell. Using it next to the hierarchy icon can create too many touch targets.

Icon Stacks
Use icon stacks in an object cell with caution because they can cause heavy text truncation.


Compact width

For compact width, only one level of objects can be viewed at a time.

A. Breadcrumb
The breadcrumb is comprised of two elements:

  • Left / right arrow icons – In addition to the left/right swipe gesture, users can tap on the arrow icons to navigate between levels in a hierarchy.
  • Parent object title – This parent object title displays the name of the object that is currently in view.

B.  Object Cell

C.  Hierarchy Icon + Total Number of Direct Objects

Regular width

A.  Object Cell

The behavior and functionality of object cells follow the standard. For more guidance on object sells, see Object Cell.

B.  Hierarchy Icon

There is a default and selected state of the hierarchy icon. Use the selected state when a parent object is expanded.

C. Total Direct Objects (Optional)

A total number count of objects directly under a single parent object.


Hierarchies can range from small two-level data sets to large data sets with over ten levels. The hierarchy view can adapt to different data ranges using a column-based layout.

In a 2-column layout, the parent level objects are displayed in the first column. Child objects are displayed in the second column.

If the second column also contains parent objects, the third column displays its children when the parent objects are expanded.

3+ column

For large hierarchies that contain more than two parent levels, additional columns are added to display preceding and succeeding levels.

Dark mode

Hierarchy view is offered both in light and dark mode.

Behavior & Interaction

Each object type has its own defined interaction:

Hierarchy Icon
Tapping on the hierarchy icon expands the object to display its children. For objects with no further children, the hierarchy icon will be hidden.

Horizontal Swipe
Once a path has been expanded, a swipe gesture brings ascending and descending objects back into view.

Vertical Scroll
Users can scroll up and down to view more objects within a single level.