Product Design Lessons

Intro to Foundation  |   Lesson #145

Oh behave! Control Your Behavior with Foundation’s Data Attributes

Learn how to use Foundation’s data attributes to customize your interactive components.

Foundation’s components give you a ton of great functionality right out of the box. They let you build interactive websites that would typically require a bunch of JavaScript. With Foundation, you can set up powerful components purely in HTML, without ever having to write your own JavaScript. In this lesson we’re going to look at how Foundation uses data attributes to communicate JavaScript configuration options from your HTML, to get the behavior you want.

HTML Attributes

First off, let’s talk a little bit about the types of attributes you might want to set on an HTML element.

Let’s take a look at a simple Slider example:

[See Codepen Example]

In this example you can see the three different types of attributes - ids, classes, and data attributes - that we use regularly in Foundation. Our focus in today’s lesson will be data attributes. First lets briefly outline how we use each of these attributes.

Classes are used to manipulate styles. As much as possible, Foundation avoids using classes to indicate things to JavaScript, and also avoids directly applying CSS attributes with JavaScript, preferring to add modifier classes as needed.

Ids are used for targeting. When an element needs to point to a different element (for example in a toggle, or something similar), we use an ID to do that targeting.

Data attributes are used for communicating with the Foundation JavaScript. These are what tell Foundation what type of component something is, and what types of options to configure it with.

Diving into Data Attributes

Foundation’s components use data-attributes for everything that involves passing information to the JavaScript. You use them to indicate what a component is (e.g. data-slider), as well as being able to manipulate any javascript-enabled option within the component. To understand what is available to manipulate, take a look at the component docs page, and scroll down to the very bottom. For slider in particular, it looks like:

As you can see, we can manipulate a great number of different elements of the slider simply by setting different data attributes. For example, we can make our slider step up and down in increments of 5 simply by adding data-step=”5” to the code. Data-options will be added into the HTML on the parent element of the component like so:

[See Codepen Example]

You can string together many data-options as needed. You can string them together like this (notice the syntax difference):

Or separately like this:

Bridging across components

We’ve now looked at how you can update a component simply by changing data attributes. Let’s look at a slightly more complex example where we want to open one component (say a Reveal modal) from another (a link or button).

Take a look at this example, straight from the documentation:

[See Codepen Example]

In this case we have two pieces: the Reveal modal, which is made into a Reveal using the data-reveal attribute, and a link that is intended to open it. You can see that the link uses a data-open attribute containing a name (data-open=”exampleModal1”). Recall how we mentioned above that we use IDs for targeting? When Foundation sees that name, exampleModal1, it looks immediately for an element with the ID exampleModal1. Finding our reveal with that id, it knows what it is supposed to open, and opens it.

Next Steps

That’s it for this week! There’s a lot more you can do with Foundation data-attributes to get your components to behave the way you need to solve your design problems. If you want to keep learning about how to build amazing websites and applications using Foundation, join us for our next Introduction to Foundation course.

About the instructor


Kevin is an engineering lead here at ZURB, and spearheads Foundation development. He’s known for being a JavaScript ninja and getting overly excited about obscure technological details