Drop

Ready Added in 2.0.0

Position any element in relation to another element.

Usage

Any content, like a button, can toggle the drop component. Just add the gls-drop attribute to a block element following the toggle.

<button type="button"></button>
<div gls-drop></div>

A dropdown can be enabled by hovering and clicking the toggle. Just add the mode: click option to the attribute to force click mode only. If you want to group the toggle and the dropdown, you can just add the .gls-inline class from the Utility component to a container element around both.

<div class="gls-inline">
    <button type="button"></button>
    <div gls-drop="mode: click"></div>
</div>

Note The Drop component has no default styling. In this example, we’ve used a card from the Card component for visualization.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

<div class="gls-inline">
    <button class="gls-button gls-button-default" type="button">Hover</button>
    <div gls-drop>
        <div class="gls-card gls-card-body gls-card-default">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>
    </div>
</div>

<div class="gls-inline">
    <button class="gls-button gls-button-default" type="button">Click</button>
    <div gls-drop="mode: click">
        <div class="gls-card gls-card-body gls-card-default">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>
    </div>
</div>

Grid in drop

You can place a grid from the Grid component inside a drop. Just wrap the content with a <div> element and add the gls-grid attribute. If the grid should stack automatically, whenever the drop no longer fits its container, just add the .gls-drop-grid class.

<div class="gls-width-large" gls-drop>
    <div class="gls-drop-grid gls-child-width-1-2@m" gls-grid>...</div>
</div>

Use one of the classes from the Width component to adjust the drop’s width.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

<button class="gls-button gls-button-default" type="button">Hover</button>
<div class="gls-width-large" gls-drop>
    <div class="gls-card gls-card-body gls-card-default">
        <div class="gls-drop-grid gls-child-width-1-2@m" gls-grid>
            <div>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
            </div>
            <div>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
            </div>
        </div>
    </div>
</div>

Position

Add one of the following options to the gls-drop attribute to adjust the drop’s alignment.

<div gls-drop="pos: top-left"></div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

<div class="gls-inline">
    <button class="gls-button gls-button-default" type="button">Top Right</button>
    <div gls-drop="pos: top-right">
        <div class="gls-card gls-card-body gls-card-default">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>
    </div>
</div>

<div class="gls-inline">
    <button class="gls-button gls-button-default" type="button">Bottom Justify</button>
    <div gls-drop="pos: bottom-justify">
        <div class="gls-card gls-card-body gls-card-default">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>
    </div>
</div>

<div class="gls-inline">
    <button class="gls-button gls-button-default" type="button">Right Center</button>
    <div gls-drop="pos: right-center">
        <div class="gls-card gls-card-body gls-card-default">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>
    </div>
</div>

Position	Description
`bottom-left`	Aligns the drop to the bottom left.
`bottom-center`	Aligns the drop to the bottom center.
`bottom-right`	Aligns the drop to the bottom right.
`bottom-justify`	Aligns the drop to the bottom and justifies its width to the related element.
`top-left`	Aligns the drop to the top left.
`top-center`	Aligns the drop to the top center.
`top-right`	Aligns the drop to the top right.
`top-justify`	Aligns the drop to the top and justifies its width to the related element.
`left-top`	Aligns the drop to the left top.
`left-center`	Aligns the drop to the left center.
`left-bottom`	Aligns the drop to the left bottom.
`right-top`	Aligns the drop to the right top.
`right-center`	Aligns the drop to the right center.
`right-bottom`	Aligns the drop to the right bottom.

Boundary

By default, the drop flips automatically when it exceeds the viewport’s edge. If you want to flip it according to a container’s boundary, just add the boundary: .my-class option to the gls-drop attribute, using a selector for the container. That way you can determine any parent element as the drop’s boundary.

<div class="my-class">
    <button type="button"></button>
    <div gls-drop="boundary: .my-class"></div>
</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

<div class="boundary gls-panel gls-placeholder gls-width-2-3@s">

    <button class="gls-button gls-button-default gls-float-left" type="button">Hover</button>
    <div gls-drop="boundary: .boundary">
        <div class="gls-card gls-card-body gls-card-default">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>
    </div>

    <button class="gls-button gls-button-default gls-float-right" type="button">Hover</button>
    <div gls-drop="boundary: .boundary">
        <div class="gls-card gls-card-body gls-card-default">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>
    </div>

</div>

Boundary alignment

You can also align the drop to its boundary. To do so, add the boundary-align: true option to the attribute.

<div class="my-class">
    <button type="button"></button>
    <div gls-drop="boundary: .my-class; boundary-align: true"></div>
</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

<div class="boundary-align gls-panel gls-placeholder">

    <button class="gls-button gls-button-default gls-float-left" type="button">Justify</button>
    <div gls-drop="pos: bottom-justify; boundary: .boundary-align; boundary-align: true">
        <div class="gls-card gls-card-body gls-card-default">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>
    </div>

    <button class="gls-button gls-button-default gls-float-right" type="button">Center</button>
    <div gls-drop="pos: bottom-center; boundary: .boundary-align; boundary-align: true">
        <div class="gls-card gls-card-body gls-card-default">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>
    </div>

</div>

Offset

To define a custom offset between the drop container and the toggle, add the offset option with a value for the offset, measured in pixels.

<div gls-drop="offset: 80"></div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

<button class="gls-button gls-button-default" type="button">Hover</button>
<div gls-drop="offset: 80">
    <div class="gls-card gls-card-body gls-card-default">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>
</div>

Animation

Apply one or more animations to the dropdown by adding the animation: gls-animation-* option with one of the classes from the Animation component. You can also determine the animation’s duration. Just add the duration option with your value.

<div gls-drop="animation: gls-animation-slide-top-small; duration: 1000"></div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

<button class="gls-button gls-button-default" type="button">Hover</button>
<div gls-drop="animation: gls-animation-slide-top-small; duration: 1000">
    <div class="gls-card gls-card-body gls-card-default">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>
</div>

Component options

Any of these options can be applied to the component attribute. Separate multiple options with a semicolon. Learn more

Option	Value	Default	Description
`toggle`	String, Boolean	`- *`	CSS selector for the element to be used as toggle. By default, the preceding element is used.
`pos`	String	`bottom-left`	The position of the drop.
`mode`	String	`click, hover`	Comma separated list of drop trigger behaviour modes: `hover`, `click`
`delay-show`	Number	`0`	Delay time in milliseconds before a drop is displayed in hover mode.
`delay-hide`	Number	`800`	Delay time in milliseconds before a drop is hidden in hover mode.
`display`	`dynamic`, `static`	`dynamic`	Disable dynamic positioning while scrolling by setting this option to `static`.
`boundary`	Boolean, String	`true`	CSS selector of the element to maintain the drop’s visibility. By default, it’s the window.
`boundary-align`	Boolean	`false`	Align the drop to its boundary.
`flip`	Boolean, String	`true`	Automatically flip the drop. Possible values are `false`, `true`, `x` or `y`.
`offset`	Number	`0`	The offset of the drop’s container.
`animation`	String	`false`	Space separated names of animations to apply.
`duration`	Number	`200`	Animation duration in milliseconds.

pos is the Primary option and its key may be omitted, if it’s the only option in the attribute value.

<span gls-drop="top-left"></span>

JavaScript

Learn more about JavaScript components.

Initialization

Gloss.drop(element, options);

Events

The following events will be triggered on elements with this component attached:

Name	Description
`toggle`	Fires before an item is toggled.
`beforeshow`	Fires before an item is shown. Can prevent showing by calling `preventDefault()` on the event.
`show`	Fires after an item is shown.
`shown`	Fires after the item’s show animation has completed.
`beforehide`	Fires before an item is hidden. Can prevent hiding by calling `preventDefault()` on the event.
`hide`	Fires before an item is hidden.
`hidden`	Fires after an item is hidden.
`stack`	Fires when the `drop-stack`class is applied.

Methods

The following methods are available for the component:

Show

Gloss.drop(element).show();

Shows the Drop.

Hide

Gloss.drop(element).hide(delay);

Hides the Drop.

Name	Type	Default	Description
`delay`	Boolean	true	Delay hiding the Drop.