Advanced Tabs

Advanced Tabs combines tab labels with child panels built from other elements. Use it when a tab panel needs images, buttons, or a custom layout.

Add and configure Advanced Tabs

1. Click Add, choose Advanced Tabs, and place it in the container.
2. Configure the labels under Content > Content > Tabs.
3. Use Content to add the tab content panels, then place the required elements inside each panel.
4. Set Active Tab and Open On Hover.
5. Style Design > Tabs, Size, and Spacing.
6. Save your changes.

Controls

Responsive varies by breakpoint; Hover has a hover value; Shared applies across both. Linked controls have their own reference. In conditions, = means “is” and ≠ means “is not.”

Content > Content

Setting	Purpose and options	Behavior
Tabs	Add, edit, remove, and reorder tabs.	Shared
Tabs > Icon	Icon.	Shared
Tabs > Title	Item title.	Shared
Content	Add the child elements offered for this container.	Shared
Active Tab	Set the numeric active tab value.	Shared
Open On Hover	On/off.	Shared

Design > Tabs

Setting	Purpose and options	Behavior
Vertical	On/off.	Shared
Tabs Width	Tabs width and unit. When: Vertical is set.	Responsive
Horizontal At	Breakpoint. When: Vertical is set.	Shared
Style	Tabs, Pills, Bar.	Shared
Position	Left, Right. When: Vertical is set.	Shared
Position	Left, Center, Right, Full Width. When: Vertical is unset.	Shared
Space Between	Space between and unit. When: Position ≠ Full Width or Style ≠ Bar.	Shared
Space After	Space after and unit. When: Position ≠ Full Width.	Responsive

Shown when Style = Bar.

Setting	Purpose and options	Behavior
Bar > Separator	Color or supported fill.	Shared
Bar > Radius	Radius and unit.	Shared
Bar > Shadow	Shadow offset, blur, spread, color.	Shared

Setting	Purpose and options	Behavior
Pill Radius	Pill radius and unit. When: Style = Pills.	Shared
Separator > Color	Color or supported fill. When: Style = Tabs.	Shared
Separator > Width	Width. When: Style = Tabs.	Shared
Text > Typography	typography controls.	See linked controls
Text > Hover	Color or supported fill.	Shared
Text > Active	Color or supported fill.	Shared
Background > Inactive	Color or supported fill.	Shared
Background > Hover	Color or supported fill.	Shared
Background > Active	Color or supported fill.	Shared

Shown when Style ≠ Pills.

Setting	Purpose and options	Behavior
Underline > Hover	Color or supported fill.	Shared
Underline > Active	Color or supported fill.	Shared
Underline > Width	Width.	Shared
Underline > Radius	Radius and unit.	Shared

Setting	Purpose and options	Behavior
Padding > Vertical	Vertical and unit.	Shared
Padding > Horizontal	Horizontal and unit.	Shared
Icon > Size	Size and unit. When: Align ≠ none.	Shared
Icon > Nudge > Nudge X	Nudge x and unit.	Shared
Icon > Nudge > Nudge Y	Nudge y and unit.	Shared
Icon > After Icon	After icon and unit.	Shared
Responsive > Show as Dropdown	On/off.	Shared

Shown when Show as Dropdown is set.

Setting	Purpose and options	Behavior
Responsive > Visible At	Breakpoint.	Shared
Responsive > Dropdown Styles > Background	Color or supported fill.	Shared
Responsive > Dropdown Styles > Borders	borders controls.	See linked controls
Responsive > Dropdown Styles > Padding	spacing controls.	See linked controls
Responsive > Dropdown Styles > Typography	typography controls.	See linked controls

Setting	Purpose and options	Behavior
Responsive > Show Affordance	On/off. When: Show as Dropdown is unset.	Shared
Responsive > Color	Color or supported fill. When: Show Affordance is set.	Shared
Transition Effect	Transition effect and unit.	Shared

Design > Size

Setting	Purpose and options	Behavior
Width	Width.	Responsive
Min Height	Min height and unit.	Shared

Design > Spacing

Setting	Purpose and options	Behavior
Wrapper	spacing controls.	See linked controls

Troubleshooting