@ithaka/bonsai/documentation/pages/components/dropdowns.md

ITHAKA core styling

---
title: Dropdowns
description: Not quite a tooltip nor a modal, the information dropdown is used to display small bits of information on click or on hover. 
foundation: http://foundation.zurb.com/sites/docs/dropdown.html
js: ./js/bonsai.dropdown.js
sass: ./scss/_dropdowns.scss
---

## How to use
For a dropdown selector that is included in forms for user input see [dropdown-selector](dropdown-selector.html) 	

### On Click

The default behavior of a dropdown is on-click. To make a dropdown you need two elements.
1. The toggle element that has a `data-toggle` attribute pointing to the element containing information that will become visible.
2. The element containing information needs to have a `.dropdown-pane` class, a `data-dropdown` attribute, and an `id` that matches the toggle element pointer.

```html_example
<button class="button" data-toggle="on-click-pane">
    Click me!
</button>
<div class="dropdown-pane" id="on-click-pane" data-dropdown>
    I can hold a bunch of useful information
</div>
```

### On Hover

If you want to have the dropdown activate on-hover you can add `data-hover="true"` and `data-hover-pane="true"` to your dropdown pane.

```html_example
<button class="button" data-toggle="on-hover-pane">
    Hover over me!
</button>
<div class="dropdown-pane" id="on-hover-pane" data-dropdown data-hover="true" data-hover-pane="true">
    I can hold a bunch of useful information
</div>
```

## Accessibility
1. Make overlay content accessible to keyboard users (by allowing the Escape key to close the overlay, and by providing keyboard access to content and fields within the overlay).
2. When a dropdown opens, move focus to the information box
3. Clearly indicate to a user that they are in a modal type area (role = "dialog")