Dropdown Menu

Dropdown Menu is a list of items that appear whenever a button is clicked or hovered. This is a graphical approach presented to users from which they can choose a value from the list presented

Usage

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.

Tell us more