Skip Link

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

O componente br-skip-link é o bloco essencial de acessibilidade posicionado no topo da página, permitindo que pessoas que utilizam teclado ou tecnologias assistivas saltem blocos repetitivos e acessem diretamente áreas principais da aplicação.

Para que serve

• Atalho de teclado imediato: Fornece links diretos ("Ir para o conteúdo principal", "Ir para o menu", "Ir para a busca", "Ir para o rodapé") logo no primeiro acionamento da tecla Tab.
• Conformidade WCAG obrigatória: Atende ao critério de sucesso 2.4.1 (Bypass Blocks) da WCAG 2.1, essencial para portais e serviços públicos.
• Comportamento visual discreto: Permanece oculto visualmente por padrão, tornando-se visível imediatamente assim que recebe o foco do teclado.

Quando utilizar

• Utilize quando:
  • Obrigatoriamente em todas as páginas e aplicações do GovBR-DS, posicionado como o primeiro elemento interativo do corpo do documento.
• Evite e prefira outro componente quando:
  • O link tiver a intenção de navegação comum no corpo do texto (use br-link).

Composição e Subcomponentes

Subcomponente	Papel	Regra de uso
br-skip-link-item	Item individual de atalho. Especifica o destino e o texto do salto.	Declarado no slot padrão do br-skip-link.
br-skip-link	Orquestrador de atalhos. Agrupa a lista de links rápidos e gerencia visibilidade no foco.	Deve ser o primeiro elemento interativo no topo da página.

Como os subcomponentes se relacionam

O br-skip-link atua como contêiner que abriga múltiplos elementos br-skip-link-item. Cada item referencia o id do elemento de destino na página (ex.: #main-content), conduzindo o foco imediatamente para a região desejada.

Para a documentação completa de design, incluindo diretrizes de acessibilidade e especificações visuais, consulte o Design System do GovBR.

Exemplo(s)

Desktop (100%)

Tablet - 768px

iPhone (iOS) - 390x844

Android - 360x800

PadrãoLista composta

Compartilhar URL

Ativar movimento reduzido

Mudar fundo

Abrir no StackBlitz

Mais opções

Tela cheia

Carregando preview…

HTML

Controles do componente

Console: logs, eventos e erros

Angular (Somente leitura)

React (Somente leitura)

Vue (Somente leitura)

Acessibilidade

Recolher controles e código

Desfazer alteração

Refazer alteração

Comparar alterações

Formatar código

Resetar código para o estado inicial

Escolher formato para copiar

Propriedades

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()

open

Atributo	open
Descrição	Controla se o skip link está aberto.
Tipo	boolean
Valor padrão	false

position

Atributo	position
Descrição	Define a posição do skip link na tela. - 'top-left': Posicionado no canto superior esquerdo. - 'top-center': Posicionado no centro superior. - 'top-right': Posicionado no canto superior direito. Valores inválidos usam 'top-left'.
Tipo	"top-center" | "top-left" | "top-right"
Valor padrão	'top-left'

showItemCount

Atributo	show-item-count
Descrição	Exibe a contagem de itens no formato (1/4), (2/4), etc. Quando true, cada item mostrará sua posição relativa ao total de itens. Por padrão, é true para o modo simple e false para o modo compound.
Tipo	boolean
Valor padrão	---

variant

Atributo	variant
Descrição	Define se o skip link apresenta um ou múltiplos itens visíveis. - 'simple': Exibe apenas um item por vez. - 'compound': Exibe uma lista com múltiplos itens. Valores inválidos usam 'compound'.
Tipo	"compound" | "simple"
Valor padrão	'compound'

zIndex

Atributo	z-index
Descrição	Define o z-index do componente. Controla a ordem de empilhamento do componente na página. Deve ser um inteiro entre 0 e Number.MAX_SAFE_INTEGER; valores inválidos usam 0.
Tipo	number
Valor padrão	null

Slots

Nome	Descrição
"default"	Slot para inserir os itens de navegação rápida (br-skip-link-item). A tag br-skiplink-item é aceita por compatibilidade.

Eventos

Evento	Descrição	Depreciação	Propagação
brDidHide Componente mantido por compatibilidade; prefira a alternativa indicada na documentação.		Use brSkipLinkHide.	true
brDidShow Componente mantido por compatibilidade; prefira a alternativa indicada na documentação.		Use brSkipLinkShow.	true
brSkipLinkHide	Evento canônico emitido ao ocultar o componente.	---	true
brSkipLinkNavigate	Evento canônico emitido quando um destino é ativado.	---	true
brSkiplinkNavigation Componente mantido por compatibilidade; prefira a alternativa indicada na documentação.		Use brSkipLinkNavigate.	true
brSkipLinkShow	Evento canônico emitido ao exibir o componente.	---	true

Métodos

hide

Descrição	Oculta o componente programaticamente.
Assinatura	hide() => Promise<void>
Parâmetros	---

show

Descrição	Exibe o componente programaticamente.
Assinatura	show() => Promise<void>
Parâmetros	---

CSS Shadow Parts

Nome	Descrição
"container"	Parte para o contêiner principal do componente skip-link, usada para estilização via ::part().

Dependências

Subcomponentes

• br-skip-link-item
• br-skiplink-item

Depende de

• br-list

Gráfico