@springernature/springer-dropdown

Springer Dropdown

Display a contextual list of links over the top of content, controlled by a toggle.

Usage

<div class="c-dropdown">
    <button class="c-dropdown__button" aria-expanded="false" data-dropdown>Toggle the list of links</button>
    <ul class="c-dropdown__menu">
        <li class="c-dropdown__item">
            <a class="c-dropdown__link" href="a/path">Item 1</a>
        </li>
        <li class="c-dropdown__item">
            <a class="c-dropdown__link" href="a/path">Item 2</a>
        </li>
        <li class="c-dropdown__item">
            <a class="c-dropdown__link" href="a/path">Item 3</a>
        </li>
    </ul>
</div>

import {dropdown} from '@springernature/springer-dropdown';

dropdown();

Options

Option	Type	Description	Default
DROPDOWN_CLASS	String	Class name(s) that are added to the dropdown	''
HIDE_CLASS	String	Class name that is toggled on the dropdown menu	'u-hidden'
HIDE_INITIALLY	Boolean	Adds the HIDE_CLASS to the menu when initialised. If false, it is assumed that the product is controlling the initial hiding of the menu	true
CLICK_OUTSIDE	Boolean	Controls whether clicking outside of the dropdown should close it	true

Options can be set during the module initialisation or via data attributes. If set during initialisation, those defaults will become the defaults for all dropdowns. Data attributes can then be used to change the options for a specific instance.

Initialisation

import {dropdown} from '@springernature/springer-dropdown';

dropdown({
    DROPDOWN_CLASS: 'additional-dropdown-class',
    HIDE_CLASS: 'hide-me',
    HIDE_INITIALLY: false,
    CLICK_OUTSIDE: false
});

Data Attributes

<div class="c-dropdown">
    <button class="c-dropdown__button" 
            aria-expanded="false" 
            data-dropdown 
            data-dropdown-hide-class="hide-me"
            data-dropdown-hide-initially="false"
            data-dropdown-click-outside="false">
        Toggle the list of links
    </button>
    <ul class="c-dropdown__menu">
        <li class="c-dropdown__item">
            <a class="c-dropdown__link" href="a/path">Item 1</a>
        </li>
        <li class="c-dropdown__item">
            <a class="c-dropdown__link" href="a/path">Item 2</a>
        </li>
        <li class="c-dropdown__item">
            <a class="c-dropdown__link" href="a/path">Item 3</a>
        </li>
    </ul>
</div>

Sass

Add styling for the Dropdown by incorporating the settings and component into your application scss endpoint, for example:

// enhanced.scss

// 10-settings
@import '@springernature/springer-dropdown/scss/10-settings/dropdown';

// 50-components
@import '@springernature/springer-dropdown/scss/50-components/enhanced';

Create Dropdown

Some situations require the dropdown to be built using JavaScript. This can be done with the createDropdown method. It takes two mandatory arguments, button text and an array of links, and an optional options object as the third argument.

// Create some links
const links = [];
for (let i = 0; i < 5; i++) {
    const link = document.createElement('a');
    links.push(link);
}

const newDropdown = createDropdown('Menu text', links, {HIDE_CLASS: 'hide-me'});
document.body.appendChild(newDropdown);

Polyfills

This module uses Element.closest() and Object.assign().