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

From within the editor, select Dropdown from the + menu in the top bar, or use the hotkey D.
Select a point in the project body by selecting between layouts, click + dragging within, or selecting a point inside a column.

Dropdown settings

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.

Position
Sizing
Spacing
Fill, Stroke

Dropdown states

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 these settings altered independently from another, or synced together.

Fill
Stroke

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.

Related guides

Button

Links

Files & Downloads