Tab

Componente estável e recomendada para novos projetos.

Anatomia, uso, comportamento visual e recomendações conceituais são mantidos pelo Padrão Digital de Governo. Esta página documenta a implementação Web Components e sua API executável.

Visão Geral

Para a documentação completa, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o Design System do GovBR.

Exemplo(s)

Desktop (100%)

Tablet - 768px

iPhone (iOS) - 390x844

Android - 360x800

Compartilhar URL

Mudar fundo

Abrir no StackBlitz

Tela cheia

HTML

Controles

JS

CSS

Console

Angular (Somente leitura)

React (Somente leitura)

Vue (Somente leitura)

Acessibilidade

Recolher controles e código

Formatar código

Resetar código para o estado inicial

Copiar para a área de transferência

Propriedades

activeTabId

Atributo	active-tab-id
Descrição	ID do tab atualmente ativo
Tipo	string
Valor padrão	''

alignItemsTab Componente mantido por compatibilidade; prefira a alternativa indicada na documentação.

Atributo	align-items-tab
Depreciação	Use alignment.
Descrição	Define o alinhamento horizontal dos itens da tab na barra de navegação.
Tipo	"center" | "end" | "start"
Valor padrão	'start'

alignment

Atributo	alignment
Descrição	Alinhamento horizontal canônico. Quando informado, tem precedência sobre alignItemsTab.
Tipo	"center" | "end" | "start"
Valor padrão	---

colorMode

Atributo	color-mode
Descrição	Define se o Tab usará um esquema de cores escuro.
Tipo	"dark"
Valor padrão	---

customId

Atributo	custom-id
Descrição	Identificador único do componente. Quando omitido, um valor é gerado automaticamente. > Padrão: valor único gerado por generateUniqueId().
Tipo	string
Valor padrão	generateUniqueId()

density

Atributo	density
Descrição	Define a densidade visual do componente. - small: Alta densidade (componente menor, mais compacto e com menos espaçamento). - medium: Densidade intermediária, padrão recomendado para a maioria dos casos. - large: Baixa densidade (componente maior, mais espaçamento e altura).
Tipo	"large" | "medium" | "small"
Valor padrão	'medium'

height

Atributo	height
Descrição	Define a altura máxima da área de conteúdo, ativando o scroll interno quando o conteúdo ultrapassa essa altura.
Tipo	string
Valor padrão	---

label

Atributo	label
Descrição	Label de acessibilidade para a navegação das tabs
Tipo	string
Valor padrão	'Abas de Navegação'

scrollDisabled Componente mantido por compatibilidade; prefira a alternativa indicada na documentação.

Atributo	scroll-disabled
Depreciação	Use scrollable.
Descrição	Desabilita o scroll automático da área de conteúdo. Por padrão, o scroll vertical fica apenas na região de conteúdo.
Tipo	boolean
Valor padrão	false

scrollable

Atributo	scrollable
Descrição	Controla o scroll interno. Quando informado, tem precedência sobre scrollDisabled.
Tipo	boolean
Valor padrão	---

Migração de <br-tab> para a composição atual (1.x → 2.x)

A 1.x registrava br-tab e br-tab-item como elementos Vue. Na 2.x, use a composição atual com br-tab como contêiner e br-tab-item para cada aba.

Propriedades e composição

API 1.x	API 2.x	Ação na migração
—	activeTabId, alignment, scrollable	Use para controlar a aba ativa e o comportamento do conjunto.
counter	conteúdo/propriedade do br-tab-item	Mova para o item da aba.
density	density	Mantenha.
inverted	colorMode	Renomeie.
label	label	Mantenha no item correspondente.

Exemplo

1.x:

<br-tab :tabs="tabs" inverted></br-tab>

2.x:

<br-tab active-tab-id="inicio" color-mode="inverted">
  <br-tab-item id="inicio" label="Início">Conteúdo</br-tab-item>
  <br-tab-item id="ajuda" label="Ajuda">Conteúdo</br-tab-item>
</br-tab>

Slots

Nome	Descrição
"default"	Slot para inserir os itens das abas (br-tab-item)

Eventos

Evento	Descrição	Depreciação	Propagação
brTabChange	Evento disparado quando um tab é ativado.	---	true

Métodos

getActiveTab

Descrição	Retorna o identificador da aba ativa atual.
Assinatura	getActiveTab() => Promise<string | undefined>
Parâmetros	---

setActiveTab

Descrição	Ativa programaticamente uma aba a partir do seu identificador.
Assinatura	setActiveTab(tabId: string) => Promise<void>
Parâmetros	tabId: Identificador da aba (tab-item-id).

CSS Shadow Parts

Nome	Descrição
"button"	Botão individual de cada aba.
"container"	Contêiner principal que envolve toda a estrutura do componente (navegação e conteúdo). Expõe o elemento para customizações de fundo, bordas e espaçamentos globais.
"content"	Área de conteúdo das abas.
"indicator"	Indicador visual da aba ativa.
"nav"	Área de navegação (tablist) onde os botões das abas estão localizados. Permite customizar o alinhamento, espaçamento e plano de fundo da barra de abas.

Dependências

Subcomponentes

• br-tab-item

Depende de

• br-icon
• br-divider

Gráfico