Skip to main content


Trees are used to display hierearchical data.


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

Tired menu types


Tiered menu demo


  • 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

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

Developer API

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