---
updatedAt: 2025-05-14T08:15:39.000Z
agentTools:
projectIndex: https://learn.vtex.com/llms.txt
---
# Layout de abas
{`
`}
# Layout de abas
## Introdução
O [Tab Layout](https://developers.vtex.com/docs/guides/tab-layout) é um paradigma de estruturação de *layouts* criado no Store Framework para permitir a construção de *layouts* com abas ou guias.
Neste paradigma, temos dois containers: o `tab-list` e o `tab-content`. Em cada um destes containers, temos os itens que os compõem. Dentro do `tab-list`, temos os `tab-list.item`. Já no `tab-content`, temos os `tab-content.item`.
Abaixo, veremos um exemplo de implementação de um *tab layout*.
Primeiro, é necessário declarar o block `tab-layout` no *template* desejado:
```json
{
"store.home": {
"blocks": [..."tab-layout"]
}
}
```
Depois, é necessário declarar um `tab-list` e um `tab-content` como children do `tab-layout`:
```json
...
"tab-layout": {
"children": [
"tab-list",
"tab-content"
]
}
```
Com isso, temos esses dois containers como componentes do nosso `tab-layout`. O próximo passo é declarar os `tab-list.item` e `tab-content.item` como children do `tab-list` e do `tab-content`, respectivamente:
```json
...
"tab-list": {
"children": [
"tab-list.item#1",
"tab-list.item#2"
]
}
```
```json
...
"tab-content": {
"children": [
"tab-content.item#1",
"tab-content.item#2"
]
}
```
Na próxima etapa, temos que declarar as propriedades dos `tab-list.item`. O código abaixo gera uma interface de tabs como a desta imagem:
A propriedade `tabId` é muito importante, pois ela é a chave que conecta o botão de um `tab-list.item` com um `tab-content.item`.
```json
...
"tab-list.item#1": {
"props": {
"tabId": "majorAppliances",
"label": "Major Appliances",
"defaultActiveTab": true
}
},
"tab-list.item#2": {
"props": {
"tabId": "electronics",
"label": "Electronics"
}
}
```
A seguir, vamos declarar as *children* e as *props* dos `tab-content.item`.
No *array* de *children*, é possível incluir diversos blocos como `rich-text`, `info-card`, `image`, `flex-layout` e etc.
Na prop `tabId`, é necessário incluir os mesmos identificadores (*ids*) declarados nos `tab-list.item` para que o *link* entre a aba e o conteúdo funcione.
```json
...
"tab-content.item#1": {
"children": [
"rich-text#1"
],
"props": {
"tabId": "majorAppliances"
}
},
"tab-content.item#2": {
"children": [
"rich-text#2"
],
"props": {
"tabId": "electronics"
}
}
```
Por fim, você deve declarar as propriedades do seu conteúdo. No nosso exemplo, colocamos apenas um `rich-text` em cada `tab-content.item`:
```json
"rich-text#1": {
"props": {
"text": "Texto para Major Appliances",
"textPosition": "CENTER",
"font": "t-heading-3"
}
},
"rich-text#2": {
"props": {
"text": "Texto para Electronics",
"textPosition": "CENTER",
"font": "t-heading-3"
}
}
```
## Atividade
Nesta atividade, vamos criar a estrutura simples de um *tab layout*, conforme imagem abaixo. Mais tarde, vamos incluir algum conteúdo para estilizar nossa página customizada.
1. No arquivo `home.jsonc` criado anteriormente, adicione um `tab-layout#home`;
2. Declare o bloco `tab-layout#home` e adicione como seus filhos um `tab-list#home` e um `tab-content#home`;
3. Declare um `tab-list#home` e adicione como seus filhos um `tab-list.item#home1` e um `tab-list.item#home2`;
4. Declare as props do `tab-list.item#home1` de maneira que a interface exiba o texto "Major Appliances". (Dica: não se esqueça que incluir nas props um `tabId` = `"majorAppliances"` e a propriedade `defaultActiveTab` = `true`);
5. Declare as *props* do `tab-list.item#home2` de maneira que a interface exiba o texto "Electronics". (Dica: não se esqueça que incluir nas props um `tabId` = `"electronics"`);
6. Agora, vamos para a parte o conteúdo. Declare um `tab-content#home` no seu tema e adicione os filhos `tab-content.item#home1` e `tab-content.item#home2`;
7. Em cada `tab-content.item`, declare apenas um `rich-text` como filho (por exemplo, `rich-text#home1` e `rich-text#home2`);
8. Depois, inclua uma *prop* `tabId` em cada `tab-content.item` de maneira que aconteça o *link* entre o `tab-list` criado anteriormente e `tab-content`;
9. Por fim, adicione os `rich-text` e declare suas *props* conforme o código abaixo:
```json
"rich-text#home1": {
"props": {
"text": "Área do conteúdo da tab-list.item com tabId = majorAppliances",
"textPosition": "CENTER",
"font": "t-heading-3"
}
},
"rich-text#home2": {
"props": {
"text": "Área do conteúdo da tab-list.item com tabId = electronics",
"textPosition": "CENTER",
"font": "t-heading-3"
}
}
```
Note: Lembre-se de acessar a documentação [Tab Layout](https://developers.vtex.com/docs/guides/tab-layout) e do [Rich Text](https://developers.vtex.com/docs/guides/vtex-rich-text) caso tenha alguma dúvida durante a atividade.
### Está com dúvidas?
Veja o [gabarito para esta etapa](https://learn.vtex.com/docs/course-layout-blocks-step05tab-layout-answersheet-lang-pt) ou acompanhe nosso \[office hours] no canal VTEX Developers()
Ajude-nos a fazer este conteúdo melhor!
Os cursos do VTEX IO são de código aberto. Se você perceber algum problema, pode abrir um pull request!