Step-by-Step Guide
If you have any further questions on proper setup, please fill out our Hive Service Request form and someone from the team will help you.
Page Examples:
For visuals of the component, please see the Tabs configured on the page below:
Tabs
What it does: Organizes content into tabbed panels — only the active tab's content is shown at once. Supports both horizontal (default) and vertical tab layouts. Each tab contains a title and a rich text content area.
When to use it: Comparing program tracks, organizing content by audience, presenting multi-step information compactly.
How to Add
- Edit the page node.
- Click Add Component → Tabs.
Top-Level Fields
| Field Label | What to Enter | Required? | Notes |
|---|---|---|---|
| Tab Heading | Section heading above the tab bar | No | — |
| Tab Area | Individual tab items (see below) | No | — |
| Vertical Tabs Display | Toggle for vertical tab layout | No | Unchecked = horizontal (default); checked = vertical |
Tabs Item Fields (per tab)
| Field Label | What to Enter | Required? | Notes |
|---|---|---|---|
| Tab Title | The clickable tab label. Keep to 1–4 words. | No | Long labels break on mobile |
| Tab Content | The content shown when the tab is active | No | Supports rich text |
How to Update
- Edit the page, open the Tabs component.
- Click into a tab item to update its Tab Title or Tab Content.
- Add new tabs with Add Item; remove old ones with ×.
- Reorder tabs using drag handles — they display left to right (or top to bottom in vertical mode) in the order set here.
- Save.
⚠️ Don't put critical information only inside a non-default tab. Some users won't realize additional tabs exist. If content is essential, consider a different layout like an accordion (FAQs) or sequential sections.