Skip to main content

Tree

Trees are used to display hierearchical data.

Variants

There are a total of 4 variations of Trees to choose from in GEL.

Tired menu types

Demo

Tiered menu demo

Guidance

  • A tree follows a top-down pattern and each consecutive nested node (level) is indented to communicate the hierarchy.
  • In trees with checkboxes, checking the parent node selects the entire node content inside.

When to use

  • Create hiereachical structures to view and access parent and child nodes. A good example would be to show folders and file structure.

Designer assets

figma
Hey Designers, please find the Figma assets here. If you want permission to access the file, please contact Experience Design CoP.

Developer API

vue
Hey Developers, find out the tech documentation of this compoment on PrimeVue. If you have issue, please contact Development CoP