Component documentation


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.


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


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.


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


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 icons




Dropdown (no samewidth property)