Adapter is mechanism to adapt an object—usually HTMLElement—to different object, which is inspired by Sling Adapter.

It is typically used to enhance existing functionality of the element according to a certain vocabulary.

Registering Adapter

An adapter is registered by registering to foundation-registry using foundation.adapters name and config satisfying FoundationAdaptersAdapter interface.

interface FoundationAdaptersAdapter {
  type: string;
  selector: string;
  adapter: Function;

AdaptTo jQuery Plugin

AdaptTo is a jQuery plugin to expose the adapter mechanism.

 * Exposes the API of the given type for the first element in the set of matched elements.
 * An element can be adapted only when it satisfies the condition of the corresponding type.
 * If it cannot be adapted, <code>undefined</code> is returned.
 * @param type The target type the adaptor will expose
 * @returns The API object
jQuery.fn.adaptTo: (type: string) => any;


// Registering an adapter that exposes "foundation-selections" API of ".foundation-collection" element
$(window).adaptTo("foundation-registry").register("foundation.adapters", {
    type: "foundation-selections",
    selector: ".foundation-collection",
    adapter: function(el) {
        var collection = $(el);

        return {
            count: function() {
                return collection.find(".foundation-selections-item").length;

            clear: function(suppressEvent) {
                var length = collection.find(".foundation-selections-item").removeClass("foundation-selections-item").length;

                if (!suppressEvent && length) {

                return this;

// Then use it using adaptTo plugin
var selectionAPI = $(".foundation-collection").adaptTo("foundation-selections");