Horizontal or vertical content tabs, each carrying a title and a full WYSIWYG body — the tool for pricing details, product specifications, shipping and returns policies, or any content you’d otherwise have to split across separate pages, or worse, stack into one long scrolling wall of text that buries the specific section a visitor actually came looking for. Tabs solve a real navigation problem: they let a visitor see at a glance that several related pieces of information exist side by side, and jump directly to the one they need, without scrolling past the others.
Choosing an orientation
The single most consequential decision when setting this widget up is Orientation. The horizontal layout — a row of tab labels across the top with the active tab’s content displayed beneath — is the familiar, default pattern most visitors already recognize instantly from countless other websites, and it works well when you have somewhere between two and perhaps five tabs that can comfortably fit across the available width without wrapping or truncating. The vertical layout instead places the tab list down one side (with its own configurable width) and the content beside it, which becomes the better choice once you’re dealing with a longer list of tabs — six, eight, ten — where a horizontal row would either wrap awkwardly onto a second line or force uncomfortably narrow, hard-to-read tab labels just to fit everything on one row. Vertical orientation also tends to read more naturally on a genuinely content-dense page, like a detailed technical specification sheet with many distinct sections, where a sidebar-style list of section names feels more like a table of contents than a simple toggle.
Styling independently of content
Because the tab bar and the content panel are visually and functionally distinct pieces, they get independent color controls: an accent color for the active tab indicator, a tab bar background, and a separate content panel color — meaning the whole widget can be restyled to match any brand palette without touching a single line of custom CSS. This separation matters in practice because the tab bar and the content area often need genuinely different visual treatment: a tab bar might sit on a subtly tinted background to visually separate it from the surrounding page, while the content panel beneath it typically needs to blend seamlessly with whatever section it’s embedded in.
How it differs from an accordion
It’s worth being deliberate about choosing Tabs over the Accordions widget, since they solve overlapping but distinct problems. With Tabs, the first tab’s content is always visible immediately on page load — there’s no fully-collapsed empty state the way an accordion typically starts. That makes Tabs the better fit when you want a visitor to see genuinely useful content the instant the page loads, with the option to explore further sections, rather than presenting a list of unopened questions that all look empty until clicked. Accordions, conversely, suit content where showing everything collapsed by default — genuinely hiding detail until the visitor asks for it — is the more appropriate starting state, such as a long FAQ list where showing every answer at once would be overwhelming.
Use it for
Product specification sheets with several distinct categories of detail (dimensions, materials, care instructions, warranty), pricing pages comparing plan tiers, and any long-form content that’s naturally organized into a small number of clearly labeled sections a visitor is likely to want to jump between rather than read sequentially top to bottom.
Practical tips
- Switch to vertical orientation once you’re past roughly five tabs — horizontal tab bars degrade quickly beyond that count, either wrapping onto multiple rows or shrinking labels to an unreadable width.
- Keep tab labels short and scannable — a visitor deciding which tab to click is reading labels at a glance, not reading full sentences, so a concise noun phrase ("Shipping", "Specs") works far better than a long descriptive label.
- Set the first (default-visible) tab to whichever content a first-time visitor is statistically most likely to want — it’s the only tab content they’ll see without taking any action at all.