A small CSS component that turns browser-native
<details> elements into dropdown menus.
Vanilla JS Pocket Guides or join the Vanilla JS Academy and level-up as a web developer.
Interested in doing more with browser-native methods and APIs? Check out my
Compiled and production-ready code can be found in the
dist directory. The
src directory contains development code.
1. Include Drop on your site.
In addition to a small CSS file, you should include a
<details> element polyfill to add support to IE and Edge.
<link rel="stylesheet" type="text/css" href="path/to/drop.min.css"> <script src="path/to/details-element-polyfill.js"></script>
You can also use the jsDelivr CDN. I recommend linking to a specific version number or version range to prevent major updates from breaking your site. Smooth Scroll uses semantic versioning.
<!-- Always get the latest version --> <!-- Not recommended for production sites! --> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/cferdinandi/drop/dist/drop.min.css"> <!-- Get minor updates and patch fixes within a major version --> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/cferdinandi/drop@12/dist/drop.min.css"> <!-- Get patch fixes within a minor version --> <link rel="stylesheet" type="text/css" href="https://firstname.lastname@example.org/dist/drop.min.css"> <!-- Get a specific version --> <link rel="stylesheet" type="text/css" href="https://email@example.com/dist/drop.min.css">
You can also use NPM (or your favorite package manager).
npm install dropjs
2. Add the markup to your HTML.
Create a standard
<details> element, and add the
.dropdown class. It can stand on its own, or be wrapped in a list item (
<li>) as part of a bigger navigation menu.
The text inside the
<summary> element is what toggles the dropdown. Add an unordered list (
<ul>) with your dropdown items.
<details class="dropdown"> <summary>This has dropdown items</summary> <ul> <li><a href="#hi">Hi</a></li> <li><a href="#universe">Universe</a></li> </ul> </details>
If the dropdown is in a navigation and will appear close to the right side of the viewport where it's content might get clipped, add the
dropdown-right class to shift it's positioning.
<details class="dropdown dropdown-right"> <summary>This has dropdown items, too</summary> <ul> <li><a href="#hermoine">Hermione</a></li> <li><a href="#harry">Harry Potter</a></li> </ul> </details>
And that's it, you're done. Nice work!
By default, the behavior of one dropdown menu does not affect the other.
If you want all other dropdown menus in a group to close when one is opened, add the included
<!-- Direct Download --> <script src="path/to/drop.min.js"></script> <!-- CDN --> <script src="https://cdn.jsdelivr.net/gh/cferdinandi/drop@12/dist/js/drop.min.js"></script>
Then, instantiate it by passing in the parent element for your dropdown group (or a selector). If you changed the class for your dropdown menus, pass that in as a second argument.
var dropdownGroup = new Drop('#my-nav'); // Using a different class var otherDropdownGroup = new Drop('#another-nav', '.dropdown-alt');
Canceling a dropdown group
You can cancel this functionality with the
Drop includes very minimal styling. You're encouraged to add your own styles to match your theme and layout, including changing the color of the text and dropdown menu links.
<details> element. You'll need to recreate your markup using the new pattern.
Drop has the same support as the
<details> element. That means that it works in all modern browsers, but not IE or Edge. In unsupported, the content will always be expanded.
You can add Edge and IE support with the lightweight
<details> element polyfill. Once Edge migrates to Blink, it will support the element natively.
The code is available under the MIT License.