Component documentation

Dropdown

To add a menu (dropdown), pass the menu's id to the data-menu attribute of the trigger element.

Make sure the codebases includes Popper.js. We are using version 2.x.

Configuration

You can use the following data attributes to change the default behaviour of the menu.

Placement

The data-menu-placement attribute is used to position a menu in relation to the trigger button. E.g. data-menu-placement="bottom-end" places menu below the trigger, aligning the menu with the end of the trigger. See the Popperjs document for all available options.

Autosize

The data-menu-samewidth attribute sets the width of the menu to the width of the trigger button. E.g. data-menu-samewidth="true".

Offset

The data-menu-offset sets the distance in pixels of a menu to the trigger button. E.g. data-menu-offset="16" to place the menu 16 pixels from the button or data-menu-offset="0" to remove the distance.

Dropdown

#

Dropdown icons

#

Dropup

#

Dropdown (no samewidth property)

#