---
tags:
- UI Page widgets
alias: user-guide-uipage-widgets-tabs-widget
widgetname: Tabs
description: "This documentation explains how to use and customize a widget for displaying multiple related items in tabs"
---

# Tabs

![tabsWidget][tabsWidget]

## Overview

The Tabs widget allows a way to easily navigate and present widgets, as well as saving space. An example is show below, where a Tabs widget is used to navigate between an Entity Attachment widget and an Entity Details widget and an Entity History widget, set for the same **Material**.

![tabsWidgetExample][tabsWidgetExample]

!!! smart-barcode "Smart Barcode Scanning"
    This widget supports [[smart-barcode-scanning|Smart Barcodes]].

## General Steps

{% include-markdown 'includes/pages/ui_widgets_general_steps.md' %}

![tabsGeneral](images/tabs_general.png)

## Widget Customization

1. Optionally, in the **Style** tab, you can define a Border Width and Color.

    ![tabsStyle](images/tabs_style.png)

2. In the **Setup** tab, provide the following properties:

    * **Show Tabs** - Determine whether to display the tabs. This option is set to `true` by default.
    * **Enable Automatic Tab Rotation** - Determine whether the widget should automatically cycle through the different tabs. This option is set to `false` by default.
    * **Rotation Interval** - If **Enable Automatic Tab Rotation** is set to `true`, specify the interval for the tab rotation.

    ![Screenshot showing a widget customization settings page with an input field labeled "Rotation Interval" when automatic tab rotation is enabled.](images/tabs_setup.png)

3. In the **Tabs** section, define the number of tabs and configure their properties:

    * **Default** - Set this toggle button to `false` if you want to customize the behavior of the **Disabled** or **Visible** toggle buttons. Note that only one tab can be set as **Default** per widget.
    * **Disabled** - Specify whether the tab should be disabled. A disabled tab will not be accessible to users.
    * **Visible** - Determine whether the tab should be visible. If set to `false`, the tab will be hidden from the user interface.

    You can add as many tabs as needed and configure each tab's properties to suit your requirements.

    ![Screenshot showing a customizable tab interface with multiple tabs.](images/tabs_tabs.png)
  
4. Optionally, define the **Links** between this widget and other elements of the UI Page.

    ![Screenshot showing Wadget settings with links to unknown details and a new unsaved page.](images/tabs_links.png)

5. By saving and closing the settings, the widget will be changed accordingly.

[tabsWidget]: images/uiTabsWidget.png
[tabsWidgetExample]: images/uiPageExample14.gif