Overview
Tabs are a common navigation tool used on websites to organize related information into easily accessible sections. Instead of loading new pages, tabs let users quickly switch between different types of content on the same page — improving clarity, reducing scrolling, and enhancing the overall user experience.
Tabs divide content into multiple labeled sections. Each section is hidden until its corresponding tab is selected. When you click a tab:
The selected tab becomes highlighted (often bolded, underlined, or colored).
The content linked to that tab appears in the main content area.
The content from other tabs is hidden until clicked again.
Why should you use Tabs?
Tabs are helpful when you want to:
Present a lot of related information without overwhelming the page.
Keep visitors focused on a specific topic.
Let visitors quickly navigate between categories or steps.
Maintain a clean, organized layout.
Benefits of Using Tabs
Faster navigation – Users can switch sections instantly.
Better organization – Keeps related content grouped together.
Cleaner design – Reduces scrolling and clutter.
Improved usability – Helps users find what they need more easily.
Adding a Tab Section
Click the +Add Section button.
Select Tabs.
Click +Add tab.
Select your preferred section (e.g. Image, Image Bio, Video, Grid, etc.)
Adding a Section in Tabs
Click the Add Tab button.
Select your preferred section (e.g. Image, Image Bio, Video, Grid, etc.)
Change the Tab Title to set the tab label.
Duplicating Tabs
Duplicating a tab can be done in two ways. First, in the tab section, click the Copy button next to the tab you want to duplicate. Alternatively, click the tab you want to duplicate, then click the Duplicate button.
Rearranging Tabs
Click the double-headed arrow and drag it to where you want to position the tab.
Deleting Tabs
Click the Trashbin button next to the tab you want to delete.
Styling Tabs
Layout
Tab button size - choose between Hug which is compact, or Fill which is full-width
Tab placement - tab position relative to content, whereas Inside shows the tab inside the section, while Above shows it on top.
Tab alignment - tabs aligned within their container, choose from align to Left, Center, or Right.
Spacing
Padding - value is adjusted to create space around the tab.
Margin - value is adjusted to create space outside the tab's borders.
Inner Padding - value is adjusted to create space between the tab content and its border.
Background
Inner background - background for the tabs' inner area. Choose from None or Color, where you can select the color from the palette or input the hex color. If None is chosen default will apply.
Outer background - background for the entire tabs section. Choose from None, Color, Image, or Video background.
NOTE: The inner background of the tab will take priority, so you won’t see individual tab backgrounds if you set them.
Border
Choose from None, Solid borderline, or Dashed borderline. Customize the border width, color, and border radius. Border radius value makes the tab corners rounded.
Tips for Designing Effective Tabs
Keep labels short and clear (1–2 words if possible).
Use consistent styles for all tabs (active tab highlighted).
Limit the number of tabs — 4 to 6 is ideal for readability.
Need More Help?
If your tabs aren’t working as expected, or you’d like design guidance, contact our Support Team via in-app chat or email us at support@zoomforth.com.