SGDS v2.0 is here!
Check out the brand new v2.0 portal or click here for more information

Some features from this component may require sgds.js

Overview

Dropdowns menus allow users to read or select different options.


1) Default

<!-- start of dropdown(click) -->
<div class="sgds-dropdown">
  <div class="sgds-dropdown-trigger">
    <button
      class="sgds-button"
      aria-haspopup="true"
      aria-controls="sgds-dropdown-menu">
      <span>Click me</span>
      <span class="icon">
        <span class="sgds-icon sgds-icon-chevron-down"></span>
      </span>
    </button>
  </div>
  <div class="sgds-dropdown-menu" id="sgds-dropdown-menu" role="menu">
    <div class="sgds-dropdown-content">
      <a href="#" class="sgds-dropdown-item"> Dropdown item </a>
      <a class="sgds-dropdown-item"> Other dropdown item </a>
      <a href="#" class="sgds-dropdown-item is-active">
        Active dropdown item
      </a>
      <a href="#" class="sgds-dropdown-item"> Other dropdown item </a>
      <hr class="sgds-dropdown-divider" />
      <a href="#" class="sgds-dropdown-item"> With a divider </a>
    </div>
  </div>
</div>
<!-- start of dropdown(hover) -->
<div class="sgds-dropdown is-hoverable">
  <div class="sgds-dropdown-trigger">
    <button
      class="sgds-button"
      aria-haspopup="true"
      aria-controls="sgds-dropdown-menu">
      <span>Hover me</span>
      <span class="icon">
        <span class="sgds-icon sgds-icon-chevron-down"></span>
      </span>
    </button>
  </div>
  <div class="sgds-dropdown-menu" id="sgds-dropdown-menu" role="menu">
    <div class="sgds-dropdown-content">
      <a href="#" class="sgds-dropdown-item"> Dropdown item </a>
      <a class="sgds-dropdown-item"> Other dropdown item </a>
      <a href="#" class="sgds-dropdown-item is-active">
        Active dropdown item
      </a>
      <a href="#" class="sgds-dropdown-item"> Other dropdown item </a>
      <hr class="sgds-dropdown-divider" />
      <a href="#" class="sgds-dropdown-item"> With a divider </a>
    </div>
  </div>
</div>

2) Multi-select

A multi select dropdown list can be used when you want to store multiple values for the same record.

<!-- start of dropdown(click) -->
<div class="sgds-dropdown">
    <div class="sgds-dropdown-trigger">
        <button class="sgds-button" aria-haspopup="true" aria-controls="sgds-dropdown-menu">
            <span>Click me</span>
            <span class="icon">
                <span class="sgds-icon sgds-icon-chevron-down"></span>
            </span>
        </button>
    </div>
    <div class="sgds-dropdown-menu is-multiselect" id="sgds-dropdown-menu" role="menu">
        <div class="sgds-dropdown-content">
          <div class="control sgds-dropdown-item">
            <input type="checkbox" id="checkbox-4" />
            <label for="checkbox-4" class="checkbox" name="selected-features">Option 4</label>
          </div>
          <div class="control sgds-dropdown-item">
            <input type="checkbox" id="checkbox-5" />
            <label for="checkbox-5" class="checkbox" name="selected-features">Option 5</label>
          </div>
          <div class="control sgds-dropdown-item">
            <input type="checkbox" id="checkbox-6" disabled />
            <label for="checkbox-6" class="checkbox" name="selected-features" disabled>Option 6 - Disabled</label>
          </div>
          <hr class="sgds-dropdown-divider">
          <div class="control sgds-dropdown-item">
            <input type="checkbox" id="checkbox-7"/>
            <label for="checkbox-7" class="checkbox" name="selected-features">Option 7 - With a divider</label>
          </div>
        </div>
    </div>
</div>
<!-- start of dropdown(hover) -->
<div class="sgds-dropdown is-hoverable">
    <div class="sgds-dropdown-trigger">
        <button class="sgds-button" aria-haspopup="true" aria-controls="sgds-dropdown-menu">
            <span>Hover me</span>
            <span class="icon">
                <span class="sgds-icon sgds-icon-chevron-down"></span>
            </span>
        </button>
    </div>
    <div class="sgds-dropdown-menu is-multiselect" id="sgds-dropdown-menu" role="menu">
        <div class="sgds-dropdown-content">
          <div class="control sgds-dropdown-item">
            <input type="checkbox" id="checkbox-8" />
            <label for="checkbox-8" class="checkbox" name="selected-features">Option 8</label>
          </div>
          <div class="control sgds-dropdown-item">
            <input type="checkbox" id="checkbox-9" />
            <label for="checkbox-9" class="checkbox" name="selected-features">Option 9</label>
          </div>
          <div class="control sgds-dropdown-item">
            <input type="checkbox" id="checkbox-10" disabled />
            <label for="checkbox-10" class="checkbox" name="selected-features" disabled>Option 10 - Disabled</label>
          </div>
          <hr class="sgds-dropdown-divider">
          <div class="control sgds-dropdown-item">
            <input type="checkbox" id="checkbox-11"/>
            <label for="checkbox-11" class="checkbox" name="selected-features">Option 11 - With a divider</label>
          </div>
        </div>
    </div>
</div>

Style

Modifier Description
is-hoverable Use when you want to display options when hover over button

When to use

Dropdowns should be used:
  • When you have limited space or your list is too long.
    • For example, having more than 7 items in a predetermined list.
  • For bringing users to a different page, or section within a page.
Dropdowns should not be used:
  • When requiring users to select from a predetermined list of answers.
  • for including checkboxes as users may not know how to select multiple options presented to them in a dropdown.

Can't find a component?

Let us know what you need and we’ll be happy to look into it

Request component