Skip to main content

Tiered Menu

Tiered Menus displays submenus in a nested overlays.

Variants​

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

Tired menu types

Demo​

Tiered menu demo

Guidance​

  • 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​

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
Last updated on