Tabs organize detailed content into bite-sized sections, so your team can quickly access exactly what they’re looking for. No hassle, no confusion.
Good to know: Tabs is currently in Beta. While fully functional, we’re still iterating based on user feedback. See current limitations below.
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.
Current Limitations (Beta)
Tabs is still evolving, so here are a few limitations to keep in mind:
You can’t move an entire Tabs section (yet): You can delete it, but reordering the entire section requires manually recreating it. Drag-and-drop for full Tabs sections is not planned before full release.
You can’t convert existing sections into Tabs: To use Tabs, you’ll need to manually create a new Tabs section and copy over the content. A conversion tool isn’t available yet.
Tabs inherit Heading 4 styling: This might affect how headings appear depending on your brand style guide. If you use Themes, you can now adjust styling at the theme level for better consistency.
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.