Permalink
Fetching contributors…
Cannot retrieve contributors at this time
302 lines (252 sloc) 8.04 KB

Drop

A contextual menu that is dropped down (or up, left, right) and displayed relative a target element.

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.

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.

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.

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.

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.

Properties

Inherits all properties from the parent Component.

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

Methods

Inherits all methods from the parent Component.