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

Webflow does not provide an official comprehensive list of all possible custom attributes because they're meant to be flexible extensions used with JavaScript frameworks, accessibility standards (like ARIA), and third-party integrations.

However, here’s how custom attributes function within Webflow and where to find practical examples.

1. What Are Custom Attributes in Webflow?

• Custom attributes allow you to add additional HTML attributes on elements beyond default Webflow options.
• These are used to:
• Integrate JavaScript libraries (e.g., data-aos for Animate on Scroll).
• Enable accessibility features (e.g., aria-label).
• Control browser behavior (e.g., loading="lazy" for images or iframes).
• Trigger third-party platform functionalities (e.g., data-splide for Splide sliders).

2. Common Categories of Custom Attributes

Here are the most commonly used categories of custom attributes in Webflow:

• Data attributes (e.g., data-xyz): Used by libraries like AOS, Typed.js, Swiper.
• ARIA attributes (e.g., aria-hidden, aria-label): Improve accessibility.
• SEO and media attributes (e.g., loading="lazy", rel="noopener"): Enhance performance or link behavior.
• Microdata / Schema.org (e.g., itemprop, itemscope): Improve semantic SEO.
• CMS-related attributes: Used when integrating with tools that parse content inside dynamic templates.
• Form-related attributes (e.g., autocomplete, novalidate): Modify browser form behavior.

3. Where to Find Custom Attribute Examples

• Webflow University: No single list, but many Webflow tutorials (e.g., for AOS or custom sliders) show which attributes to use.
• Third-party Libraries Documentation: If you're adding an external library, visit its official docs (e.g., AOS, Swiper, LazyLoad).
• Accessibility Resources: Visit sites like w3.org for valid ARIA attributes.
• Browser DevTools: Inspect popular Webflow templates to view attributes used in the wild.

4. How to Add Custom Attributes in Webflow

• Select any element, then in the Element Settings panel (gear icon), scroll to the Custom Attributes section.
• Click “+ Add Custom Attribute”, enter the name and value (e.g., data-aos and fade-up).

Summary

Webflow doesn’t maintain a complete list of all usable custom attributes because these depend on the functionality you’re integrating. Use trusted documentation from JavaScript libraries, accessibility standards, or SEO tools to determine which custom attributes to apply—and Webflow supports adding any of them manually via the Element Settings panel.