Dropdown

A dropdown is a toggleable component that allows the user to show/hide content on the page.

The following code examples shows how to use dropdown:

<div class="dropdown">
  <div class="dropdown__trigger">I am a trigger</div>
  <div class="dropdown__content">I am a content</div>
</div>

The following list describe all existing block/element/modifier classes of the component and all data attributes.

• .dropdown - required the block contains all elements of the dropdown
• .dropdown__trigger - required the trigger is the clickable element, that will open the content, the content will show below or above the trigger (based on position of the trigger)
• .dropdown__content - required the content that is initial hidden and will shown when the trigger is clicked
• Modifier
  • .dropdown--move-down - only open the content below the trigger
  • .dropdown--move-up - only open the content above the trigger
• Data Attributes
  • [sg-dropdown-suppress-automation] - if the attribute is added to the .dropdown block, the initial script will ignore this dropdown

Basic Example:

Examples

In the following examples we use a Button as trigger and a Listing as content.

Suppress Automation

If you want to suppress the default behavior of the dropdown, than add the [sg-dropdown-suppress-automation] data attribute to the block element.

<div class="dropdown" sg-dropdown-suppress-automation>...</div>