Layout & chrome
cosmemilton-ui/client

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

tsx
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.

API rápida

Props principais de cada peça exportada.

CmSidebar

groupsbrand.icon/title/subtitle/iconLabelactivePathnamelinkComponentcollapsedstandalonebelowGroupsbelowGroupsDividerfootertonedensity

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.

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.