7 #Dropdown Dropdown

Displays a dropdown menu. Clicking the toggle button opens and closes the drawer.

Use JavaScript to toggle the is-open class in order to open and close the dropdown.

Examples

Default styling

.dropdown--slide

Sliding open and closed.

.dropdown--fade

Fade in and out the menu.

Markup

<div class="dropdown [modifier class]">
  <button class="dropdown__toggle">Main Menu</button>
  <div class="dropdown__drawer">
    <p>text goes here.</p>
  </div>
</div>

Source: dropdown.css, line 1