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


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>


Dropdown menu should:

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


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.

Tell us more