Custom framework attributes (data-*)

data-* attributes power the interactive JavaScript behavior in Foundation, Bootstrap, and Materialize components. This article shows you how to add and customize them through Site Designer’s Element pane.

What are data-* attributes?

data-* attributes are custom HTML attributes that store information for JavaScript without affecting layout or presentation. Every CSS framework uses them to wire up interactive components without inline JavaScript:

• Bootstrap: data-toggle="modal", data-target="#myModal", data-dismiss="modal", data-ride="carousel"
• Foundation: data-accordion, data-reveal, data-orbit, data-sticky, data-dropdown
• Materialize: data-target="mobile-nav", data-badge-caption="new"

When you add a framework component through Site Designer’s canvas, the necessary data-* attributes are inserted automatically. However, for advanced configurations — such as customizing a Foundation accordion to allow multiple open panels — you’ll need to add or modify data-* attributes manually.

Adding data-* attributes in Site Designer

1. Select the element on the canvas.
2. Open the Element pane.
3. Scroll to the Attributes section.
4. Click Add Attribute.
5. Enter the attribute name (e.g., data-toggle) and value (e.g., modal).
6. Press Enter to apply.

The attribute is immediately added to the element’s HTML and visible in the code view.

ARIA attributes are added exactly the same way, through the Element pane’s Attributes section — see ARIA roles and accessibility attributes for the full reference.

When to add attributes manually vs. let the framework handle it

Example: Foundation accordion with custom options

A standard Foundation accordion is created automatically. To allow multiple panels open simultaneously, add this attribute to the <ul class="accordion"> element:

• Attribute name: data-multi-expand
• Value: true

And to allow all panels to be closed (none forced open):

• Attribute name: data-allow-all-closed
• Value: true

These are added in the Element pane’s Attributes section — no code editing required.

Attributes tutorials

Let’s now see some guides and tutorials on how to create these interactive elements using the Attributes control.

Tutorial 1: Build a responsive menu

Using Foundation, learn how to create a multi-level responsive navigation menu. The menu transforms into a mobile menu icon that triggers the menu for small screens.

Tutorial 2: Show/hide items with Toggler

In the video demonstration, the webpage is built with Foundation, so the class names and attributes are assigned by that framework. The goal is for a button to show a hidden section of the page. The button will be the Toggle, and the pricing container is the Toggler.

Video recap:

1. The data-toggle attribute is applied to the trigger element (in this case the button) on the Element pane. The attribute value is Price — the ID name of the content that is being called to appear.
2. Next, select the element or the group you want triggered to show/hide when the button is clicked. In the video, the parent container holding the pricing info is selected. On the Styles pane the ID name Price is applied so that it matches the value entered in data-toggle.
3. The triggered element is given the class name is-hidden.
4. On the Element pane, the triggered element is given the attribute data-toggler with the value is-hidden.

Tutorial 3: Build a video modal

In the video demonstration, the webpage is built with Bootstrap, so the class names and attributes are assigned by that framework. Using Bootstrap’s names, we are going to make a button trigger a full-screen video modal to pop over the webpage. The button will be the Toggle, and the container with the video element is the Target.

Video recap:

1. A Container element with a Video Platform element are added to the design. The Container is assigned a unique ID name (in this example video-demo) so that it can be targeted by the button.
2. The Container element is assigned the class name modal. This causes the container with its children to disappear.
3. The button will trigger the display action. From Element pane → Properties → Attributes, add data-toggle with the value modal.
4. A second attribute is added to the button, data-target with the value #video-demo. The value must match the ID name you set on your modal.

Tutorial 4: Create a carousel

In the video tutorial, learn how to build a picture carousel — slideshow — using the Bootstrap framework. While this tutorial uses the Picture element within the carousel, it would work for any design, such as applying the image to the background of the containers and layering text on top.

The basic structure is made up of two Container elements. One serves as the main carousel wrapper, the second as the inner wrapper. Nested inside the second container is the desired content — in this example, three additional containers, each the parent of an individual slideshow image.

Video recap:

1. The first parent Container is added to the canvas. On the Styles pane an ID is associated with the slider — in the example, carousel-example. Then the class names carousel and slide are applied, and the attribute data-ride with value carousel is added on the Element pane.
2. A second Container is nested inside the first by dragging and dropping it onto the canvas. The class name carousel-inner is assigned.
3. With the base structure in place, the children containers can be added as the gallery slides — three in this example, each assigned the class carousel-item. The slide you want first also gets the class active. Use the eye icon on the Element pane to show or hide any slide that is currently invisible, so you can style it.
4. Each carousel-item container holds a Picture element. The Picture elements all share the class names d-block and w-100. The image resource is assigned on the Element pane, and the layout is tweaked so the images have max-width: none.

Bonus — add slide controls:

5. Add two Button Link elements to the parent container (carousel).
6. The left-side button gets the class name carousel-control-prev and three attributes: role="button", data-slide="prev", and aria-hidden="true".
7. The right-side button gets the class name carousel-control-next and three attributes: role="button", data-slide="next", and aria-hidden="true".
8. Finally, both buttons need to be linked to the parent container’s ID name — in this case #carousel-example, entered on the Element pane in the HREF box.

More tutorials and framework documentation

• Learn how to build a nested menu
• Build an “Orbit” photo gallery using Foundation
• Foundation documentation
• Bootstrap documentation
• Materialize documentation