Getting started
CSS
Components
JavaScript
SCSS

Dropdowns

Drop-downs offer a convenient toggleable selection solution via CSS and the vanilla JavaScript plugin.

Example

To setup a dropdown, do the following

  1. Create a wrapper element with the .drop-container class.
  2. Nest a button with the .js-drop-trigger class.
  3. Create the dropdown menu as the next sibling of the button as .drop-menu > .drop > ul.

Direction

You can change the alignment of the dropdown to different directions by adding a directional class to the .drop-menu element. The directions are .drop-s, .drop-se, .drop-sw, .drop-n, .drop-ne, .drop-nw

Carets

Add a caret to the button by using either .caret-s or caret-n on a <span> element inside the button.

Arrows

Add an arrow on the border of the dropdown using the .arrow class.