Tab Layout by vtex

${"base64":" ","img":{"width":110,"height":20,"type":"svg","mime":"image/svg+xml","wUnits":"px","hUnits":"px","url":"https://img.shields.io/badge/all_contributors-3-orange.svg?style=flat-square"}}$

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


Example of a storefront with tabs (`Perfumes até 40%off`, `Presentes`, and `Best Sellers`) displaying different content for users.

Configuration

Add the Tab Layout app to your theme's dependencies in the manifest.json file:


_10{
_10 "dependencies": {
_10   "vtex.tab-layout": "0.x"
_10  }
_10}

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

Block name	Description
`tab-layout`	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-list`	Defines the list of tabs to be rendered. It only accepts the `tab-list.item` block as a child.
`tab-list.item`	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.children`	Flexible alternative to `tab-list.item`. Defines the rendering for a given tab and also accepts any array of blocks as its children.
`tab-content`	Defines the list of content to be rendered in each tab. It only accepts the `tab-content.item` block as a child.
`tab-content.item`	Defines the content for a given tab.

In the desired page template (e.g., store.home), add the tab-layout block:


_10{
_10  "store.home": {
_10    "blocks": [
_10      "tab-layout#home"
_10    ]
_10  },

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:


_17{
_17  "store.home": {
_17    "blocks": [
_17      "tab-layout#home"
_17    ]
_17  },
_17  "tab-layout#home": {
_17    "children": [
_17      "tab-list#home",
_17      "tab-content#home"
_17    ],
_17    "props": {
_17      "blockClass": "home",
_17      "defaultActiveTabId": "home1"
_17    }
_17  }
_17}

Add and then declare the desired tab-list.item blocks as tab-list's children:


_36{
_36  "store.home": {
_36    "blocks": [
_36      "tab-layout#home"
_36    ]
_36  },
_36  "tab-layout#home": {
_36    "children": [
_36      "tab-list#home",
_36      "tab-content#home"
_36    ],
_36    "props": {
_36      "blockClass": "home",
_36      "defaultActiveTabId": "home1"
_36    }
_36  },
_36  "tab-list#home": {
_36    "children": [
_36      "tab-list.item#home1",
_36      "tab-list.item#home2"
_36    ]
_36  },
_36  "tab-list.item#home1": {
_36    "props": {
_36      "tabId": "home1",
_36      "label": "Home 1",
_36      "defaultActiveTab": true
_36    }
_36  },
_36  "tab-list.item#home2": {
_36    "props": {
_36      "tabId": "home2",
_36      "label": "Home 2"
_36    }
_36  }
_36}

Add and then declare the desired tab-content.item blocks as tab-content's children:


_62{
_62  "store.home": {
_62    "blocks": [
_62      "tab-layout#home"
_62    ]
_62  },
_62  "tab-layout#home": {
_62    "children": [
_62      "tab-list#home",
_62      "tab-content#home"
_62    ],
_62    "props": {
_62      "blockClass": "home",
_62      "defaultActiveTabId": "home1"
_62    }
_62  },
_62  "tab-list#home": {
_62    "children": [
_62      "tab-list.item#home1",
_62      "tab-list.item#home2"
_62    ]
_62  },
_62  "tab-list.item#home1": {
_62    "props": {
_62      "tabId": "home1",
_62      "label": "Home 1",
_62      "defaultActiveTab": true
_62    }
_62  },
_62  "tab-list.item#home2": {
_62    "props": {
_62      "tabId": "home2",
_62      "label": "Home 2"
_62    }
_62  },
_62  "tab-content#home": {
_62    "children": [
_62      "tab-content.item#home1",
_62      "tab-content.item#home2"
_62    ]
_62  },
_62  "tab-content.item#home1": {
_62    "children": [
_62      "carousel#home"
_62    ],
_62    "props": {
_62      "tabId": "home1"
_62    }
_62  },
_62  "tab-content.item#home2": {
_62    "children": [
_62      "shelf#home",
_62      "info-card#home",
_62      "rich-text#question",
_62      "rich-text#link",
_62      "newsletter"
_62    ],
_62    "props": {
_62      "tabId": "home2"
_62    }
_62  }
_62}

Make sure to declare the tab-content.item's children blocks in order to properly render the tab content.

`tab-layout` props

Prop name	Type	Description	Default value
`defaultActiveTabId`	`string`	ID 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`
`blockClass`	`string`	Block ID of your choosing to be used in CSS customization.	`undefined`

`tab-list` props

Prop name	Type	Description	Default value
`blockClass`	`string`	Block ID of your choosing to be used in CSS customization.	`undefined`

`tab-list.item` props

Prop name	Type	Description	Default value
`blockClass`	`string`	Block ID of your choosing to be used in CSS customization.	`undefined`
`tabId`	`string`	Tab ID of your choosing. It will be used to match the tab to its content (defined by the `tab-content.item` block).	`undefined`
`label`	`string`	Defines the tab's text label.	`undefined`
`defaultActiveTab`	`boolean`	Defines the item as the default active tab.	`false`

`tab-list.item.children` props

Prop name	Type	Description	Default value
`blockClass`	`string`	Block ID of your choosing to be used in CSS customization.	`undefined`
`tabId`	`string`	Tab 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 name	Type	Description	Default value
`blockClass`	`string`	Block ID of your choosing to be used in CSS customization.	`undefined`

`tab-content.item` props

Prop name	Type	Description	Default value
`blockClass`	`string`	Block ID of your choosing to be used in CSS customization.	`undefined`
`tabId`	`string`	Tab 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`

Be mindful of the tabID specified in both tab-list.item and tab-content.item blocks, as this parameter couples a tab and its corresponding 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`

Configuration

tab-layout props

tab-list props

tab-list.item props

tab-list.item.children props

tab-content props