Skip to main content

Tab

Use Tab to organize multiple content panels inside one section, letting visitors switch between related views without scrolling through every block.

How It Works In Atomicat​

The 3.0 Tab drawer manages nested container panels. Each tab item can be reordered, cloned, deleted, and opened in settings. Each item has a title, normal icon, active icon, and an expand/default option. Adding a new tab creates a container with a title such as Tab 3, column direction, minimum height, and empty contents ready for builder elements.

When To Use It​

  • Compare plans, features, audiences, or product details inside one compact area.
  • Separate FAQ-like content when Accordion is not the desired style.
  • Build tabbed sections where each panel contains full builder content.
  • Use icons to make tab choices easier to scan.

Configure The Element​

  • Create the needed tabs before filling complex content.
  • Rename each tab title clearly.
  • Select normal and active icons only when the visual state is helpful.
  • Open the settings control to style or edit the nested panel content.
  • Choose the default expanded tab intentionally.

Testing Notes​

  • Click every tab in preview and confirm the correct panel opens.
  • Check mobile behavior; tabs with many labels can overflow.
  • After cloning tabs, rewrite titles and content so duplicate panels do not ship.

Limitations And Tips​

  • Tab panels are nested containers, so deep content can become harder to manage.
  • Avoid hiding critical conversion copy behind a tab if most visitors will not click it.
  • Use Accordion instead when vertical disclosure is clearer on mobile.

FAQ​

Can each tab contain other elements?

Yes. Each tab is a nested container that can hold builder content.

Can tabs have icons?

Yes. The drawer supports normal and active icons for each tab.

How do I set the default tab?

Use the expand/default toggle on the tab item you want open first.