Top

Usage

Drop menus can be placed anywhere using a div with a nested list, or using the list itself as the wrapper. Each drop will require a .drop class and one of the directional modifiers listed below. For the drop to function correctly, the parent will require relative positioning.

<div class="drop drop--down" data-drop-menu>
    <ul>
        ...
    </ul>
</div>

<ul class="drop drop--up" data-drop-menu>
    ...
</ul>

The drop component must be initialized on an element that targets a menu to display, either through an attribute, or using a callback function. Refer to the getTarget option below.

<div class="button-group">
    <button class="button js-drop" type="button" data-drop="#menu"><span class="caret-down"></span></button>

    <ul class="drop drop--down" id="menu" data-drop-menu>
        ...
    </ul>
</div>
$('.js-drop').drop();

The drop menu will display either through a click, or a hover, depending on the configuration.

The data-drop-menu attribute is required for automatic hiding when hideOpened is enabled.

Positioning

Dropdowns, dropups, droplefts, and droprights are all supported through their respective modifier class.

<ul class="drop drop--down" data-drop-menu>...</ul>
<ul class="drop drop--up" data-drop-menu>...</ul>
<ul class="drop drop--left" data-drop-menu>...</ul>
<ul class="drop drop--right" data-drop-menu>...</ul>

Nesting

Drops can be nested by inserting a drop menu within an li and applying a .has-children class. An optional .caret-right can be placed within an anchor link to designate children.

<ul class="drop drop--left" data-drop-menu>
    <li>...</li>
    <li class="has-children">
        <a href="#"><span class="caret-right"></span> Action</a>

        <ul class="drop drop--down">
            ...
        </ul>
    </li>
</ul>
Only .drop--down and .drop--up menus can be nested.

Headers & Dividers

A divider can be used to split actions into groups.

<ul class="drop drop--up" data-drop-menu>
    <li>...</li>
    <li class="drop-divider"></li>
    <li>...</li>
</ul>

And a header can be used for naming groups.

<ul class="drop drop--right" data-drop-menu>
    <li class="drop-heading">Group</li>
    <li>...</li>
    <li class="drop-heading">Group</li>
    <li>...</li>
</ul>

Alignment

To align the drop menu against the opposite edge, add a .reverse-align class. Reverse alignment works for both horizontal and vertical menus.

<ul class="drop drop--down reverse-align" data-drop-menu>
    ...
</ul>

Notes

  • The element that targeted and opened the drop menu will have an .is-active class.
Top

ARIA

The menu, and menuitem roles, and the appropriate aria-* attributes are required when supporting ARIA.

<ul class="drop drop--down" role="menu" id="menu" data-drop-menu>
    <li><a href="" role="menuitem">Item</a></li>
    ...
    <li class="drop-divider" role="separator"></li>
    ...
    <li class="has-children" aria-haspopup="true">
        <a href="" role="menuitem">Item</a>

        <ul class="drop drop--down" role="menu">...</ul>
    </li>
</ul>

The element that opens the drop menu will need the aria-haspopup and aria-controls (relates to drop target ID) attributes.

<button class="button js-drop" type="button" data-drop="#menu" aria-controls="menu" aria-haspopup="true">
    ...
</button>
Manual definition of these ARIA attributes will be required.
Top

Variables

Variable Default Description
$drop-class .drop CSS class name for the drop wrapper.
$drop-class-divider .drop-divider CSS class name for the drop divider element.
$drop-class-heading .drop-heading CSS class name for the drop heading element.
$drop-class-modifier-down .drop--down CSS class name for the drop down modifier.
$drop-class-modifier-up .drop--up CSS class name for the drop up modifier.
$drop-class-modifier-left .drop--left CSS class name for the drop left modifier.
$drop-class-modifier-right .drop--right CSS class name for the drop right modifier.
$drop-modifiers ("down", "up", "left", "right") List of modifiers to include in the CSS output. Accepts down, up, left, and right.
$drop-transition .3s The transition time for menu fade and nested menu slide animations.
$drop-zindex 500 The z-index for the drop element.
Top

Options

Inherits all options from the parent Component.

Option Type Default Description
getTarget string|function data-drop If a string is passed, fetch the ID from the HTML attribute. If a function is passed, use the return value as the ID. The ID should point to a drop element.
mode string click The type of interaction for toggling a drop. Accepts click or hover.
Top

Events

Inherits all events from the parent Component.

Event Arguments Description
hiding element:menu, element:node Triggered before a drop menu is hidden.
hidden element:menu, element:node Triggered after a drop menu is hidden.
showing element:menu, element:node Triggered before a drop menu is shown.
shown element:menu, element:node Triggered after a drop menu is shown.
Top

Properties

Inherits all properties from the parent Component.

Property Type Description
element element The drop menu currently being displayed.