Skip to content
STYLESCAPE

Input Dropdown

Dropdown menu

The ss-c-dropdown module: a trigger plus a __menu of __items. Add is-open to the wrapper to show the menu (shown open here).

Edit Duplicate Archive Delete
HTML 
<div class="ss-c-dropdown is-open" style="margin-block-end: 10rem">
            <button type="button" class="ss-c-button ss-c-button--outline" aria-expanded="true" aria-controls="demo-dropdown-menu">
                Options ▾
            </button>
            <div class="ss-c-dropdown__menu" id="demo-dropdown-menu">
                <a href="#" class="ss-c-dropdown__item">Edit</a>
                <a href="#" class="ss-c-dropdown__item is-active" aria-current="true">Duplicate</a>
                <a href="#" class="ss-c-dropdown__item">Archive</a>
                <span class="ss-c-dropdown__divider" role="separator"></span>
                <a href="#" class="ss-c-dropdown__item">Delete</a>
            </div>
        </div>

Dropdown w/o Select

HTML 
<div class="ss-c-dropdown--menu">
            <label>
                Option 1
                <input type="checkbox" />
            </label>
            <label>
                Option 2
                <input type="checkbox" />
            </label>
            <label>
                Option 3
                <input type="checkbox" />
            </label>
            <label>
                Option 4
                <input type="checkbox" />
            </label>
        </div>

Dropdown w/ Select

Selected: 0 options
HTML 
<div class="ss-c-select_dropdown" style="margin-block-end: 8rem">
            <div class="ss-c-select_dropdown--header">
                <span id="selected-count">Selected: 0 options</span>
                <span style="position: relative; display: inline-block; width: 2rem; height: 1rem; vertical-align: middle">
                    <button class="active ss-c-flipper--down" type="button" aria-label="Toggle options"></button>
                </span>
            </div>
            <div class="ss-c-select_dropdown--menu">
                <label>
                    <span>Option 1</span>
                    <input type="checkbox" />
                </label>
                <label>
                    <span>Option 2</span>
                    <input type="checkbox" checked />
                </label>
                <label>
                    <span>Option 3</span>
                    <input type="checkbox" />
                </label>
                <label>
                    <span>Option 4</span>
                    <input type="checkbox" checked />
                </label>
            </div>
        </div>

Input Dropdown

Demo Code

Link 1 Link 2 Link 3
HTML 
<div class="ss-c-dropdown" style="margin-block-end: 6rem">
            <button onclick="myFunction()" class="ss-c-dropbutton">Dropdown</button>
            <div id="myDropdown" class="ss-c-dropdown-content">
                <a href="#">Link 1</a>
                <a href="#">Link 2</a>
                <a href="#">Link 3</a>
            </div>
        </div>

Menu button (DropdownManager)

data-ss="dropdown-menu" makes the first button (or [aria-haspopup]) toggle the menu: is-open on the root, aria-expanded on the trigger, Escape and a click outside close it, arrow keys move through the items. A native <details class="ss-c-dropdown"> also works and gets the same closing behaviour.

HTML 
<div class="ss-c-dropdown" data-ss="dropdown-menu">
            <button type="button" class="ss-c-button ss-c-button--outline" aria-haspopup="true">Sort</button>
            <ul class="ss-c-dropdown__menu">
                <li><a class="ss-c-dropdown__item" href="#name">Name</a></li>
                <li><a class="ss-c-dropdown__item" href="#date">Date</a></li>
                <li><a class="ss-c-dropdown__item" href="#size">Size</a></li>
            </ul>
        </div>