Skip link
Visão Geral
Para a documentação completa, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o Design System do GovBR.
Exemplos
Simple
Carregando exemplo
Formatar código
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Compound
Carregando exemplo
Formatar código
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Propriedades
customId
| Atributo | custom-id |
| Descrição | Identificador único do componente. Quando omitido, um valor é gerado automaticamente. > Padrão: valor único gerado por Helpers.generateUniqueId(). > Uso compartilhado: mantenha esta descrição idêntica em todos os componentes que usam customId. |
| Tipo | string |
| Valor padrão | Helpers.generateUniqueId() |
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. |
| 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. |
| 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. |
| Tipo | number |
| Valor padrão | null |
Slots
| Nome | Descrição |
|---|---|
"default" | Slot para inserir os itens de navegação rápida (br-skiplink-item). |
Eventos
| Evento | Descrição | Propagação |
|---|---|---|
brDidHide | Evento emitido quando o skiplink se torna oculto. | true |
brDidShow | Evento emitido quando o skiplink se torna visível. | true |
brSkiplinkNavigation | Evento emitido quando um item do skiplink é ativado. O evento contém informações sobre o item acionado e o elemento target. | true |
Métodos
hide
| Assinatura | hide() => Promise<void> |
| Descrição | Oculta o componente programaticamente. |
| Parâmetros | --- |
show
| Assinatura | show() => Promise<void> |
| Descrição | Exibe o componente programaticamente. |
| 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(). |