Skip to main content

Footer Tabs

The Footer Tabs Control is a Selection control similar to tabs control which is used to provide the user a way to easily implement in-page tabs. The only difference is that the Footer tabs control allows you to add a relevant icon as well.

Footer Tabs Control
Footer Tabs Control

Footer Tabs are usually preferred in scenarios where you do not want to access page content simultaneously. Like say for example, on e-commerce websites, there are product descriptions that may be categorized as technical specs, product specs, warranty info, and so on. The Footer Tabs control allows you to add tabs as required and display content based on rules depending upon the selected Tab. With Footer tabs, you can set the State of the Selected tab by changing the background color, font color, border colors, and so on.


Minimum Tab WidthDetermines the spacing between the tabs.
Icon SizeAdjusts the size of the icon, allowing for increasing or decreasing the size.
Border ColorSpecifies the color of the borders of the tabs.
Font PropertiesIncludes settings for text size, weight (Light, Normal, Bold, etc.), alignment, and color of the tab labels.

Selected State

BorderSelects the borders to be displayed on selection.
WidthSpecifies the width of the selected border.
StyleSets the style of the selected border line (solid, dashed, dotted, or none).
ColorDefines the color of the border of the selected tab.
Font ColorSpecifies the color of the font of the selected tab.
BackgroundSpecifies the background color for the selected tab.

Control Outputs

The outputs from the Select Bar control, represented by the placeholder {{footer_tab}}, can be referenced in other controls, data queries, or JavaScript functions using the control's unique name.

footer_tabRepresents the user-selected values from the Footer Tab control.