@baianat/dropdown
Advanced tools
ES6 class to handle dropdowns with accessibility (a11y) in mind.
You can install dropdown as part of base.extensions.
npm install @baianat/base.extensions
# or using yarn
yarn add @baianat/base.extensions
If you want the standalone version.
npm install @baianat/dropdown
yarn add @baianat/dropdown
<head>
<link rel="stylesheet" href="dist/css/dropdown.css">
</head>
<body>
...
<script type="text/javascript" src="dist/js/dropdown.js"></script>
</body>
.dropdown
[data-base-dropdown].dropdown-menu<!-- add is-left, is-right or is-center -->
<!-- to style the dropdown position -->
<div class="dropdown">
<!-- drop down button -->
<a class="button" data-base-dropdown="#dropdown1">
<svg class="icon">
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
</svg>
</a>
<!-- dropdown menu -->
<div class="dropdown-menu" id="dropdown1">
<p>Awesome text!</p>
</div>
</div>
Once you include the script file, it will search for an element with [data-base-dropdown] attribute and initialize new Dropdown instance.
Note: you add [data-base-dropdown] attribute to the button element and its value will serve as a CSS selector for the .dropdown-menu
If there's no element with [data-base-dropdown] attribute, you have to create a new Dropdown instance manually.
const newDropdown = new Dropdown('#buttonSelector', '#menuSelector', options);
| OPTION | DEFAULT | DESCRIPTION |
|---|---|---|
| menuVisible | 'is-visible' | class name for when the menu is visible |
| menuHidden | 'is-hidden' | class name for when the menu is hidden |
| elementActive | 'is-active' | class name for when the button is active |
| hideWhenClickOut | false | set true to close the menu when clicking outside of it |
Copyright (c) 2017 Baianat
FAQs
ES6 dropdown menu
The npm package @baianat/dropdown receives a total of 2 weekly downloads. As such, @baianat/dropdown popularity was classified as not popular.
We found that @baianat/dropdown demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
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.
Research
Four npm packages disguised as cryptographic tools steal developer credentials and send them to attacker-controlled Telegram infrastructure.
Security News
Ruby maintainers from Bundler and rbenv teams are building rv to bring Python uv's speed and unified tooling approach to Ruby development.
Security News
Following last week’s supply chain attack, Nx published findings on the GitHub Actions exploit and moved npm publishing to Trusted Publishers.