Is there a comprehensive list of custom attributes and their functionalities in Webflow?

Webflow supports a variety of custom attributes that you can apply to elements, but it does not offer a comprehensive, in-product list of all possible attributes and their functionalities since custom attributes are based on standard HTML and JavaScript usage.

1. Understanding Custom Attributes in Webflow

• You can add custom attributes to any HTML element in Webflow through the Element Settings panel.
• These attributes allow for advanced interactions, third-party integrations, and custom behavior.
• Custom attributes follow the format: Name and Value, e.g., data-aos = fade-up.

2. Common Use Cases and Examples

Here are several widely-used attribute types in Webflow projects:

• data- attributes: Used to pass info to JavaScript frameworks or libraries.
• Example: data-aos="fade" for Animate On Scroll (AOS).
• aria- attributes: Improve accessibility.
• Example: aria-label="Close Menu".
• href and target: Link behavior modifiers.
• Example: target="_blank" for opening links in a new tab.
• loading: Used in images and iframes.
• Example: loading="lazy" to defer offscreen image loading.
• rel: Gatekeeping behavior of anchor tags.
• Example: rel="noopener noreferrer" for external links.
• role: Defines semantic meaning for screen readers.
• Example: role="button" for divs acting like buttons.

3. Attribute Resources and Documentation

Webflow does not officially maintain a complete list because custom attributes are based on standard HTML.

• For reference, consult:
• MDN Web Docs (https://developer.mozilla.org/) — for a full list of valid HTML, ARIA, and custom data- attributes.
• Third-party plugin documentation, such as:
  • AOS (data-aos)
  • Swiper (data-swiper)
  • Google Tag Manager (using data-* for events)
• Webflow University articles and forums occasionally highlight popular attribute configurations, but it’s not exhaustive.

4. How to Add Custom Attributes in Webflow

• Select the element, then go to the Settings panel (gear icon).
• Scroll to the Custom Attributes section.
• Enter the Name (e.g., data-aos) and Value (e.g., fade-up).
• Webflow automatically injects these into the HTML during publish/export.

Summary

Webflow does not provide a built-in list of all possible custom attributes because they depend on HTML standards and third-party library needs. Use MDN documentation or specific integration docs for reliable attribute references. Add custom attributes via the Element Settings panel to tap into advanced functionality.