Dropdown

Some features from this component may require sgds.js

Overview

Dropdowns menus allow users to read or select different options.


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

When you should use this component

Dropdowns should be used sparingly. Ideally, you should use dropdowns when you have limited space or if your list is too long. E.g Having more than 7 items in a predetermined list.

Dropdowns content should bring users to a different page or section within a page.

When you should consider something else

If you require users to select from a predetermined list of answers, do consider using the checkbox or radios component. Try not to use checkboxes in the dropdown component as users may not know how to select multiple options presented to them in a dropdown.


Style

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

Feedback

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

Chat with the team