Dropdown

Ready Added in 2.0.0

Defines different styles for a toggleable dropdown.

Usage

Basically, a dropdown is a specific case of the drop that provides its own styling. Any content, like a button, can toggle a dropdown. Just add the gls-dropdown attribute to a block element following the toggle.

<button type="button"></button>
<div gls-dropdown></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-dropdown="mode: click"></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="gls-inline">
    <button class="gls-button gls-button-default" type="button">Hover</button>
    <div gls-dropdown>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>
</div>

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

Guidelines

When to use

Use a dropdown menu when you need to give users a list of actions or links to choose from.

When to consider something else

Although similar to a native HTML <select> element, the dropdown component should not be used as a replacement inside forms. Use the select element instead when you need to give users a list of mutually exclusive choices while filling out a form.

Accessibility requirements

The Gloss Dropdown is built to follow the WAI-ARIA authoring standards. It is marked up with the appropriate ARIA attributes and uses the JavaScript included in gloss.js to implement the keyboard navigation and focus management required to meet the ARIA Authoring Practices standards. If you need to create the Dropdown functionality in another framework/library like React, Angular, etc., please ensure that it meets the following accessibility requirements.

A dropdown can contain a nav from the Nav component. Just add the .gls-nav class and the .gls-dropdown-nav modifier to a <ul> element.

<button type="button"></button>
<div gls-dropdown>
    <ul class="gls-nav gls-dropdown-nav">...</ul>
</div>

  • <button class="gls-button gls-button-default" type="button">Hover</button>
<div gls-dropdown>
    <ul class="gls-nav gls-dropdown-nav">
        <li class="gls-active"><a href="#">Active</a></li>
        <li><a href="#">Item</a></li>
        <li class="gls-nav-header">Header</li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
        <li class="gls-nav-divider"></li>
        <li><a href="#">Item</a></li>
    </ul>
</div>

Grid in dropdown

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

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

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

  • <button class="gls-button gls-button-default" type="button">Hover</button>
<div class="gls-width-large" gls-dropdown>
    <div class="gls-dropdown-grid gls-child-width-1-2@m" gls-grid>
        <div>
            <ul class="gls-nav gls-dropdown-nav">
                <li class="gls-active"><a href="#">Active</a></li>
                <li><a href="#">Item</a></li>
                <li class="gls-nav-header">Header</li>
                <li><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>
                <li class="gls-nav-divider"></li>
                <li><a href="#">Item</a></li>
            </ul>
        </div>
        <div>
            <ul class="gls-nav gls-dropdown-nav">
                <li class="gls-active"><a href="#">Active</a></li>
                <li><a href="#">Item</a></li>
                <li class="gls-nav-header">Header</li>
                <li><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>
                <li class="gls-nav-divider"></li>
                <li><a href="#">Item</a></li>
            </ul>
        </div>
    </div>
</div>

Position

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

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

  • <div class="gls-inline">
    <button class="gls-button gls-button-default" type="button">Top Right</button>
    <div gls-dropdown="pos: top-right">
        <ul class="gls-nav gls-dropdown-nav">
            <li class="gls-active"><a href="#">Active</a></li>
            <li><a href="#">Item</a></li>
            <li class="gls-nav-header">Header</li>
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
            <li class="gls-nav-divider"></li>
            <li><a href="#">Item</a></li>
        </ul>
    </div>
</div>

<div class="gls-inline">
    <button class="gls-button gls-button-default" type="button">Bottom Justify</button>
    <div gls-dropdown="pos: bottom-justify">
        <ul class="gls-nav gls-dropdown-nav">
            <li class="gls-active"><a href="#">Active</a></li>
            <li><a href="#">Item</a></li>
            <li class="gls-nav-header">Header</li>
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
            <li class="gls-nav-divider"></li>
            <li><a href="#">Item</a></li>
        </ul>
    </div>
</div>

<div class="gls-inline">
    <button class="gls-button gls-button-default" type="button">Right Center</button>
    <div gls-dropdown="pos: right-center">
        <ul class="gls-nav gls-dropdown-nav">
            <li class="gls-active"><a href="#">Active</a></li>
            <li><a href="#">Item</a></li>
            <li class="gls-nav-header">Header</li>
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
            <li class="gls-nav-divider"></li>
            <li><a href="#">Item</a></li>
        </ul>
    </div>
</div>
Position Description
bottom-left Aligns the dropdown to the bottom left.
bottom-center Aligns the dropdown to the bottom center.
bottom-right Aligns the dropdown to the bottom right.
bottom-justify Aligns the dropdown to the bottom and justifies its width to the related element.
top-left Aligns the dropdown to the top left.
top-center Aligns the dropdown to the top center.
top-right Aligns the dropdown to the top right.
top-justify Aligns the dropdown to the top and justifies its width to the related element.
left-top Aligns the dropdown to the left top.
left-center Aligns the dropdown to the left center.
left-bottom Aligns the dropdown to the left bottom.
right-top Aligns the dropdown to the right top.
right-center Aligns the dropdown to the right center.
right-bottom Aligns the dropdown to the right bottom.

Boundary

By default, the dropdown 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-dropdown 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-dropdown="boundary: .my-class"></div>
</div>

  • <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-dropdown="boundary: .boundary">
        <ul class="gls-nav gls-dropdown-nav">
            <li class="gls-active"><a href="#">Active</a></li>
            <li><a href="#">Item</a></li>
            <li class="gls-nav-header">Header</li>
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
            <li class="gls-nav-divider"></li>
            <li><a href="#">Item</a></li>
        </ul>
    </div>

    <button class="gls-button gls-button-default gls-float-right" type="button">Hover</button>
    <div gls-dropdown="boundary: .boundary">
        <ul class="gls-nav gls-dropdown-nav">
            <li class="gls-active"><a href="#">Active</a></li>
            <li><a href="#">Item</a></li>
            <li class="gls-nav-header">Header</li>
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
            <li class="gls-nav-divider"></li>
            <li><a href="#">Item</a></li>
        </ul>
    </div>

</div>

Boundary alignment

You can also align the dropdown 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-dropdown="boundary: .my-class; boundary-align: true"></div>
</div>

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

    <button class="gls-button gls-button-default gls-float-left" type="button">Justify</button>
    <div gls-dropdown="pos: bottom-justify; boundary: .boundary-align; boundary-align: true">
        <ul class="gls-nav gls-dropdown-nav">
            <li class="gls-active"><a href="#">Active</a></li>
            <li><a href="#">Item</a></li>
            <li class="gls-nav-header">Header</li>
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
            <li class="gls-nav-divider"></li>
            <li><a href="#">Item</a></li>
        </ul>
    </div>

    <button class="gls-button gls-button-default gls-float-right" type="button">Center</button>
    <div gls-dropdown="pos: bottom-center; boundary: .boundary-align; boundary-align: true">
        <ul class="gls-nav gls-dropdown-nav">
            <li class="gls-active"><a href="#">Active</a></li>
            <li><a href="#">Item</a></li>
            <li class="gls-nav-header">Header</li>
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
            <li class="gls-nav-divider"></li>
            <li><a href="#">Item</a></li>
        </ul>
    </div>

</div>

Offset

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

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

  • <button class="gls-button gls-button-default" type="button">Hover</button>
<div gls-dropdown="offset: 80">
    <ul class="gls-nav gls-dropdown-nav">
        <li class="gls-active"><a href="#">Active</a></li>
        <li><a href="#">Item</a></li>
        <li class="gls-nav-header">Header</li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
        <li class="gls-nav-divider"></li>
        <li><a href="#">Item</a></li>
    </ul>
</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-dropdown="animation: gls-animation-slide-top-small; duration: 1000"></div>

  • <button class="gls-button gls-button-default" type="button">Hover</button>
<div gls-dropdown="animation: gls-animation-slide-top-small; duration: 1000">
    <ul class="gls-nav gls-dropdown-nav">
        <li class="gls-active"><a href="#">Active</a></li>
        <li><a href="#">Item</a></li>
        <li class="gls-nav-header">Header</li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
        <li class="gls-nav-divider"></li>
        <li><a href="#">Item</a></li>
    </ul>
</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 dropdown.
mode String click, hover Comma separated list of dropdown trigger behaviour modes: hover, click
delay-show Number 0 Delay time in milliseconds before a dropdown is displayed in hover mode.
delay-hide Number 800 Delay time in milliseconds before a dropdown is hidden in hover mode.
boundary String window CSS selector of the element to maintain the drop’s visibility.
boundary-align Boolean false Align the dropdown 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 dropdown’s container.
animation String false Space separated names of animations to apply.
duration Number 200 Animation duration in milliseconds.

JavaScript

Learn more about JavaScript components.

Initialization

Gloss.dropdown(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-stackclass is applied.

Methods

The following methods are available for the component:

Show

Gloss.dropdown(element).show();

Shows the Dropdown.

Hide

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

Hides the Dropdown.

Name Type Default Description
delay Boolean true Delay hiding the Dropdown.