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()
.