Copiar página como Markdown para IA
Skip Link
Visão Geral
O br-skip-link fornece atalhos acessíveis de teclado no topo da página para saltar blocos repetitivos de conteúdo.
Posicione no início da página. Declare os atalhos usando elementos br-skip-link-item no slot padrão, apontando cada destino em target.
<br-skip-link>
<br-skip-link-item target="#conteudo-principal">Ir para o conteúdo</br-skip-link-item>
<br-skip-link-item target="#menu-navegacao">Ir para o menu</br-skip-link-item>
</br-skip-link>
O componente permanece oculto e se torna visível automaticamente assim que recebe o foco do teclado (Tab).
Quando usar
- No topo de todas as páginas para cumprir as diretrizes de acessibilidade (WCAG 2.4.1).
Quando evitar
- Links de navegação comuns no corpo do texto: use
br-link.
Consulte as diretrizes de design do GovBR.
Exemplo(s)
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
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 | Use brSkipLinkHide. | true | |
brDidShow | Use brSkipLinkShow. | true | |
brSkipLinkHide | Evento emitido ao ocultar o componente. | --- | true |
brSkipLinkNavigate | Evento emitido quando um destino é ativado. | --- | true |
brSkiplinkNavigation | Use brSkipLinkNavigate. | true | |
brSkipLinkShow | Evento 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(). |
