Navegação
Barra lateral
Navegação de app com usuário, busca, item ativo com contador e rodapé com equipe.
Exemplo
<article class="u-card u-wall" data-wall="sidebar">
<nav class="u-side" data-u="nav" aria-label="Navegação principal">
<div class="u-side__user"><span class="u-avatar u-avatar--sm">A</span><b>Ana Ribeiro <svg class="u-i" viewBox="0 0 24 24" aria-hidden="true"><path d="m7 15 5 5 5-5M7 9l5-5 5 5"/></svg></b><button type="button" class="u-btn u-btn--ghost u-btn--icon u-btn--sm" aria-label="Recolher menu"><svg class="u-i" viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M15 3v18"/></svg></button></div>
<label class="u-search"><svg class="u-i" viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg><input type="search" placeholder="Busca rápida" aria-label="Busca rápida"><kbd class="u-kbd">⌘L</kbd></label>
<div class="u-side__nav">
<button type="button" class="u-side__item" aria-current="page"><svg class="u-i" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 10.5 12 3l9 7.5V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z"/></svg>Principal<span class="u-side__count">152</span></button>
<button type="button" class="u-side__item"><svg class="u-i" viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M9 3v18M15 3v18"/></svg>Projetos</button>
<button type="button" class="u-side__item"><svg class="u-i" viewBox="0 0 24 24" aria-hidden="true"><path d="m3 11 18-5v12L3 14z"/><path d="M11.6 16.8a3 3 0 1 1-5.8-1.6"/></svg>Deploys</button>
<button type="button" class="u-side__item"><svg class="u-i" viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg>Calendário</button>
<button type="button" class="u-side__item"><svg class="u-i" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 22h18M6 18v-7M10 18v-7M14 18v-7M18 18v-7M12 2 3 7v2h18V7z"/></svg>Faturamento</button>
<button type="button" class="u-side__item"><svg class="u-i" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5v14M6 8l12 8M18 8 6 16"/></svg>Relatórios</button>
<button type="button" class="u-side__item"><svg class="u-i" viewBox="0 0 24 24" aria-hidden="true"><path d="M21 12a9 9 0 1 1-4-7.5"/><path d="M19 3v4M17 5h4"/></svg>Assistente</button>
<button type="button" class="u-side__item"><svg class="u-i" viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.1-3.1a2 2 0 0 0-2.8 0L6 21"/></svg>Automações</button>
<button type="button" class="u-side__item"><svg class="u-i" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M8 14s1.5 2 4 2 4-2 4-2M9 9h.01M15 9h.01"/></svg>Perfil</button>
</div>
<div class="u-side__spacer"></div>
<div class="u-side__nav">
<button type="button" class="u-side__item"><svg class="u-i" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 14v-2a9 9 0 0 1 18 0v2"/><path d="M21 15a2 2 0 0 1-2 2h-1v-6h1a2 2 0 0 1 2 2zM3 15a2 2 0 0 0 2 2h1v-6H5a2 2 0 0 0-2 2z"/></svg>Suporte</button>
<button type="button" class="u-side__item"><svg class="u-i" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 6h10M18 6h2M4 12h2M10 12h10M4 18h8M16 18h4"/><circle cx="16" cy="6" r="2"/><circle cx="8" cy="12" r="2"/><circle cx="14" cy="18" r="2"/></svg>Configurações</button>
</div>
<div class="u-side__team"><span class="u-avatar u-avatar--sm" data-c="1">L</span><div><b>leal labs</b><span>[email protected]</span></div><svg class="u-i" viewBox="0 0 24 24" aria-hidden="true" style="color:var(--fg-3)"><path d="m6 9 6 6 6-6"/></svg></div>
</nav>
</article>Instalação
Barra lateral vem no pacote completo, em unslop.css e unslop.js:
curl -fsSL unslop.leallabs.dev/i | shUm bloco pronto que usa barra lateral:
curl -fsSL unslop.leallabs.dev/i | sh -s add wall-sidebarSem 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
| Classe | O que faz |
|---|---|
u-side | O nav da barra. |
u-side__user | Linha do usuário. |
u-side__nav | Lista de itens. |
u-side__item | Item: button ou a. O ativo tem aria-current="page". |
u-side__spacer | Empurra o rodapé pra baixo. |
Acessibilidade e teclado
Estado e papéis
| Onde | Atributo | O que diz |
|---|---|---|
| nav | aria-label | Nomeie a navegação. |
| item ativo | aria-current="page" | O JS troca ao clicar. Link com href="#" não navega. |
Teclado
| Tecla | Faz |
|---|---|
| Tab | anda pelos itens |
| Enter | ativa o item |