Skip to content

Components / Dropdown


Dropdowns allow users to take an action by selecting from a list of choices revealed upon selecting a button or other control.




Dropdowns are triggered by a button or some other control element and can include an arrow that is aligned to the center of the control element.


The menu contains the menu items or any content you would like to be displayed. Padding should be added when displaying content other than menu items inside of your menu.

Dropdowns should typically be centered to the control element. However, the direction of the dropdown can be aligned to the right edge of the control as needed.

Don't use a divider between every menu item. The divider is meant to establish a grouping of similar items.
© 2020 Jack Henry & Associates, Inc. Trademark notice
Version 2.0.0-beta.5.1. Last updated December 16, 2020.