CmSidebar
Use como navegação principal de apps internos. Em páginas longas, a navegação fica presa na viewport e o menu rola internamente quando necessário.
Import
import { CmSidebar } from "cosmemilton-ui/client";Navegação lateral
Exemplo em modo standalone para previews, drawers ou uso dentro de CmAppShell.
Slot belowGroups + divisória
Conteúdo logo após o menu (switcher de projetos com CmStatusDot), separado por belowGroupsDivider.
Ícones nos itens
Subitens com icon próprio: o trilho vira conectores entre os ícones e nunca passa por cima deles; sem icon, o item usa o marcador (bolinha) como nó.
Estilos de trilho (rail)
As três opções da prop rail lado a lado: connectors (padrão, segmentos entre os ícones), edge (linha contínua à esquerda do painel) e chip (linha contínua com pastilha atrás do ícone).
API rápida
Props principais de cada peça exportada.
CmSidebar
Notas
O ícone do título vem de brand.icon. Passe texto curto como "AA" para iniciais, ou qualquer ReactNode de ícone.
Sem brand.icon, o componente usa a primeira letra textual de brand.title como fallback.
Cada item de grupo também aceita icon (ReactNode). Com ícones, o trilho dos subitens vira conectores entre um ícone e o outro; sem icon, o subitem exibe um marcador (bolinha) como nó do trilho.
A prop rail escolhe o estilo do trilho: "connectors" (padrão, segmentos entre os ícones), "edge" (linha contínua encostada à esquerda do painel) ou "chip" (linha contínua com pastilha opaca atrás de cada ícone).
Use standalone quando quiser renderizar apenas a navegação, por exemplo dentro de CmAppShell ou em previews.
Quando CmSidebar recebe children, ele compõe uma shell de duas colunas: sidebar fixa na viewport e conteúdo rolando na página.
belowGroups renderiza conteúdo logo após o menu, dentro da área rolável (ex.: switcher de projetos com CmStatusDot); some no modo colapsado. footer fica preso no rodapé.
belowGroupsDivider desenha uma linha entre o menu e belowGroups, alinhada ao recuo dos itens.