Skip to main content
Dropdowns are flexible elements used to organize other elements. They are similar to Buttons in that they can be styled in many ways, but additionally they can show and hide their contents.
Various design examples of dropdowns in use for menu groups and accordions
Dropdowns are an element that can be added to your project layout and menu, and consists of four + parts: the dropdown container, the controls container, text content in controls, and the icon content in controls. Additional elements can be added into Dropdowns, such at Text and Media.

​
Adding dropdowns

Add menu dropdown open showing a list of all options
1

Select the dropdown add tool

From within the editor, select Dropdown from the + menu in the top bar, or use the hotkey D
2

Add dropdown

Select a point in the project body by selecting between layouts, click + dragging within, or selecting a point inside a column.
3

Add items within

To nest content inside a dropdown, select the dropdown first, then use the + menu to add content the same way you would anywhere else.
While selecting a dropdown element, the right sidebar will display the available settings for styling the container. Keep in mind: the dropdown layer is the parent containing everything within. Dropdowns have a range of states that can be styled individually, or synced together. Both closed and open have rest and hover states.
  • Closed: All content other than controls are hidden.
  • Open: All content is exposed.

​
Settings within dropdown states

Each state can have fill and stroke settings altered independently from another, or synced together.

​
Controls

Controls are an essential part of dropdowns with their own settings. Controls share many similarities with buttons, but are special because they trigger open & close behaviors on the dropdown.

​
Controls settings

While selecting the controls part of a dropdown, the right sidebar will display the available settings for styling them.

​
Controls states

Controls have a range of states that can be styled individually, or synced together. Both open and closed have rest and hover states.
  • Closed: When the dropdown is closed.
  • Open: When the dropdown is open.

​
Examples

Dropdowns have a wide range of use. Here are common uses:
Menu group showing and hiding menu items within
Building menus with dropdowns is a great way to create grouping related items together. For example, a dropdown could contain links to the sections of a page, or links to multiple pages in a section.
Accordion showing and hiding a paragraph within

​
Accordions

Dropdowns can be used throughout the main body of Standards sites, and used to show and hide content within.