Dropdown menus typically have two core states; open and closed. This tutorial will be making use of component states to recreate this behavior. Depending on your use case you may be incorporating hover, focused, or other states into your element, but for the purposes of this tutorial, the base cases will be covered.
The starter file includes basic dropdown elements to start with: a header, and the dropdown content list. These elements can be used to construct the dropdown menu design, and contain padding so that as text resizes, the content itself resizes. However, if a fixed-width menu is desired, padding should be disabled for these groups in the Properties Inspector.