Quick links

Standards FAQ

🔑 Sign in

🆕 Create account

💬 Chat on Slack

📩 [email protected]

🖥 Website standards.site

🐦 Twitter @standards_site

📷 Instagram @standards.site

Design & Editing

Editor overview

Preparing logo assets

Click & Hover Behaviors

Text

Media

Accessibility

Button

Dropdown

Sequence

Navigation Menu

Links

Files & Downloads

dropdown-example.gif

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.

In this guide:


Dropdown Basics

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

  1. From within the editor, select Dropdown from the + menu in the top bar, or use the hotkey D.
  2. Select a point in the project body by selecting between rows, 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.

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.


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.

Settings within controls states

Each state can have these settings altered independently from another, or synced together.


Usage

Dropdowns have a wide range of use. Here are common uses:

Menu groups

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.

dropdown-01.gif

Accordions

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

accordion-01.gif


Related guides

Button

Links

Files & Downloads