Tabs organize detailed content into bite-sized sections, so your team can quickly access exactly what they’re looking for. No hassle, no confusion.
Why use Tabs?
Long-form content is often hard to digest, especially when everything’s stacked into a single scroll. Tabs solve this by letting you break your documentation into smaller, more intuitive parts.
With Tabs, you can:
Reduce scroll fatigue with clearly segmented content
Make complex documentation easier to explore
Maintain full design flexibility with custom layouts in every tab
Improve discoverability, retention, and user experience
What makes Tabs different?
Unlike traditional tab or accordion blocks, Frontify Tabs give you full control over layout and content.
You can:
Add any number of tabs to a page
Use all Frontify content blocks inside each tab (text, imagery, embeds, Figma, Storybook, code, etc.)
Apply custom layouts for dynamic, design-rich pagesEach tab acts like a standalone section, so you’re not limited by a rigid format or structure.
When to use Tabs
Tabs shine when content is dense, layered, or needs to be easily scannable by different audiences. Here are some real use cases that show the power of Tabs in action:
Design systems: Structure your foundational content into digestible pieces.
Foundations - Typography, color, grids
Components - Buttons, inputs, iconography
Usage - Accessibility, responsive rules
Developer guidelines: Simplify technical content with a logical flow.
Getting Started - Setup instructions, toolchain
APIs - Endpoints, responses, authentication
Examples - Code snippets by language
FAQ - Troubleshooting, known issues
Multi-regional content: Present different versions of the same page based on.
Country-specific branding or messaging
Language localization
Market requirements (e.g. pricing, product imagery)
Campaign and product playbooks: Make playbooks more modular and accessible.
Strategy - Objectives, audiences, KPIs
Creative - Key visuals, messaging pillars
Assets - Downloadable files, usage rules
Activation - Channel plans, contacts
Internal Hubs & Onboarding: Use Tabs to make onboarding content easy to digest
Team Overview - Org charts, key roles
How We Work - Tools, processes, values
Resources - Links, templates, training videos
FAQs - Company policies, time-off, IT info
How to add Tabs
Open your page in the Frontify editor.
Click “+ Section” and select the Tabs layout.
Add your tabs - each one acts like a new section.
Customize each tab with any layout or content blocks you need.
Publish your page - Tabs will appear as clickable labels at the top of the section.
How to style Tabs
Open your page in the Frontify editor.
If you’re using the Legacy theme,Tabs inherit styling from Heading 4.
If you’re using the Classic theme:
Go to the Section settings
Scroll down to the Tab group, and there you can define style, color, etc.
How to set up Target on Tabs
To set up Targets on your tabs, you will first want to make sure that you are in edit mode on the page. While in Edit mode, you will need to hover over the Tab.
It is important to note that there is a Tab Group and a Tab. Make sure you are on the Tab.
While hovering over the Tab, you will then want to hover over the content area underneath to show the settings icon for the Tab. And this is where you will see the settings icon appear for that Tab. From there, you will click on the settings icon and see the Targets option appear in the pull-out on the right-hand side of the page.
Frequently Asked Questions (FAQ)
Can I convert an existing section into Tabs? Not at the moment. You’ll need to manually copy the content into a new Tabs section.
Can I reorder Tabs within the section? Yes, individual tabs can be reordered, but the entire Tabs section can’t be moved (yet).
Ready to Try Tabs?
Start small. Use Tabs to simplify one long, content-heavy page and see the difference for yourself. Whether you’re building better design systems, richer dev docs, or easier onboarding flows, Tabs bring clarity, structure, and flexibility to every page.