How do I add a custom attribute in Webflow?

Add the name and the value

A custom attribute is extra information on an HTML element. Webflow already creates some attributes for you, such as a class, an id, or a link destination. Custom attributes cover the rest: a tooltip title, an accessible name, or a data value that a script reads.

Select the element on the canvas or in the Navigator. Open Element settings, then Custom attributes. Click the plus icon. Type the attribute name and its value. You can also paste both at once, as in title=Learn more. Webflow checks the paste. A duplicate attribute or invalid characters are flagged so you can fix that line.

Some names are reserved because a native setting already creates them. You cannot add href as a custom attribute to make an ordinary div behave like a link. Put the destination in the link settings on a text link, a link block, or a button.

Example: a button that only says Read more needs a clearer name for assistive tech. Add an attribute named aria-label and set the value to Read the pricing guide. The visible label can stay short. The attribute carries the longer name.

Bind a CMS field when each item differs

A typed value is the same on every copy of that element. When each Collection item needs its own value, connect a field. Webflow allows that connection only on a Collection page or inside a Collection list.

Select the element in that list or on that template. Open Custom attributes, click the plus icon, and enter the attribute name. In the value field, click the purple dot and choose the Collection field. You can also bind CMS data to the id setting, which is managed separately from custom attributes, when custom code needs a unique id per item.

Example: each blog card has a Read more button. The visible words stay Read more. The aria-label value comes from the post Name field, so the accessible name includes the post title. A static page cannot make that connection. Move the button inside the Collection list first.

A nofollow link is one specific attribute, rel, with the value nofollow. The nofollow guide covers that case. This page is the general control.

Bind a component property on the main component

Component instances can carry their own attribute values through a property. Edit the main component, not a single instance, when the attribute should be available everywhere that component is used. Select the element inside the component. Open Custom attributes, click the plus icon, and enter the name. Click the purple dot in the value field and choose a component property, or create one.

On an instance, open the Properties panel and type the value for that property. Webflow's example is a theme property bound to the class attribute, with a value such as dark, so one card can use a class you already defined.

The class attribute only accepts text-based CMS data and component properties. Classes you create in the Style panel are lowercase and have no spaces. A Style panel class named my cool class is generated as my-cool-class, so that is the value you type. A one-character class created in the Designer gets an underscore in front. You can put several classes in the value, separated by spaces.

The Style selectors panel does not list classes that are only referenced from CMS data or component properties. Before you delete a class that looks unused, check custom attributes on the site. The component guide covers how a main component and its instances share one source.

Edit, remove, and publish

To change an attribute, select the element, open Custom attributes, click the attribute, and update the name or the value. To remove it, click the trash icon next to that attribute.

Publish the site and inspect the element on the live page. The attribute should show the value you typed, or the value from that Collection item. If every card shows the same aria-label, the value is still typed text rather than a field binding. Open the purple dot and choose the field again.

If a script was supposed to read the attribute and nothing happens, confirm the name matches what the script expects, including hyphens, and that the element is the one inside the list. A code embed elsewhere on the page does not create this attribute for you. The code embed guide is for a snippet. This setting is for the attribute on the element.

If the same attribute has to be added on many buttons, send the element name, the attribute name, and the field it should read. I can apply that from a written request. The membership is one plan for every existing Webflow site: $999 per month, including 10 hours of Webflow work. Communication is asynchronous and written only. There are no calls or meetings.