Dropdown

Some features from this component may require sgds.js

Overview

Dropdowns menus allow users to read or select different options.


Usage

<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>
<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>

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.

Feedback

Having troubles with the guide? Please give us more details and we'll get back to you soon.

Chat with the team