Home App Docs Blog Github

How to pass a custom data attribute to a div from within builder, is it possible to do so?

You can pass custom data attributes or any custom element attribute to any layer in Builder.io through the custom element attributes section in the styles tab:

Screen Shot 2020-10-22 at 9.23.50 PM

Find the custom element attributes section toward the bottom

Screen Shot 2020-10-22 at 9.24.11 PM

Press + New and type in the desired custom attribute, create an option if you don’t see it in the list

Screen Shot 2020-10-22 at 9.25.48 PM

Give it the desired value

Screen Shot 2020-10-22 at 9.31.37 PM

Now you’ll see the custom attribute on the corresponding div:
Screen Shot 2020-10-22 at 9.27.08 PM

You can also pass an attribute that is set dynamically. For example, maybe you have a dynamic list of items and want to apply an id to those elements based off another property. To do this, go to the data tab and create a new binding with whatever attribute you are trying to set:

In this case, the element will have its id set dynamically to whatever is set in state.dynamicId:

Screen Shot 2020-10-23 at 11.05.02 AM