Dropdowns

Dropdowns are menus that can be toggled with a click of a specific button.

Base

By default, the .joy-dropdown__menu element is hidden with display: none;. Applying the class .joy-dropdown-open to the .joy-dropdown container will make the menu appear/hide. The interaction is not enabled in these examples, but we do have a dropdown demo.

<div class="joy-dropdown joy-dropdown-open">
  <button class="joy-button joy-dropdown__toggle" type="button" id="dropdownMenuButton" aria-haspopup="true" aria-expanded="false">
    Dropdown Toggle
  </button>
  <div class="joy-dropdown__menu" aria-labelledby="dropdownMenuButton">
    <a class="joy-dropdown__item" href="#">Action</a>
    <a class="joy-dropdown__item active" href="#">Active action</a>
    <a class="joy-dropdown__item" href="#">Something else here</a>
  </div>
</div>

Dropup

Make the menu appear above the toggle button.

<div class="joy-dropup joy-dropdown-open">
  <button class="joy-button joy-dropdown__toggle" type="button" id="dropdownMenuButton" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="joy-dropdown__menu" aria-labelledby="dropdownMenuButton">
    <a class="joy-dropdown__item" href="#">Action</a>
    <a class="joy-dropdown__item active" href="#">Active action</a>
    <a class="joy-dropdown__item" href="#">Something else here</a>
  </div>
</div>

Menu Headers can be used to give titles to groups of actions within a dropdown menu.

<div class="joy-dropdown__menu">
  <h6 class="joy-dropdown__header">Dropdown menu header</h6>
  <a class="joy-dropdown__item" href="#">Action</a>
  <a class="joy-dropdown__item" href="#">Another action</a>
</div>

Separate sections of content within a menu using the dropdown divider.

<div class="joy-dropdown__menu">
  <a class="joy-dropdown__item" href="#">Action</a>
  <a class="joy-dropdown__item" href="#">Another action</a>
  <a class="joy-dropdown__item" href="#">Something else here</a>
  <div class="joy-dropdown__divider"></div>
  <a class="joy-dropdown__item" href="#">Separated link</a>
</div>

Classes Overview

Class	Applied to	Usage	Comments
`.joy-dropdown`	`<div>`	Required	Container for dropdown toggle and menu elements
`.joy-dropup`	`<div>`	Optional	Used in lieu of `.joy-dropdown` to display menu above the toggle
`.joy-dropdown-open`	`.joy-dropdown` or `.joy-dropup`	Required	This class needs to be toggled when showing/hiding dropdown menus
`.joy-dropdown__toggle`	`<div>`, `<button>`, `.joy-button`	Optional	Appends the dropdown (or dropup) caret to the toggle element
`.joy-dropdown__menu`	`<div>`	Required	Wrapper for dropdown menu items
`.joy-dropdown__item`	`<div>`, `<a>`, `<button>`	Required	Individual items in a drodpown menu
`.joy-dropdown__header`	`<h6>`	Optional	Creates a non-selectable header for menu items
`.joy-dropdown__divider`	`<div>`	Optional	Adds an `<hr>`-like separator to dropdown menus

Joystick jQuery Plugin

The following documentation requires the Joystick jQuery plugin. Check out the repo for install instructions.

Usage

The dropdown plugin toggles your hidden dropdown menu on demand, via data attributes or JavaScript.

Via data attributes

Activate a modal without writing JavaScript. The plugin automatically detects and creates the dropdown plugin based on the Joystick dropdown definition.

<div class="joy-dropdown" id="myDropdown">
 <button class="joy-button joy-dropdown__toggle" type="button" data-toggle="dropdown"
      id="dropdownMenuButton" aria-haspopup="true" aria-expanded="false">
    Dropdown Toggle
  </button>
  <div class="joy-dropdown__menu" aria-labelledby="dropdownMenuButton">
    <a class="joy-dropdown__item" href="#">Action</a>
    <a class="joy-dropdown__item active" href="#">Active action</a>
    <a class="joy-dropdown__item" href="#">Something else here</a>
  </div>
</div>

Attribute	Value	Optional	Description
`data-toggle`	"dropdown"	Required	Add `data-toggle="dropdown"` to a link or button to toggle a dropdown.

Via JavaScript

Call a dropdown with id myDropdown with a single line of JavaScript:

$('.joy-dropdown__toggle').dropdown();

Options

None

Methods

Activates your content as a dropdown and shows it to the user.

$('.joy-dropdown__toggle').dropdown('toggle');

Events

Joystick's dropdown class exposes a few events for hooking into dropdown functionality.

All dropdown events are fired at the dropdown itself (i.e. at the <div class="joy-dropdown">).

Event Type	Description
show.joy.dropdown	This event fires immediately when the show instance method is called. If caused by a click, the clicked element is available as the `relatedTarget` property of the event.
shown.joy.dropdown	This event is fired when the dropdown has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the `relatedTarget` property of the event.
hide.joy.dropdown	This event is fired immediately when the `hide` instance method has been called.
hidden.joy.dropdown	This event is fired when the dropdown has finished being hidden from the user (will wait for CSS transitions to complete).

$('#myDropdown').on('show.joy.dropdown', function (e) {
  // do something...
});
$('#myDropdown').on('hidden.joy.dropdown', function (e) {
  // do something...
});

A list or menu of user actions that is toggled with a button or link