Dropdown

• src
• components
• dropdown.scss

---

Class list

Description

Sandbox's CSS only dropdowns make use of a .reveal-wrapper which contains the things necessary to hide or show the target, depending on the trigger action.

Reveal Wrapper

The general structure of a .reveal-wrapper is as follows.

.reveal-wrapper
    .reveal-trigger-focus <!-- or .reveal-trigger-hover -->
    .reveal-target

Example

<div class="reveal-wrapper">
    <button class="button reveal-trigger-focus">reveal</button>
    <div class="dropdown reveal-target">
        <a href="" class="dropdown-item">item 1</a>
        <a href="" class="dropdown-item">item 2</a>
    </div>
</div>

If you want to implement your own JS solution for revealing targets, make use of the .is-revealed class on a .reveal-target.

Dropdowns

Use a .dropdown-item inside of a .dropdown to either contain content, or for a link.

<div class="dropdown">
    <a href="" class="dropdown-item">link</a>
    <div class="dropdown-divider"></div>
    <div class="dropdown-item">
        <button class="button primary wide">content</button>
    </div>
</div>

Dropdown Placement

Use the .align-right, .on-top, .on-left, or .on-right classes on a .dropdown to adjust the placement or alignment of the dropdown.

<div class="reveal-wrapper">
    <button class="button">on right</button>
    <div class="dropdown on-right">
        <a href="" class="dropdown-item">item 1</a>
        <a href="" class="dropdown-item">item 2</a>
    </div>
</div>