Socket
Socket
Sign inDemoInstall

@springernature/global-dropdown

Package Overview
Dependencies
0
Maintainers
14
Versions
16
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@springernature/global-dropdown

Display a contextual list of links controlled by a toggle


Version published
Maintainers
14
Weekly downloads
3

Weekly downloads

Readme

Source

Global Dropdown

Global branded dropdown

CSS

Include the SCSS in your application

// Pick ONE of the brands below to include
@import '@springernature/global-dropdown/scss/10-settings/default';
@import '@springernature/global-dropdown/scss/10-settings/nature';

// Include this with your other components
@import '@springernature/global-dropdown/scss/50-components/dropdown';

Example usage

The core experience will show a label and a list of items underneath. JavaScript and more advanced CSS options are available by using the class .js on the document root element.

<div class="c-dropdown">
    <span class="c-dropdown__label">dropdown</span>
    <button class="c-dropdown__button" aria-expanded="false" data-dropdown data-dropdown-target="#dropdown">Dropdown
        <svg aria-hidden="true" width="10" height="10" aria-hidden="true" focusable="false">
            <use xlink:href="i-chevron-more"></use>
        </svg>
    </button>
    <ul class="c-dropdown__menu" id="#dropdown">
        <li><a href="#" class="c-dropdown__link" data-dropdown-item>Option 1</a></li>
        <li><a href="#" class="c-dropdown__link" data-dropdown-item>Option 2</a></li>
        <li><a href="#" class="c-dropdown__link" data-dropdown-item>Option 3</a></li>
    </ul>
</div>

Enhanced dropdown

import {dropdown} from 'global-dropdown/js';

dropdown();

The component uses the Expander from the brand-context package to handle the events.

You can get a quick implementation by adding these two attributes data-dropdown and data-dropdown-target in your HTML as shown at the example above.

If you need more flexibility, use the expander component directly following its documentation.

FAQs

Last updated on 30 Jan 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc