Overview

Vertical Tabs arranges tabs in a vertical layout, typically on the left side of the canva. This layout allows users to switch between different sections or components vertically, rather than using the traditional horizontal tab format.

With Vertical Tabs, users can add multiple tabs, each representing a different section or category. Clicking on a tab reveals the content associated with that tab while hiding the content of other tabs.

Reference: Tabs

Vertical Tabs Config

Attributes

Attributes are the options available for each component, allowing you to customize its appearance and control their behavior. It includes various sections explained below..

Basic:

Basic

Basic Attribute Name	Description

Basic Attribute Name	Description
Component Size	This allows users to modify the size of a specific component according to the grid size of layout. For example, If the layout grid size is 3 then layout is divided into 3 sections then you can changes the components size between 1 to 3.
Layout Type	It is used to set the layout type in two ways as: Grid: The Grid type divides a component into a specified number of columns. The grid size determines the number of available columns. Flow: The Flow Layout Type is used for positioning and formatting components within a layout. This layout type allows components to be positioned in relation to each other. Note: By default, this attribute is set to a value of Grid Layout Type.
Default Tab	If you have multiple tabs, select the number to set the default tab.
Overflow Limit	This feature lets you control the number of tab to show. For example, Setting the limit to 1 will show only one tab, with other appearing in a dropdown menu.
Show tabs on right checkbox	If this checkbox is selected, the tab location will change from the left side to the right side.

Config:

Config

Attribute Name	Description

Attribute Name	Description
Show As Wizard	Enables a step-by-step navigation experience within the tabs. When enabled, users can progress through steps in a structured manner
Allow Invalid Switch	Allows users to move between tabs even if the current step contains validation errors
Allow Switch by Tab	Enables users to navigate between steps using tab selection. Users can switch steps by clicking on tabs instead of using navigation buttons
Hide Progress Indicator	If checked, the progress indicator that visually represents the steps in the wizard will be hidden
Show Submit	Displays the submit button within the wizard interface, allowing users to complete the form submission
Submit Label	Defines the label text for the submit button, enabling customization with merge text
Save on Switch	Automatically saves the progress when switching between steps to prevent data loss
Override Next	Allows customization of the "Next" button’s behavior, enabling users to define specific actions when proceeding to the next step
Override Previous	Allows customization of the "Previous" button’s behavior, enabling users to define specific actions when navigating back to a previous step

UI State:

UI State

Attribute Group	Attribute Name	Description

Attribute Group

Attribute Name

Description

Visibility

Visibility Type

It determines whether a component is visible on the layout. It offers the following visibility types:

Always: The component will always be visible.
Conditional: The component's visibility is determined based on specific criteria, which can make it either visible or hidden as needed.
You can explore more about Visibility here

Reference: Conditional Visibility

Component

Component Label

It simply shows the name of the component.

Base UI:

Base UI

Attribute Name	Description

Attribute Name	Description
Margin Location	"Margin Location" refers to the spacing around the outside edge of an element
Margin Size	"Margin Size" refers to the amount of space around the outside edges of an element

Note: After clicking inside the tab section on the layout, you will see the tab configuration.

Tab configurations

Tab Configurations

noKodr - For Salesforce

Vertical Tabs