Sidebar
Barra lateral com a navegação principal do app, na borda esquerda. Grupos de links com nome, a página atual marcada, contadores do que está esperando e uma faixa de ícones quando falta espaço.
Instalação
Configure o Camaleo uma vez (Instalação) e importe o que precisar. Ele renderiza no cliente.
import { Sidebar, SidebarHeader, SidebarNav, SidebarGroup, SidebarItem, SidebarFooter, SidebarToggle } from "@camaleo/react";Anatomia
Um <aside> com três linhas. Só o nav rola, então a marca e o rodapé ficam sempre à vista. SidebarBrand e SidebarContent são outros nomes para SidebarHeader e SidebarNav.
Exemplos
Cada exemplo é um arquivo de verdade que você pode copiar. Todos usam o estilo, o modo e a cor da barra acima. Aperte Tab para passar pelos links.
Recolher para uma faixa
Aperte o botão lá embaixo. Os rótulos somem da tela, mas continuam dando nome a cada link para leitores de tela, e uma dica mostra o nome no hover e no foco.
Página atual
Clique num link. current coloca aria-current="page", e a barrinha ao lado mostra a página sem depender só da cor.
Com o seu roteador
Passe render={<NextLink href="…" />}. O roteador cuida do clique sem recarregar a página, e o item mantém o estilo. Aqui o current vem do caminho, então o link para esta página fica marcado.
Contadores que fazem sentido ouvidos
O número é lido como parte do nome do link, então ponha a unidade num VisuallyHidden: "Entrada 12 não lidas", e não "Entrada 12".
Seções aninhadas
Um projeto com páginas próprias abre no lugar com um Collapsible. O cabeçalho dele é um botão, porque só mostra links e não leva a lugar nenhum.
Menu da conta no rodapé
A pessoa e as configurações dela ficam embaixo, longe das páginas. O menu abre para cima quando não há espaço abaixo.
No celular, numa gaveta
A Sidebar não tem um modo próprio para celular. Abaixo de uma largura, esconda a barra e ponha os mesmos links num Drawer à esquerda, que prende o foco e o devolve ao botão de menu.
Em contexto
São partes inteiras de interface que você pode copiar, no estilo que escolheu.
Boas práticas
Dois ou três títulos deixam a pessoa pular direto para a parte do app que ela procura.
Sem grupos, a pessoa lê todos os links para achar um, e páginas parecidas ficam longe uma da outra.
Nomes curtos cabem na coluna e são rápidos de ler. A página pode ter um título mais longo.
Rótulos longos são cortados, e as palavras que diferenciam um do outro são justamente as que somem.
Props
onCollapseChange.SidebarToggle (ou useSidebar().setCollapsed) muda a barra.O SidebarItem aceita href, icon, count e current, e também render para usar o link do seu roteador no lugar do a. O SidebarGroup aceita label. O SidebarToggle aceita collapseLabel e expandLabel; passe os dois no idioma da página (o padrão é "Collapse sidebar" e "Expand sidebar"). O useSidebar() lê e muda o estado de qualquer parte dentro da barra.
Styling hooks
Mude o visual sem copiar o componente: use os atributos ou defina os tokens num elemento pai, num estilo ou na própria barra.
Atributos
Tokens que ele lê
Cor
Forma e tamanho
Tipografia e movimento
Só deste componente
/* uma barra mais larga e uma faixa mais fina */
.app [data-slot="sidebar"] {
--cml-sidebar-width: 16rem;
--cml-sidebar-rail-width: 3.25rem;
}Acessibilidade
- Os links ficam num <nav>. Dê um aria-label, como "Principal", para ele aparecer pelo nome entre as regiões da página.
- Os grupos são role="group" e levam o nome do rótulo, então o leitor de tela diz "Espaço de trabalho, grupo" quando você entra num deles.
- O botão de recolher tem aria-expanded e um nome que diz o que ele vai fazer. Na faixa, cada link mantém o nome completo; só o rótulo some da tela.
- A página atual recebe aria-current="page", uma barrinha e um peso maior, não só uma cor.