VTEX Developer Portal

All ContributorsAll Contributors

The Tab Layout app provides you the needed structure to create different layouts within the store's main one from the use of tabs.

tab-layouttab-layout
Example of an brazilian VTEX store with tabs (Perfumes até 40%off, Presentes, and Best Sellers) displaying different content for users.

Configuration

  1. Add the Tab Layout app to your theme's dependencies in the manifest.json file:
 "dependencies": {
+  "vtex.tab-layout": "0.x"
 }

Now, you are able to use all the blocks exported by the tab-layou app. Check out the full list below:

Block nameDescription
tab-layouthttps://img.shields.io/badge/-Mandatory-redhttps://img.shields.io/badge/-Mandatory-red Parent block that merely defines the logic (via its children blocks) for the layout structure, declaring the desired list of tabs and its content.
tab-listhttps://img.shields.io/badge/-Mandatory-redhttps://img.shields.io/badge/-Mandatory-red Defines the list of tabs to be rendered. It only accepts the tab-list.item block as child.
tab-list.itemhttps://img.shields.io/badge/-Mandatory-redhttps://img.shields.io/badge/-Mandatory-red Defines the rendering for a given tab. Notice that it does not define the tab content, which is handled by the tab-content.item block.
tab-list.item.childrenFlexible alternative to tab-list.item. Defines the rendering for a given tab and also accepts any array of blocks as its children.
tab-contenthttps://img.shields.io/badge/-Mandatory-redhttps://img.shields.io/badge/-Mandatory-red Defines the list of content to be rendered in each tab. It only accepts the tab-content.item block as child.
tab-content.itemhttps://img.shields.io/badge/-Mandatory-redhttps://img.shields.io/badge/-Mandatory-red Defines the content for a given tab.
  1. In the desired page tempate, such as store.home, add the tab-layout block:
"store.home": {
  "blocks": [
    "tab-layout#home
  ]
},
  1. Declare the tab-list and the tab-content blocks as tab-layout's children. Do not forget to use the tab-layout's props, for example:
  "store.home": {
    "blocks": [
      "tab-layout#home
    ]
  },
+ "tab-layout#home": 
+   "children": [
+     "tab-list#home",
+     "tab-content#home"
+   ],
+   "props": {
+     "blockClass": "home",
+     "defaultActiveTabId": "home1"
+   }
+ },
  1. Add and then declare the desired tab-list.item blocks as tab-list's children:
  "store.home": {
    "blocks": [
      "tab-layout#home
    ]
  },
  "tab-layout#home": 
    "children": [
      "tab-list#home",
      "tab-content#home"
    ],
    "props": {
      "blockClass": "home",
      "defaultActiveTabId": "home1"
    }
  },
+ "tab-list#home": {
+   "children": [
+     "tab-list.item#home1",
+     "tab-list.item#home2"
+   ]
+ },
+ "tab-list.item#home1": {
+   "props": {
+     "tabId": "home1",
+     "label": "Home 1",
+     "defaultActiveTab": true
+   }
+ },
+ "tab-list.item#home2": {
+   "props": {
+     "tabId": "home2",
+     "label": "Home 2"
+   }
+ },
  1. Add and then declare the desired tab-content.item blocks as tab-content's children:
  "store.home": {
    "blocks": [
      "tab-layout#home
    ]
  },
  "tab-layout#home": 
    "children": [
      "tab-list#home",
      "tab-content#home"
    ],
    "props": {
      "blockClass": "home",
      "defaultActiveTabId": "home1"
    }
  },
  "tab-list#home": {
    "children": [
      "tab-list.item#home1",
      "tab-list.item#home2"
    ]
  },
  "tab-list.item#home1": {
    "props": {
      "tabId": "home1",
      "label": "Home 1",
      "defaultActiveTab": true
    }
  },
  "tab-list.item#home2": {
    "props": {
      "tabId": "home2",
      "label": "Home 2"
    }
  },
+ "tab-content#home": {
+   "children": [
+     "tab-content.item#home1",
+     "tab-content.item#home2"
+   ]
+ },
+ "tab-content.item#home1": {
+   "children": [
+     "carousel#home"
+   ],
+   "props": {
+     "tabId": "home1"
+   }
+ },
+ "tab-content.item#home2": {
+   "children": [
+     "shelf#home",
+     "info-card#home",
+     "rich-text#question",
+     "rich-text#link",
+     "newsletter"
+   ],
+   "props": {
+     "tabId": "home2"
+   }
+ }

Do not forget to also declare the tab-content.item's children blocks in order to properly render the tab content.

tab-layout props

Prop nameTypeDescriptionDefault value
defaultActiveTabIdstringID of the desired tab to be rendered as the default one. If no value is provided, the first tab declared in the theme will be used as default.undefined
blockClassstringBlock ID of your choosing to be used in CSS customization.undefined

tab-list props

Prop nameTypeDescriptionDefault value
blockClassstringBlock ID of your choosing to be used in CSS customization.undefined

tab-list.item props

Prop nameTypeDescriptionDefault value
blockClassstringBlock ID of your choosing to be used in CSS customization.undefined
tabIdstringTab ID of your choosing. It will be used to match the tab to its content (defined by the tab-content.item block).undefined
labelstringDefines the tab's text label.undefined

tab-list.item.children props

Prop nameTypeDescriptionDefault value
blockClassstringBlock ID of your choosing to be used in CSS customization.undefined
tabIdstringTab ID of your choosing. It will be used to match the tab to a given content (defined by the tab-content.item block).undefined

tab-content props

Prop nameTypeDescriptionDefault value
blockClassstringBlock ID of your choosing to be used in CSS customization.undefined

tab-content.item props

Prop nameTypeDescriptionDefault value
blockClassstringBlock ID of your choosing to be used in CSS customization.undefined
tabIdstringTab ID of your choosing. It will be used to match the content to a given tab (defined by the tab-list.item / tab-list.item.children blocks).undefined

️ *Pay attention to the chosen tab ID declared in both tab-list.item and tab-content.item blocks, once it is the key to link a given tab to its content.

Customization

In order to apply CSS customizations in this and other blocks, follow the instructions given in the recipe on Using CSS Handles for store customization.

CSS Handle
container
contentContainer
contentItem
listContainer
listItem
listItemActive
listItemChildren
listItemChildrenActive

Contributors ✨

Thanks goes to these wonderful people:

This project follows the all-contributors specification. Contributions of any kind welcome!

Updated 7 months ago


Tab Layout


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.