Skip to main content

Tiered Menu

Tiered Menus displays submenus in a nested overlays.


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

Tired menu types


Tiered menu demo


  • If menu items or navigation items have multiple options grouped into a single parent option, the tiered menu should be used.
  • Differing from listbox, tiered-menu items are actionabel items rather than selection options. So clicking an item in a tiered menu will trigger an action just like a CTA.
  • Upto 3 levels of overlays can be displayed at any time.
  • The menu items can be grouped together separated by a divider.

When to use

  • Use tiered menu for navigational scenarios requiring grouped menu item.

When not to use

  • If the items displayed upon clicking the button is list of options for selection, consider using a select instead.

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