Overview of IntegralUI DropDownButton

IntegralUI DropDownButton is a native web component for Angular, React and Vue that represents a button with option to show a dropdown list. In this article, you will find general information about the dropdown button component, including its properties, events and methods that you can use.

DropDownButton component is part of IntegralUI Web
a suite of UI Components for development of web apps

If you have any questions, don't hesitate to contact us at support@lidorsystems.com

The dropdown button is consisting of a label and arrow icon. By clicking on the arrow, a dropdown menu will appear showing additional options. The menu can have additional submenus.

In this example, from control panel you select whether the arrow icon is placed on left or right side and choose the direction at which the dropdown menu will popup. There are six directions to choose from:

  • Above - menu appears upwards from the button
  • Left and Above - menu appears upwards and left from the arrow
  • Right and Above - menu appears upwards and right from the arrow
  • Below - menu appears below the button
  • Left and Below - menu appears downwards and left from the arrow
  • Right and Below - menu appears downwards and right from the arrow

How to Use IntegralUI DropDownButton in Angular, React and Vue

To use the DropDown Button component you need to do the following:

  • In app template place the button component using the iui-dropdown-button tag name
  • Set values for different properties available
  • Handle the component events in your code
@ViewChild('application', {read: ViewContainerRef, static: true}) applicationRef: ViewContainerRef;

public dropDownSettings: any;

    this.dropDownSettings = {
        adjustment: { top: 1, left: 0 },
        appRef: this.applicationRef,
        items: [
            { id: 1, text: "Item 1" },
                id: 2,
                text: "Item 2",
                items: [
                    { id: 21, pid: 2, text: "Item 21" },
                    { id: 22, pid: 2, text: "Item 22" }
            { id: 3, type: "separator" },
            { id: 4, text: "Item 3" }
<iui-dropdown-button [settings]="dropDownSettings"></iui-dropdown-button>

By default, the dropdown button will show a label on left following with a separator and arrow icon on right. You can change this in your code by setting the placement and direction properties. For example, to have the arrow icon on left side set the placement value to IntegralUIPlacement.Left.

To change the direction, set this property to one of the values from IntegralUIDirection enumeration:

  • Above
  • Below
  • Left
  • Right

You can combine these values and have directions like: Above and Left, Below and Right etc. For example:

import { IntegralUIDirection, IntegralUIPlacement } from './integralui/components/integralui.core';

. . .

public buttonPlacement: IntegralUIPlacement = IntegralUIPlacement.Right;
public openDirection: IntegralUIDirection = IntegralUIDirection.Below;

// Control Panel
// An array that holds all options in the comboo box for dropdown button placement
public comboPlacement: Array;

// Determines the direction at which the dropdown list will open
public comboDirection: Array;

    this.comboPlacement = [
      { text: "Left" },
      { text: "Right" }

    this.comboDirection = [
      { text: "Above" },
      { text: "Left and Above" },
      { text: "Left and Below" },
      { text: "Below" },
      { text: "Right and Above" },
      { text: "Right and Below" }

// Control Panel ---------------------------------------------------------------------

onComboPlacementSelectionChanged(e: any){
    switch (e.index){
      case 0:
        this.buttonPlacement = IntegralUIPlacement.Left;

        this.buttonPlacement = IntegralUIPlacement.Right;

onComboDirectionSelectionChanged(e: any){
    switch (e.index){
      case 0:
        this.openDirection = IntegralUIDirection.Above;

      case 1:
        this.openDirection = IntegralUIDirection.Left | IntegralUIDirection.Above;

      case 2:
        this.openDirection = IntegralUIDirection.Left | IntegralUIDirection.Below;

      case 4:
        this.openDirection = IntegralUIDirection.Right | IntegralUIDirection.Above;

      case 5:
        this.openDirection = IntegralUIDirection.Right | IntegralUIDirection.Below;

        this.openDirection = IntegralUIDirection.Below;
<iui-dropdown-button [settings]="dropDownSettings" [placement]="buttonPlacement" [direction]="openDirection"></iui-dropdown-button>

List of Available Properties, Events and Methods in IntegralUI DropDownButton

Supported Properties

You can use the following properties to change the appearance and behavior of the DropDownButton component:

  • allowAnimation - determines whether changes to the dropdown button are animated or not
  • direction - Specifies the direction at which the dropdown list will open
  • controlStyle - Specifies an object that contains all style settings for the component
  • data - Specifies an object that holds data related to the component
  • enabled - Determines whether the component is enabled or disabled
  • name - Uniquely identifies the component
  • placement - Determines whether the dropdown arrow is placed on left or right side
  • settings - Specifies the appearance and behavior of the dropdown window
  • size - specifies the component width and height
  • state - Specifies the component state: disabled, hovered, etc.

Using the above properties, you can customize the DropDown Button component in a way best suited for your application.

Supported Events

Here is a list of available events:

  • dropDownClosed - occurs after the dropdown menu closes
  • dropDownOpened - occurs after the dropdown menu is opened
  • dropDownOpening - occurs before the dropdown menu opens
  • itemClick - occurs when an item from dropdown menu is clicked
  • enabledChanged - occurs when component is enabled or disabled
  • sizeChanged - occurs when component size changes
  • stateChanged - occurs when component state changed: disabled, normal, hovered, selected

By handling these events in your code, you can add specific actions for example when dropdown opens, closes or when menu item is clicked.

onDropDownItemClicked(e: any){
    if (e.item)
        alert(e.item.text + ' is clicked!');
<iui-dropdown-button [settings]="dropDownSettings" (itemClick)="onDropDownItemClicked($event)"></iui-dropdown-button>

Supported Methods

The following public methods are available:

  • refresh - updates the component appearance

How to Customize the DropDown Button Appearance

You can modify the dropdown button appearance using CSS. You can provide your own CSS classes that will override the default component appearance.

The controlStyle property accepts an object that holds the names of all CSS classes that you want to override. Here is a list of default class names that are in use:

dropDownButtonStyle = {
    general: {
        disabled: 'iui-dropdown-button-disabled',
        focused: 'iui-dropdown-button-focused',
        normal: 'iui-dropdown-button',
        hovered: 'iui-dropdown-button-hovered',
        selected: 'iui-dropdown-button-selected'
    button: {
        disabled: 'iui-dropdown-button-btn-disabled',
        focused: 'iui-dropdown-button-btn-focused',
        normal: 'iui-dropdown-button-btn',
        hovered: 'iui-dropdown-button-btn-hovered',
        selected: 'iui-dropdown-button-btn-selected'


IntegralUI DropDownButton is a web component that you can use in Angular, React and Vue. You can use the component to display a dropdown menu above, below, and on left or right side from the button. Using different properties and events and by providing your own CSS classes, you can customize the dropdown button appearance and behavior.

The DropDownButton component is part of IntegralUI Web.


Sign-up to our newsletter and you will receive news on upcoming events, latest articles, samples and special offers.
Name: Email: *
*By checking this box, I agree to receive a newsletter from Lidor Systems in accordance with the Privacy Policy. I understand that I can unsubscribe from these communications at any time by clicking on the unsubscribe link in all emails.