1. Overview

Tab is a composite element made up of four distinct layers, a Container, a Tab Header, Tab Items, and Tab Panels.

1. Tab Container - The outermost wrapper that holds the entire Tab element, including the tab header and all tab panels.
   
2. Tab Header - The navigation area that displays all tab items and lets users switch between them.
   
3. Tab Item - An individual tab within the header, identified by a label or icon, that represents a distinct section of content.
   
4. Tab Panel - The content area associated with each tab item. It acts as a container in itself and can hold any element or preset available in the portal page designer.
   

Note: A Tab element can contain a maximum of 15 tab items.

The element has 8 presets to choose from, each handling a different initial orientation and visual styling. Once added to the building space, they can be customized using their display and styling properties.

Ideal for:

1. Dashboard layouts with multiple data views or sections
   
2. Settings pages where different categories of options are organized into tabs
   
3. Profile pages with sections such as Overview, Activity, and Settings
   
4. Any page where grouping related content reduces scrolling and keeps users in context
   

2. Display properties

The tab element has the following display properties when clicked on:

Property	Description
Element Name	The internal identifier for this Tab element. This name is auto-generated on placing within the designer and can be customized as required.
Label Type	The label of a tab item can be customized to show either a: Icon and Text - Shows both a glyph and a label on each tab item Text Only - Shows only the label on each tab item
Tab item listing	This section has a set of manage actions for each tab item: Label - The visible text displayed on the tab item. Icon - The glyph shown on the tab item when Label Type is Icon and Text. Tab link name - A unique internal identifier for the tab item. This link name is auto-generated on placing within the designer and can be customized as required. Reordering tab items - A specific tab item can be dragged vertically to change the tab sequence using the reorder icon (). Visibility - You can show or hide the tab item from the live portal page using the eye icon (). Hidden tabs retain their panel content and can be restored when required. Note: One visible tab must always be available at any time. When only one visible tab remains, it cannot be hidden or deleted. Deletion - You can delete a tab item and its associated panel by hovering over the tab item in the listing and clicking the bin icon (). Tab addition - New tabs can be added using Add New Tab option from the Display tab.
Default Tabs	The active tab that is displayed when the portal page initially loads.

3. Styling properties

The Tab element is styled across four independent layers, Container, Tab Header, Tab Item, and Tab Panel. The tab item supports three interaction states, Default, Hover, and Active each of which can be styled independently.

1. Tab styling
   
2. Background
   
3. Border
   
4. Margin
   
5. Padding
   
6. Corner Radius
7. Shadow
   

4. Try it yourself

Add a Tab element and try the following:

1. Select an icon-and-text horizontal preset. Open the Display tab and change each tab's label to match the page sections, for example, Overview, Activity, and Settings.
   
2. Style the tab item's Default state with a muted text color, Hover with a slightly lighter background, and Active with a solid background and a contrasting text color.
   
3. Add a V-Stack inside the Overview panel and drop Text and Image elements into it to populate the panel with content.
   
4. Switch to a vertical preset and set the Tab element's Width to a fixed pixel value to create a sidebar-style tab navigation.
   
5. Apply Shadow at Elevation 2 to the Container and a Corner Radius of 12px to give the full Tab element a card-like appearance.
   

5. Related topics

1. Configuring and managing portal pages
   
2. Tab styling *link*