---
title: "UIKit tab components"
date: "2020-11-19T10:54:29+00:00"
summary: "Explore UIKit's tab components for flexible content layouts. Learn how to implement horizontal and vertical tabs, customize styles, and enhance user experience with easy-to-use options for marketers and developers."
image:
type: "page"
url: "/drupal-starter-kits/add-ons/site-studio/uikit-tab-components"
id: "4ce2efa3-d1a6-4327-a881-657b8fd2645c"
---

Table of contents will be added

Tab components are used for adding tabbed content to a layout. There are three tab components included with the UIKit,  each of which is documented below.

Tabs container -  horizontal tabs component
-------------------------------------------

The Tabs container - horizontal tabs provide the container for each Tab item to be **displayed in a row** above the content. Important information to understand about the component is listed below.

### Layout canvas elements

*   **Container -** The container must optionally add a margin below the tabbed content or add a background color to the tabbed content.
*   **Accordion tabs container -** The Accordion tabs container provides the tabs' functionality and the style for the tabs navigation.

Important

The style for the tabs navigation would normally be applied to each Tab item. For the UIKit, the style has been applied to the **Accordion tabs container** to make it more convenient for content authors to apply the style in one place. This has been achieved using Custom styles that target the tab navigation elements. These styles within the **Generic** custom style category and are: **Accordion tabs keyline light text**, **Accordion tabs keyline dark text**, and **Accordion tabs solid**.

### Component form fields

*   **Tab position** - Select the desired tab alignment.
*   **Navigation style** - Sets the style of the tab navigation links. 
*   **Background color** - Sets a background color on the tab container.
*   **Add space below** - Adds a space (margin) below the tab container. This is required if a space is desirable when adding this component above another component within the same parent layout component.

Tabs container -  vertical tabs component
-----------------------------------------

**The Tabs container - vertical tabs** provides the container for each Tab item to be **displayed vertically** to the left of the content. Important information to understand about the component is listed below.

### Layout canvas elements

*   **Container -** The container is required to optionally add a margin below the tabbed content or to add a background color to the tabbed content.
*   **Accordion tabs container -** The Accordion tabs container provides the tabs' functionality and the style for the tabs navigation. 

Important

Within the **Accordion container Styles tab** there is a **Modifier** that applies additional space between the Tabs and the Tab content.

Important

The style for the tabs navigation would normally be applied to each Tab item. For the UIKit, the style has been applied to the **Accordion tabs container** to make it more convenient for content authors to apply the style in one place. This has been achieved using Custom styles that target the tab navigation elements. These styles within the **Generic** custom style category and are: **Accordion tabs keyline light text**, **Accordion tabs keyline dark text** and **Accordion tabs solid**.

### Component form fields

*   **Navigation style** - Sets the style of the tab navigation links.
*   **Add space between navigation and content -** Adds additional space between the tabs and the navigation
*   **Background color** - Sets a background color on the tab container.
*   **Add space below** - Adds a space (margin) below the tab container. This is required if a space is desirable when adding this component above another component within the same parent layout component.

Tab item component
------------------

The Tab item provides each tab navigation bar.

### Layout canvas fields

*   **Accordion tabs item -** Provides the navigation bar
*   **Container -** Provides a wrapping div to the content to optionally apply padding around the content

### Component form fields

*   **Navigation label -** Provides the text for the tab navigation buttons.
*   **Background color -** Adds a background color to each individual tab content area.
*   **Padding around content -** Adds padding around the content within the Accordion item.