Pular para o conteúdo

DocsNavegaçãoBarra lateral

Navegação

Barra lateral

Navegação de app com usuário, busca, item ativo com contador e rodapé com equipe.

data-u="nav"

Exemplo

Instalação

Barra lateral vem no pacote completo, em unslop.css e unslop.js:

curl -fsSL unslop.leallabs.dev/i | sh

Um bloco pronto que usa barra lateral:

curl -fsSL unslop.leallabs.dev/i | sh -s add wall-sidebar

Sem build O add por nome serve pra gráficos e blocos. Componentes com JS moram em unslop.js, que monta sozinho todo data-u da página.

Props

Sem props. O registro nav move o aria-current pro item clicado.

Classes e variantes

ClasseO que faz
u-sideO nav da barra.
u-side__userLinha do usuário.
u-side__navLista de itens.
u-side__itemItem: button ou a. O ativo tem aria-current="page".
u-side__spacerEmpurra o rodapé pra baixo.

Acessibilidade e teclado

Estado e papéis

OndeAtributoO que diz
navaria-labelNomeie a navegação.
item ativoaria-current="page"O JS troca ao clicar. Link com href="#" não navega.

Teclado

TeclaFaz
Tabanda pelos itens
Enterativa o item

Digite pra buscar. Setas escolhem, Enter abre.