cferdinandi / drop

A small CSS component that turns browser-native <details> elements into dropdown menus.

Drop

A small CSS component that turns browser-native <details> elements into dropdown menus.

View the demo on CodePen →

Getting Started | Dropdown Groups | Customizing | What's new? | Browser Compatibility | License

---

Interested in doing more with browser-native methods and APIs? Check out my Vanilla JS Pocket Guides or join the Vanilla JS Academy and level-up as a web developer. 🚀

---

Getting Started

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.

Direct Download

You can download the files directly from GitHub.

<link rel="stylesheet" type="text/css" href="path/to/drop.min.css">
<script src="path/to/details-element-polyfill.js"></script>

CDN

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://cdn.jsdelivr.net/gh/cferdinandi/[email protected]/dist/drop.min.css">

<!-- Get a specific version -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/cferdinandi/[email protected]/dist/drop.min.css">

And here's a CDN for the polyfill.

NPM

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!

Explore a demo on CodePen →

Dropdown Groups

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 drop.js script.

<!-- 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');

Explore dropdown groups on CodePen →

Canceling a dropdown group

You can cancel this functionality with the destroy() method.

dropdownGroup.destroy();

Customizing

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.

What's new?

Drop 12 completely ditches the old JavaScript plugin and markup in favor of the browser-native <details> element. You'll need to recreate your markup using the new pattern.

Browser Compatibility

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.

Polyfill

You can add Edge and IE support with the lightweight <details> element polyfill. Once Edge migrates to Blink, it will support the element natively.

License

The code is available under the MIT License.

drop's Issues

Include polyfill in build

Drop Jumbo (with Astro Navbar). Added sub-links not working in ProcessWire CMS

I'm trying to use Drop Jumbo (with Astro Navbar) with ProcessWire for a project.

The static basis is:

Menu

    <ul class="nav-navbar">

        <li class="dropdown-jumbo" data-dropdown>
            <a href="FALLBACK-URL.com">
                Link
                <span class="dropdown-show">+</span>
                <span class="dropdown-hide">-</span>
            </a>
            <div class="dropdown-menu-jumbo" data-dropdown-menu>
                <div class="container">
                    <div class="grid-three-fourths float-center">                                    
                        <ul>
                            <li><a href="#">Sub-link</a></li>                                    
                        </ul>  
                    </div>                                  
                </div>
            </div>
        </li>

    </ul>

</div>

So, I've replaced divs and texts (only) with an ul, lists and anchors (if compared to the demo).

Perhaps because of this (an active class being applied to a second-level anchor(?)) or something else, when I click on a sub-link in the drop-down menu, it doesn't load the page targeted by the anchor/link (but the URL is fine).
There is the following message in Firebug's Console(?):
"TypeError: i is null

...e.classList.toggle(o.toggleActiveClass),i.classList.toggle(o.contentActiveClass)..."

The fallback URL is the first sub-link URL.

Fix closeDrops() custom selectors

Completely refactor

• Switch to a constructor pattern
• a11y considerations
• Better overall UX

Separate callbacks for collapse and expand actions

Fix event listener

} else if ( toggle !== document.documentElement && toggle.parentNode.hasAttribute( 'data-dropdown' ) ) {

becomes…

} else if ( toggle !== document.documentElement && getClosest(toggle, '[data-dropdown]') ) {

Update NPM deps and switch to lib-sass

package.json

"gulp": "^3.9.0",
"node-fs": "^0.1.7",
"del": "^1.2.0",
"lazypipe": "^0.2.4",
"gulp-plumber": "^1.0.1",
"gulp-flatten": "^0.0.4",
"gulp-tap": "^0.1.3",
"gulp-rename": "^1.2.2",
"gulp-header": "^1.2.2",
"gulp-footer": "^1.0.5",
"gulp-watch": "^4.2.4",
"gulp-livereload": "^3.8.0",
"gulp-jshint": "^1.11.1",
"jshint-stylish": "^2.0.1",
"gulp-concat": "^2.6.0",
"gulp-uglify": "^1.2.0",
"karma": "^0.12.37",
"gulp-karma": "^0.0.4",
"karma-coverage": "^0.4.2",
"jasmine": "^2.3.1",
"karma-jasmine": "^0.3.6",
"karma-phantomjs-launcher": "^0.2.0",
"karma-spec-reporter": "^0.0.19",
"karma-htmlfile-reporter": "^0.2.1",
"gulp-sass": "^2.0.3",
"gulp-minify-css": "^1.2.0",
"gulp-autoprefixer": "^2.3.1",
"gulp-svgmin": "^1.1.2",
"gulp-svgstore": "^5.0.2",
"gulp-markdown": "^1.0.0",
"gulp-file-include": "^0.11.1"

gulpfile.js

.pipe(sass({
    outputStyle: 'expanded',
    sourceComments: true
}))

Grandchild items

Hey Chris,

I just installed the version 5.0.0 of drop for a new project and I noticed that grandchild menu items are not receiving the same treatment as parent menu items. In the following markup I have a grandchild item:

...
    <li class="dropdown">
        <a href="FALLBACK-URL.com">Dropdown 1</a>
        <div class="dropdown-menu dropdown-right">
            <ul>
                <li><a href="#">Item 1</a></li>
                <li><a href="#">Item 2</a></li>
                <li><a href="#">Item 3</a>
                    <ul>
                        <li><a href="#">Grandchild Item 1</a></li>
                    </ul>
                </li>
                <li><a href="#">Item 4</a></li>
            </ul>
        </div>
    </li>
...

When I am clicking on the list-item (Item 3) the child element UL is not receiving and active state <ul class="active"> . I tested the difference on the same project by installing an older version of drop (4.3.1) and was able to achieve an active state on nested items.

Thanks again for the good work!

More accessible dropdown menus

• http://staff.washington.edu/tft/tests/menus/simplyaccessible/index.html
• http://codepen.io/grayghostvisuals/pen/ltjDa

Update callback setup

Move to before/after callbacks

Create a noJS functional fallback using :hover state

Convert to Sass

Uncaught TypeError: Cannot read property 'classList' of null

Hey,

When links are clicked inside the dropdown, I get an error in the console and it won't follow my links. I noticed the 'Drop' demo page is doing the same thing when the inner links are clicked.

Everything seems to be toggling okay aside from not following links.

Here's the testing site in question: http://macdonald.limberlogic.com/

Any ideas?

Remove .*-basic in CSS selectors

Add Buoy

https://github.com/cferdinandi/buoy

Example without UI

I'm trying to implement Drop into my Tailwind CSS app.
I would like to use the Tailwind CSS classes for styling and Drop for opening and closing the dropdown. I am looking for an example like Tabby where there is an option without UI. So only using the Javascript file from Tabby. Would this be possible?

Using the code below I manage to make Drop open and close the dropdown menu.

<div class="relative">
  <details class="dropdown">
    <summary>
      <button
        class="block h-8 w-8 rounded-full overflow-hidden border-2 border-gray-600 focus:outline-none focus:border-white">
        <img class="h-full w-full object-cover"
          src="https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=256&q=80"
          alt="Your avatar">
      </button>
    </summary>
    <div class="absolute right-0 mt-2 py-2 w-48 bg-white rounded-lg shadow-xl">
      <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-indigo-500 hover:text-white">Account settings</a>
      <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-indigo-500 hover:text-white">Support</a>
      <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-indigo-500 hover:text-white">Sign out</a>
    </div>
  </details>
</div>

Now I would like to remove the arrow from the details. Anny suggestion is welcome.

Publish on NPM

Close dropmenus when the document is clicked

Any way you could add the ability to close the dropdowns when the document is clicked?

This is how the dropdowns behave with Twitter's Bootstrap framework.

Thanks for sharing your code.

Use a data attribute instead of a class as the primary selector

Fix noJS styling to prevent content from spilling outside body

• Update Harbor
• Update Keel

Add optimize js

package.json

"gulp-optimize-js": "^1.0.2",

gulpfile.js

var optimizejs = require('gulp-optimize-js');

    var jsTasks = lazypipe()
        .pipe(header, banner.full, { package : package })
        .pipe(optimizejs)
        .pipe(gulp.dest, paths.scripts.output)
        .pipe(rename, { suffix: '.min' })
        .pipe(uglify)
        .pipe(optimizejs)
        .pipe(header, banner.min, { package : package })
        .pipe(gulp.dest, paths.scripts.output);

Fix CSS for small viewports (no click on link)

• Drop
• PAWS
• Harbor
• Keel

Add namespacing to avoid conflicts

ex:

.drop {
    ...
}

.drop-jumbo {
    ...
}

Update license

Update IIFE

https://gist.github.com/cferdinandi/6337524

Update Drop expand/collapse styling

/**
 * Styling for expand/collapse icons
 */
.dropdown-basic > a .dropdown-show,
.dropdown-basic > a .dropdown-hide,
.js-drop .dropdown-basic > a.active .dropdown-show {
    display: none;
    visibility: hidden;
}

.js-drop .dropdown-basic > a .dropdown-show,
.js-drop .dropdown-basic > a.active .dropdown-hide {
    display: inline-block;
    visibility: visible;
}