Some features from this component may require sgds.js

Dropdowns reveal a list of items whenever a button is clicked or hovered.


Use this code snippet to any part of your project.

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

Guidelines

Dropdown menu should:

  • Use for less important information since they are hidden until user exposes them
  • Contain actions that are related to each other

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