Skip to content


Repository files navigation


GitHub release CircleCI Coverage Status license

Garnish UI Toolkit


You can download the latest version of garnishjs on GitHub.

To install via npm:

npm install garnishjs

To install via bower:

bower install garnishjs


To build, run gulp build.

Use -d or --dest options to customize the destination:

gulp build --dest=/path/to/dest
gulp build -d=/path/to/dest

Use -v or --version options to customize the version:

gulp build --version=1.0.0
gulp build -v=1.0.0

To watch, run gulp watch.


To test, run gulp test.

To watch and test, run gulp watch --test

UI Elements


This element should be used in instances where a trigger button shows or hides content.

Some possible applications include accordion menus, navigation dropdown menus, etc.

To create a disclosure element, use a button with the following properties:

  • An aria-controls attribute referencing the ID of the element to be toggled
  • An aria-haspopup attribute set to "true".
  • An aria-expanded attribute set to either "true" or "false".
  • A data-disclosure-trigger attribute is used to find and instantiate the UI element
<button aria-controls="disclosure" aria-expanded="false" aria-haspopup="true" data-disclosure-trigger>Open Menu</button>

<div id="disclosure">
	This is the content you want to reveal.


The disclosure container is positioned absolutely with respect to the trigger element. Because of this, both the disclosure container and the trigger need to be contained inside of a relatively positioned wrapper element. This element needs to have the attribute data-wrapper.

Note that this is different from the CustomSelect element, where dropdowns are positioned relative to the document.

You can change the horizontal alignment of the disclosure by adding a data-align attribute with one of the following values: left, center, or right.

Adjusting positioning

You may need to align the disclosure menu positioning to a different element inside of the trigger.

In cases like this add a data-align-to attribute to the disclosure menu with the selector of the element you want to align it with.


Garnish is available under the MIT license.