Some features from this component may require sgds.js

Dropdowns allow users to select a option from a list in a menu

Component Code

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

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.

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


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

Chat with the team