Dropdown

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.

Better alternatives would be the checkbox or radios component.

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