Menu Icon
Guides How-to References Community
Guides How-to References Community

Dropdown

A dropdown displays a menu when clicked or hovered. They let users know what is the menu items.

Usage

Menu listing comes with sub components such as menu group, menu divider or sub menu. They give chance to drop-down menu items.

Guidance

  • Dropdowns should list multiple items.
  • They should be discoverable and easy to identify.
  • Always have a text label. Icons are optional.
  • Make Dropdowns look and feel hoverable.
  • If using menus, divide or group them.
  • Able to add multiple menu items by using + icon near Dropdown component on page tree.

When to use

  • Use Dropdowns to give clickable or hoverable menu.

Additional info

  • Consider using an Icon Dropdown in dense environments.
  • Consider using Text Dropdowns for actions that are less important.
  • Consider using an Action Bar when presenting the user with one or more high or medium-high actions specific to a task.
  • Consider using a Menu Divider when seperating multiple menu lists.
  • Consider using a Sub Menu when listing reclickable sub menu items.
  • Consider using a Menu Group for breakdowned menu.

Variations

  • There are several types of Dropdowns with varying degrees of emphasis. Emphasis determines a Dropdowns’s appearance, placement and breakdown of menu items. Dropdown can be prefered with a button near it, too.
  • The updatable properties of Dropdowns are label, icon, type and size.
  • The updatable behaviours of Dropdowns are trigger on, placement, show arrow, disabled and button.
  • The updatable style features of Dropdowns are margin, padding, size, overflow, typography, background, border, effects and css.
  • The updatable style features of Dropdown Icons are margin, padding, typography, border, effects and css.
  • The updatable style features of Overlay are margin, padding, typography, background, border, effects and css.
  • The updatable style features of Overlay Items are margin, padding, typography, background, border, effects and css.
  • The usable dynamic properties of Dropdowns are arrow, disabled, overlayStyle, trigger, icon, placement, overlayClassName, _label, hidden and style.
  • The updatable properties of Menu Items are title and icon.
  • The updatable behaviours of Menu Items are disabled and danger.
  • The usable dynamic properties of Menu Items are title, icon, disabled, danger, hidden and style.
  • The updatable property of Menu Group is title.
  • The usable dynamic properties of Menu Group are title, hidden and style.
  • The updatable properties of Sub Menu are title, icon and popupClassName.
  • The updatable behaviour of Sub Menu is disabled.
  • The usable dynamic properties of Sub Menu are title, icon, popupClassName, disabled, hidden and style.
  • The usable dynamic properties of Menu Divider are title, icon, popupClassName, disabled, hidden and style.

Next - Embedded Form

An embedded form displays form items to obtain user data entries. They let users enter data by filling in form fields.