Sidebar

Menu lateral de navegação com módulos expansíveis. Apenas um módulo pode ficar aberto por vez — ao clicar em outro, o anterior fecha. Chevron aparece no hover e rotaciona quando ativo. Dark mode automático via tokens semânticos.

components/sidebar.cssAbrir no Figma

Exemplo

Clique nos módulos para expandir/colapsar. Apenas um fica aberto por vez.

Propriedades

Classes disponíveis para configurar o sidebar.

Propriedade	Tipo	Default	Descrição
.sidebar	classe	—	Container principal (340px, padding 24px).
.sidebar-back	classe	—	Botão voltar com ícone left (opcional).
.sidebar-nav	classe	—	Lista de módulos (gap 8px).
.sidebar-module	classe	—	Container de um módulo (header + subitens).
.is-open	classe	—	Expande o módulo (mostra subitens, rotaciona chevron).
.sidebar-module-header	classe	—	Header clicável (ícone + label + chevron, 40px).
.sidebar-module-icon	classe	—	Ícone do módulo (18x18).
.sidebar-module-label	classe	—	Texto do módulo (p3 medium).
.sidebar-module-chevron	classe	—	Chevron down (16x16, hidden por padrão, visível no hover/ativo).
.sidebar-module-items	classe	—	Container dos subitens (hidden quando fechado).
.sidebar-module-line	classe	—	Linha vertical separadora (1px, border-default).
.sidebar-module-list	classe	—	Lista vertical de subitens.
.sidebar-module-item	classe	—	Subitem clicável (40px, com seta right no hover).
.is-active	classe	—	Marca o subitem como ativo.
.sidebar-item-arrow	classe	—	Seta direita do subitem (16x16, hidden por padrão).

Código

Snippets prontos para copiar e usar.

Estrutura base

<nav class="sidebar">
    <!-- Botão voltar (opcional) -->
    <button class="sidebar-back">
        <svg viewBox="0 0 48 48" fill="none" stroke="currentColor"
             stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
            <path d="M31 36L19 24l12-12"/>
        </svg>
        Voltar
    </button>

    <div class="sidebar-nav">
        <!-- Módulo expandido -->
        <div class="sidebar-module is-open">
            <button class="sidebar-module-header">
                <span class="sidebar-module-icon">
                    <svg><!-- ícone do módulo 18x18 --></svg>
                </span>
                <span class="sidebar-module-label">Nome do módulo</span>
                <span class="sidebar-module-chevron">
                    <svg viewBox="0 0 48 48" fill="none" stroke="currentColor"
                         stroke-width="3" stroke-linecap="round"
                         stroke-linejoin="round">
                        <path d="M36 18L24 30 12 18"/>
                    </svg>
                </span>
            </button>
            <div class="sidebar-module-items">
                <div class="sidebar-module-line"></div>
                <div class="sidebar-module-list">
                    <a class="sidebar-module-item is-active" href="#">
                        <span>Subitem ativo</span>
                        <span class="sidebar-item-arrow">
                            <svg viewBox="0 0 48 48" fill="none"
                                 stroke="currentColor" stroke-width="3"
                                 stroke-linecap="round" stroke-linejoin="round">
                                <path d="M18 12l12 12-12 12"/>
                            </svg>
                        </span>
                    </a>
                    <a class="sidebar-module-item" href="#">
                        <span>Outro subitem</span>
                        <span class="sidebar-item-arrow">
                            <svg viewBox="0 0 48 48" fill="none"
                                 stroke="currentColor" stroke-width="3"
                                 stroke-linecap="round" stroke-linejoin="round">
                                <path d="M18 12l12 12-12 12"/>
                            </svg>
                        </span>
                    </a>
                </div>
            </div>
        </div>

        <!-- Módulo fechado -->
        <div class="sidebar-module">
            <button class="sidebar-module-header">
                <span class="sidebar-module-icon">
                    <svg><!-- ícone --></svg>
                </span>
                <span class="sidebar-module-label">Outro módulo</span>
                <span class="sidebar-module-chevron">
                    <svg viewBox="0 0 48 48" fill="none" stroke="currentColor"
                         stroke-width="3" stroke-linecap="round"
                         stroke-linejoin="round">
                        <path d="M36 18L24 30 12 18"/>
                    </svg>
                </span>
            </button>
            <div class="sidebar-module-items">
                <div class="sidebar-module-line"></div>
                <div class="sidebar-module-list">
                    <a class="sidebar-module-item" href="#">
                        <span>Subitem</span>
                        <span class="sidebar-item-arrow">
                            <svg viewBox="0 0 48 48" fill="none"
                                 stroke="currentColor" stroke-width="3"
                                 stroke-linecap="round" stroke-linejoin="round">
                                <path d="M18 12l12 12-12 12"/>
                            </svg>
                        </span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</nav>

Comportamento com JavaScript

// Apenas um módulo aberto por vez
document.querySelectorAll('.sidebar-module-header').forEach(function(btn) {
    btn.addEventListener('click', function() {
        var module = btn.closest('.sidebar-module');
        var wasOpen = module.classList.contains('is-open');

        // Fecha todos
        document.querySelectorAll('.sidebar-module.is-open').forEach(function(m) {
            m.classList.remove('is-open');
        });

        // Abre o clicado (se não estava aberto)
        if (!wasOpen) module.classList.add('is-open');
    });
});

Versão0.1.0

Última atualização

Caminho