{{#if js}} JavaScript {{/if}} {{#if mui}} Motion UI {{/if}} {{#if library}} Library {{/if}}

{{#heading 2}}Sass Reference{{/heading}} {{#if sass.variable}}

{{#heading 3 'sass-variables'}}Variables{{/heading}}

The default styles of this component can be customized using these Sass variables in your project's settings file.

Name	Type	Default Value	Description
`${{this.context.name}}`	{{sassTypes this.type}}	`{{sassValue this.context.value}}`	{{md this.description}}

{{#heading 3 'sass-mixins'}}Mixins{{/heading}}

We use these mixins to build the final CSS output of this component. You can use the mixins yourself to build your own class structure out of our components.

Added in {{this.since.0.version}}

Deprecated in {{this.deprecated}}

{{writeMixin this}}

Aliases: {{#each this.aliased}}{{this}}(){{/each}}

Parameter	Type	Default Value	Description
`${{this.name}}`	{{sassTypes this.type}}	`{{sassValue this.default}}`	{{md this.description}}

{{#heading 3 'sass-functions'}}Functions{{/heading}} {{#each sass.function}}{{#filter this}}

Added in {{this.since.0.version}}

Deprecated in {{this.deprecated.version}}

{{writeFunction this}}

Parameter	Type	Default Value	Description
`${{this.name}}`	{{sassTypes this.type}}	`{{sassValue this.default}}`	{{md this.description}}

{{#heading 2}}JavaScript Reference{{/heading}} {{#if js.module}}{{#with js.module.[0]}}

{{#heading 3 'js-module'}}Initializing{{/heading}}

The file {{meta.filename}} must be included in your JavaScript to use this plugin, along with foundation.core.js.{{#if requires}} This plugin also requires these utility libraries:{{/if}}

{{jsModuleName this}}

{{#heading 3 'js-class'}}Foundation.{{this.name}}{{/heading}} {{md this.description}}

var elem = new Foundation.{{this.name}}(element);

Fires these events: {{#each this.fires}} {{this}} {{/each}}

Name	Type	Description
`{{this.name}}`	{{this.type.names.[0]}}	{{this.description}}

{{#heading 3 'js-options'}}Plugin Options{{/heading}}

Use these options to customize an instance of {{title}}. Plugin options can be set as individual data attributes, one combined data-options attribute, or as an object passed to the plugin's constructor. Learn more about how JavaScript plugins are initialized.

Name	Description	Example
{{this.name}}	{{this.description}}	`{{this.examples}}`

{{#heading 3 'js-events'}}Events{{/heading}}

These events will fire from any element with a {{title}} plugin attached.

Name	Description
{{this.name}}.zf.{{toLower ../title}}	{{this.description}}

{{#heading 3 'js-functions'}}Functions{{/heading}} {{#each js.function}}

{{#heading 4 this.name}}{{../../js.class.0.name}}.{{this.name}}{{/heading}} {{md this.description}} {{#if this.fires}}

Fires these events: {{#each this.fires}} {{this}} {{/each}}

Name	Type	Description
`{{this.name}}`	{{this.type.names.[0]}}	{{this.description}}

{{ title }}