Skip to main content

Dropdown

Dropdown buttons are CTAs that trigger displaying additional options to the user.

Variants

There are four different vairants of dropdown available in GEL.

Dropdown types

Demo

Dropdown types

Guidance

  • Dropdown buttons can be used to display additional actionable items within the button.
  • You can use a dropdown button if the actionable items needs to be displayed upon clicking the button.
  • A dropdown button is ideally complemented with tiered menu item as the options are trigger actions rather than just options as in listbox.

When to use

  • Use dropdown when all the actions can be inside a parent button and does not require the user to have a default action.

When not to use

  • Consider using a split button if you want a default action available without opening the list of options.

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