Tabs let you organize information so your pages look clean and easy to read. In this article, we'll walk you through one way to create tabs like the example below, using Studio.Design's boxes and anchor links.
Note: About this design-based tab implementation
This method only recreates the look of tab switching in your design — it's not a proper HTML tab structure. As a result, keyboard navigation and other accessibility features may not work correctly, which could make the content unusable for some visitors.
Note: Behavior inside modals
On sites published using the new publishing platform, this tab switching may not display or work correctly when placed inside a modal. If you want to switch between different pieces of content inside a modal, we recommend using the URL query filter or a similar approach instead.
1. Set up the base box
Add a box that will serve as the base for everything (all tabs and their content).
If you need a heading, add a text box inside the base box.
2. Create the first tab and its content
As an example, let's create a design with three tabs: "Dog," "Cat," and "Rabbit."
Create the full tab row.
First, design the state where the "Dog" tab is selected.
Create the "Dog content" that will appear when the "Dog" tab is selected.
Place the layer at the same level as step 1.
Group the "Dog selected tab" together with the "Dog content."
Name the group "Dog selected."
Set the "Dog selected" box to 100% width and auto height.
Tip: If the design inside the content is the same across all device sizes, it's more efficient to set up responsive adjustments at this stage.
3. Duplicate the tab
Duplicate the "Dog selected" box (layer).
Update the design and layer name of each duplicate so it matches "Cat" and "Rabbit."
Set the height of the base box to [auto].
4. Set IDs and anchor links
Assign an ID to each tab.
Example:
• "Dog selected" box: dog
• "Cat selected" box: cat
• "Rabbit selected" box: rabbit
Set an anchor link on every tab, pointing to the matching animal.
(In this image, that's 9 spots in total.)
Now, when someone clicks a tab, the page jumps to the matching "selected tab" design, making it look like the content has switched.
5. Final layout adjustments
Add the same amount of top padding to each of the "Dog selected," "Cat selected," and "Rabbit selected" boxes. (This prevents the page from jumping when switching tabs.)
Group the "Dog selected," "Cat selected," and "Rabbit selected" layers together. Set the group's width to [100%].
With the group still selected, apply these settings:
• Layout arrow: pointing right
• Alignment: top-left
• Overflow: set to [Hide], and check [Use hidden instead of clip].
Finally, fine-tune the position of the heading text box using a negative margin.
6. Check and publish
Once everything is set up, check how the design behaves in Live Preview.
If you were editing a live site, update your site to publish the changes. Your changes won't appear on the live site until you do this.