Pular para o conteúdo
Smart UIVATSE interface system
VATSE.DEV
← Catálogonavigation · stable

Mega menu

Menus de múltiplas colunas para navegação com conteúdo. A documentação abaixo separa composição, comportamento e adaptação visual de cada variante.

QUANDO USAR

Use Mega menu quando a interface precisar de menus de múltiplas colunas para navegação com conteúdo.

QUANDO NÃO USAR

Evite a família quando uma composição semântica mais simples comunicar a mesma ação com menos carga visual.

TECLADO

A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.

RESPONSIVO

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

Ver prévias
CONTAINER · stable

Menu simples

Menu simples, preservado do laboratório original e isolado para uso e teste independente.

#
Link direto →
HTML e exemplo
<div class="sc-menu">
                    <button class="sc-btn sc-btn-glass" type="button" data-menu-trigger="">Menu</button>
                    <div class="sc-menu-popover">
                      <button class="sc-menu-item" type="button">Perfil</button>
                      <button class="sc-menu-item" type="button">Configurações</button>
                      <div class="sc-menu-sep"></div>
                      <button class="sc-menu-item" type="button">Sair</button>
                    </div>
                  </div>
Classes, JavaScript e API
sc-menusc-btnsc-btn-glasssc-menu-popoversc-menu-itemsc-menu-sep

Inicialize menus após o DOM. Os atributos data-* do exemplo são a API declarativa.

Plugin
menus
Dependências
smart-ui.js
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Foco visível e ordem de leitura preservados.
  • Rótulos acessíveis devem acompanhar controles sem texto.
  • A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.

Não depende de movimento contínuo.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

CONTAINER · stable

Ações rápidas

Ações rápidas, preservado do laboratório original e isolado para uso e teste independente.

#
Link direto →
HTML e exemplo
<div style="display:flex; gap:12px; flex-wrap:wrap; align-items:center;">
                    <div class="sc-menu">
                      <button class="sc-btn sc-btn-outline" type="button" data-menu-trigger="">Ações</button>
                      <div class="sc-menu-popover">
                        <button class="sc-menu-item" type="button">Duplicar</button>
                        <button class="sc-menu-item" type="button">Renomear</button>
                        <button class="sc-menu-item" type="button">Exportar</button>
                        <div class="sc-menu-sep"></div>
                        <button class="sc-menu-item" type="button">Excluir</button>
                      </div>
                    </div>
                    <div class="sc-menu">
                      <button class="sc-btn sc-btn-primary" type="button" data-menu-trigger="">Novo</button>
                      <div class="sc-menu-popover">
                        <button class="sc-menu-item" type="button">Projeto</button>
                        <button class="sc-menu-item" type="button">Template</button>
                        <button class="sc-menu-item" type="button">Pasta</button>
                      </div>
                    </div>
                  </div>
Classes, JavaScript e API
sc-menusc-btnsc-btn-outlinesc-menu-popoversc-menu-itemsc-menu-sepsc-btn-primary

Inicialize menus após o DOM. Os atributos data-* do exemplo são a API declarativa.

Plugin
menus
Dependências
smart-ui.js
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Foco visível e ordem de leitura preservados.
  • Rótulos acessíveis devem acompanhar controles sem texto.
  • A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.

Não depende de movimento contínuo.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

CONTAINER · stable

Ícones

Ícones, preservado do laboratório original e isolado para uso e teste independente.

#
Link direto →
HTML e exemplo
<div class="sc-menu">
                    <button class="sc-btn sc-btn-glass" type="button" data-menu-trigger="">Mais</button>
                    <div class="sc-menu-popover">
                      <button class="sc-menu-item" type="button">
                        <span style="display:inline-flex; gap:10px; align-items:center;">
                          <i class="sc-icon" data-smart-icon="paperclip"></i> Anexar
                        </span>
                        <span class="doc-muted">Ctrl+U</span>
                      </button>
                      <button class="sc-menu-item" type="button">
                        <span style="display:inline-flex; gap:10px; align-items:center;">
                          <i class="sc-icon" data-smart-icon="star"></i> Favoritar
                        </span>
                        <span class="doc-muted">F</span>
                      </button>
                      <button class="sc-menu-item" type="button">
                        <span style="display:inline-flex; gap:10px; align-items:center;">
                          <i class="sc-icon" data-smart-icon="folder"></i> Mover
                        </span>
                        <span class="doc-muted">M</span>
                      </button>
                    </div>
                  </div>
Classes, JavaScript e API
sc-menusc-btnsc-btn-glasssc-menu-popoversc-menu-itemsc-icon

Inicialize menus após o DOM. Os atributos data-* do exemplo são a API declarativa.

Plugin
menus
Dependências
smart-ui.js
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Foco visível e ordem de leitura preservados.
  • Rótulos acessíveis devem acompanhar controles sem texto.
  • A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.

Não depende de movimento contínuo.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

CONTAINER · stable

Alinhado à esquerda

Alinhado à esquerda, preservado do laboratório original e isolado para uso e teste independente.

#
Link direto →
HTML e exemplo
<div class="sc-menu">
                    <button class="sc-btn sc-btn-outline" type="button" data-menu-trigger="">Filtro</button>
                    <div class="sc-menu-popover sc-menu-popover--left">
                      <button class="sc-menu-item" type="button">Todos</button>
                      <button class="sc-menu-item" type="button">Ativos</button>
                      <button class="sc-menu-item" type="button">Arquivados</button>
                    </div>
                  </div>
Classes, JavaScript e API
sc-menusc-btnsc-btn-outlinesc-menu-popoversc-menu-popover--leftsc-menu-item

Inicialize menus após o DOM. Os atributos data-* do exemplo são a API declarativa.

Plugin
menus
Dependências
smart-ui.js
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Foco visível e ordem de leitura preservados.
  • Rótulos acessíveis devem acompanhar controles sem texto.
  • A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.

Não depende de movimento contínuo.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

CONTAINER · stable

Wide

Wide, preservado do laboratório original e isolado para uso e teste independente.

#
Link direto →
HTML e exemplo
<div class="sc-menu">
                    <button class="sc-btn sc-btn-primary" type="button" data-menu-trigger="">Criar</button>
                    <div class="sc-menu-popover sc-menu-popover--wide">
                      <button class="sc-menu-item" type="button">
                        <span style="display:inline-flex; gap:10px; align-items:center;"><i class="sc-icon" data-smart-icon="file-text"></i> Documento</span>
                      </button>
                      <button class="sc-menu-item" type="button">
                        <span style="display:inline-flex; gap:10px; align-items:center;"><i class="sc-icon" data-smart-icon="bar-chart"></i> Planilha</span>
                      </button>
                      <button class="sc-menu-item" type="button">
                        <span style="display:inline-flex; gap:10px; align-items:center;"><i class="sc-icon" data-smart-icon="pen"></i> Design</span>
                      </button>
                    </div>
                  </div>
Classes, JavaScript e API
sc-menusc-btnsc-btn-primarysc-menu-popoversc-menu-popover--widesc-menu-itemsc-icon

Inicialize menus após o DOM. Os atributos data-* do exemplo são a API declarativa.

Plugin
menus
Dependências
smart-ui.js
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Foco visível e ordem de leitura preservados.
  • Rótulos acessíveis devem acompanhar controles sem texto.
  • A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.

Não depende de movimento contínuo.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

CONTAINER · stable

Header + grupos

Header + grupos, preservado do laboratório original e isolado para uso e teste independente.

#
Link direto →
HTML e exemplo
<div class="sc-menu">
                    <button class="sc-btn sc-btn-glass" type="button" data-menu-trigger="">Config</button>
                    <div class="sc-menu-popover sc-menu-popover--wide">
                      <div class="doc-muted" style="padding: 8px 10px;">Preferências</div>
                      <button class="sc-menu-item" type="button">Tema</button>
                      <button class="sc-menu-item" type="button">Idioma</button>
                      <div class="sc-menu-sep"></div>
                      <div class="doc-muted" style="padding: 8px 10px;">Conta</div>
                      <button class="sc-menu-item" type="button">Segurança</button>
                      <button class="sc-menu-item" type="button">Sair</button>
                    </div>
                  </div>
Classes, JavaScript e API
sc-menusc-btnsc-btn-glasssc-menu-popoversc-menu-popover--widesc-menu-itemsc-menu-sep

Inicialize menus após o DOM. Os atributos data-* do exemplo são a API declarativa.

Plugin
menus
Dependências
smart-ui.js
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Foco visível e ordem de leitura preservados.
  • Rótulos acessíveis devem acompanhar controles sem texto.
  • A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.

Não depende de movimento contínuo.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

CONTAINER · stable

Trigger ícone (compact)

Trigger ícone (compact), preservado do laboratório original e isolado para uso e teste independente.

#
Link direto →
HTML e exemplo
<div class="sc-menu">
                    <button class="sc-btn sc-btn-ghost sc-btn-icon" type="button" aria-label="Abrir menu" data-menu-trigger="">
                      <i class="sc-icon" data-smart-icon="more-horizontal"></i>
                    </button>
                    <div class="sc-menu-popover">
                      <button class="sc-menu-item" type="button"><span style="display:inline-flex; gap:10px; align-items:center;"><i class="sc-icon" data-smart-icon="copy"></i> Copiar</span></button>
                      <button class="sc-menu-item" type="button"><span style="display:inline-flex; gap:10px; align-items:center;"><i class="sc-icon" data-smart-icon="edit"></i> Editar</span></button>
                      <div class="sc-menu-sep"></div>
                      <button class="sc-menu-item is-danger" type="button"><span style="display:inline-flex; gap:10px; align-items:center;"><i class="sc-icon" data-smart-icon="trash"></i> Excluir</span></button>
                    </div>
                  </div>
Classes, JavaScript e API
sc-menusc-btnsc-btn-ghostsc-btn-iconsc-iconsc-menu-popoversc-menu-itemsc-menu-sep

Inicialize menus após o DOM. Os atributos data-* do exemplo são a API declarativa.

Plugin
menus
Dependências
smart-ui.js
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Foco visível e ordem de leitura preservados.
  • Rótulos acessíveis devem acompanhar controles sem texto.
  • A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.

Não depende de movimento contínuo.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

CONTAINER · stable

Itens com badge (status)

Itens com badge (status), preservado do laboratório original e isolado para uso e teste independente.

#
Link direto →
HTML e exemplo
<div class="sc-menu">
                    <button class="sc-btn sc-btn-outline" type="button" data-menu-trigger="">Status</button>
                    <div class="sc-menu-popover">
                      <button class="sc-menu-item" type="button"><span>Todos</span><span class="sc-badge sc-badge-secondary">124</span></button>
                      <button class="sc-menu-item" type="button"><span>Ativos</span><span class="sc-badge sc-badge-success">38</span></button>
                      <button class="sc-menu-item" type="button"><span>Em revisão</span><span class="sc-badge sc-badge-info">7</span></button>
                      <button class="sc-menu-item" type="button"><span>Bloqueados</span><span class="sc-badge sc-badge-danger">3</span></button>
                    </div>
                  </div>
Classes, JavaScript e API
sc-menusc-btnsc-btn-outlinesc-menu-popoversc-menu-itemsc-badgesc-badge-secondarysc-badge-successsc-badge-infosc-badge-danger

Inicialize menus após o DOM. Os atributos data-* do exemplo são a API declarativa.

Plugin
menus
Dependências
smart-ui.js
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Foco visível e ordem de leitura preservados.
  • Rótulos acessíveis devem acompanhar controles sem texto.
  • A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.

Não depende de movimento contínuo.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

CONTAINER · stable

Perfil (header + ações)

Perfil (header + ações), preservado do laboratório original e isolado para uso e teste independente.

#
Link direto →
HTML e exemplo
<div class="sc-menu">
                    <button class="sc-btn sc-btn-glass" type="button" data-menu-trigger="">
                      <span style="display:inline-flex; gap:10px; align-items:center;">
                        <i class="sc-icon" data-smart-icon="user-circle"></i> Conta
                      </span>
                    </button>
                    <div class="sc-menu-popover sc-menu-popover--wide">
                      <div class="doc-muted" style="padding: 8px 10px;">logado como <strong>usuário</strong></div>
                      <button class="sc-menu-item" type="button"><span style="display:inline-flex; gap:10px; align-items:center;"><i class="sc-icon" data-smart-icon="user-circle"></i> Perfil</span></button>
                      <button class="sc-menu-item" type="button"><span style="display:inline-flex; gap:10px; align-items:center;"><i class="sc-icon" data-smart-icon="settings"></i> Preferências</span></button>
                      <div class="sc-menu-sep"></div>
                      <button class="sc-menu-item is-danger" type="button"><span style="display:inline-flex; gap:10px; align-items:center;"><i class="sc-icon" data-smart-icon="log-out"></i> Sair</span></button>
                    </div>
                  </div>
Classes, JavaScript e API
sc-menusc-btnsc-btn-glasssc-iconsc-menu-popoversc-menu-popover--widesc-menu-itemsc-menu-sep

Inicialize menus após o DOM. Os atributos data-* do exemplo são a API declarativa.

Plugin
menus
Dependências
smart-ui.js
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Foco visível e ordem de leitura preservados.
  • Rótulos acessíveis devem acompanhar controles sem texto.
  • A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.

Não depende de movimento contínuo.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

CONTAINER · stable

Checklist (menuitemcheckbox)

Checklist (menuitemcheckbox), preservado do laboratório original e isolado para uso e teste independente.

#
Link direto →
HTML e exemplo
<div class="sc-menu">
                    <button class="sc-btn sc-btn-outline" type="button" data-menu-trigger="">Colunas</button>
                    <div class="sc-menu-popover">
                      <button class="sc-menu-item" type="button" role="menuitemcheckbox" aria-checked="true">
                        <span style="display:inline-flex; gap:10px; align-items:center;"><span class="sc-menu-check"><i class="sc-icon" data-smart-icon="check"></i></span> Nome</span>
                        <span class="doc-muted">N</span>
                      </button>
                      <button class="sc-menu-item" type="button" role="menuitemcheckbox" aria-checked="true">
                        <span style="display:inline-flex; gap:10px; align-items:center;"><span class="sc-menu-check"><i class="sc-icon" data-smart-icon="check"></i></span> Status</span>
                        <span class="doc-muted">S</span>
                      </button>
                      <button class="sc-menu-item" type="button" role="menuitemcheckbox" aria-checked="false">
                        <span style="display:inline-flex; gap:10px; align-items:center;"><span class="sc-menu-check"><i class="sc-icon" data-smart-icon="check"></i></span> Tags</span>
                        <span class="doc-muted">T</span>
                      </button>
                    </div>
                  </div>
Classes, JavaScript e API
sc-menusc-btnsc-btn-outlinesc-menu-popoversc-menu-itemsc-menu-checksc-icon

Inicialize menus após o DOM. Os atributos data-* do exemplo são a API declarativa.

Plugin
menus
Dependências
smart-ui.js
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Foco visível e ordem de leitura preservados.
  • Rótulos acessíveis devem acompanhar controles sem texto.
  • A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.

Não depende de movimento contínuo.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

WIDE · stable

Command palette

Command palette, composição própria do Smart UI para produtos e experiências digitais.

#
Link direto →
HTML e exemplo
<div class="sc-menu sc-showcase-menu"><button class="sc-btn sc-btn-outline sc-menu-trigger" type="button">Command palette</button><div class="sc-card sc-showcase-menu-panel"><strong>Command palette</strong><div class="sc-grid sc-cols-2"><a href="/components/">Operação</a><a href="/templates/crm/">Clientes</a><a href="/templates/analytics/">Dados</a><a href="/docs/customization/">Configuração</a></div></div></div>
Classes, JavaScript e API
sc-menusc-showcase-menusc-btnsc-btn-outlinesc-menu-triggersc-cardsc-showcase-menu-panelsc-gridsc-cols-2

Inicialize menus após o DOM. Os atributos data-* do exemplo são a API declarativa.

Plugin
menus
Dependências
smart-ui.js
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Mantém contraste de texto e foco visível.
  • Conteúdo e ações permanecem disponíveis sem animação.
  • A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.

Possui fallback para prefers-reduced-motion.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

WIDE · stable

Product matrix

Product matrix, composição própria do Smart UI para produtos e experiências digitais.

#
Link direto →
HTML e exemplo
<div class="sc-menu sc-showcase-menu"><button class="sc-btn sc-btn-outline sc-menu-trigger" type="button">Product matrix</button><div class="sc-card sc-showcase-menu-panel"><strong>Product matrix</strong><div class="sc-grid sc-cols-2"><a href="/components/">Operação</a><a href="/templates/crm/">Clientes</a><a href="/templates/analytics/">Dados</a><a href="/docs/customization/">Configuração</a></div></div></div>
Classes, JavaScript e API
sc-menusc-showcase-menusc-btnsc-btn-outlinesc-menu-triggersc-cardsc-showcase-menu-panelsc-gridsc-cols-2

Inicialize menus após o DOM. Os atributos data-* do exemplo são a API declarativa.

Plugin
menus
Dependências
smart-ui.js
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Mantém contraste de texto e foco visível.
  • Conteúdo e ações permanecem disponíveis sem animação.
  • A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.

Possui fallback para prefers-reduced-motion.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

Componentes relacionados

Navegação →Rodapés →Tabs →Breadcrumbs →