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

App sidebar

Estrutura de aplicações com navegação lateral e conteúdo fluido. A documentação abaixo separa composição, comportamento e adaptação visual de cada variante.

QUANDO USAR

Use App sidebar quando a interface precisar de estrutura de aplicações com navegação lateral e conteúdo fluido.

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

O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

RESPONSIVO

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

Ver prévias
WIDE · stable

Base

Estrutura de aplicações com navegação lateral e conteúdo fluido.

#
Link direto →
HTML e exemplo
<article class="sc-app-sidebar">App sidebar</article>
Classes, JavaScript e API
sc-app-sidebarsc-app-navsc-app-page

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin
CSS-first
Dependências
Nenhuma
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Usar HTML semântico e foco visível.
  • Fornecer rótulo acessível quando não houver texto visível.
  • O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

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.

VIEWPORT · stable

Compact

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

#
Link direto →
HTML e exemplo
<section class="sc-showcase-app"><aside class="sc-showcase-sidebar sc-showcase-sidebar-1"><strong>NORTH</strong><nav><a class="is-active" href="/templates/dashboard/">Visão geral</a><a href="/templates/portfolio/">Projetos</a><a href="/templates/support/">Mensagens</a><a href="/docs/customization/">Configuração</a></nav><small>Compact</small></aside><main><span class="sc-badge">Compact</span><h2>Área de trabalho</h2><div class="sc-grid sc-cols-2"><article class="sc-card">Indicador 01</article><article class="sc-card">Indicador 02</article></div></main></section>
Classes, JavaScript e API
sc-showcase-appsc-showcase-sidebarsc-showcase-sidebar-1sc-badgesc-gridsc-cols-2sc-card

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin
CSS-first
Dependências
Nenhuma
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.
  • O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

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.

VIEWPORT · stable

Rail

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

#
Link direto →
HTML e exemplo
<section class="sc-showcase-app"><aside class="sc-showcase-sidebar sc-showcase-sidebar-2"><strong>NORTH</strong><nav><a class="is-active" href="/templates/dashboard/">Visão geral</a><a href="/templates/portfolio/">Projetos</a><a href="/templates/support/">Mensagens</a><a href="/docs/customization/">Configuração</a></nav><small>Rail</small></aside><main><span class="sc-badge">Rail</span><h2>Área de trabalho</h2><div class="sc-grid sc-cols-2"><article class="sc-card">Indicador 01</article><article class="sc-card">Indicador 02</article></div></main></section>
Classes, JavaScript e API
sc-showcase-appsc-showcase-sidebarsc-showcase-sidebar-2sc-badgesc-gridsc-cols-2sc-card

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin
CSS-first
Dependências
Nenhuma
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.
  • O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

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.

VIEWPORT · stable

Workspace

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

#
Link direto →
HTML e exemplo
<section class="sc-showcase-app"><aside class="sc-showcase-sidebar sc-showcase-sidebar-3"><strong>NORTH</strong><nav><a class="is-active" href="/templates/dashboard/">Visão geral</a><a href="/templates/portfolio/">Projetos</a><a href="/templates/support/">Mensagens</a><a href="/docs/customization/">Configuração</a></nav><small>Workspace</small></aside><main><span class="sc-badge">Workspace</span><h2>Área de trabalho</h2><div class="sc-grid sc-cols-2"><article class="sc-card">Indicador 01</article><article class="sc-card">Indicador 02</article></div></main></section>
Classes, JavaScript e API
sc-showcase-appsc-showcase-sidebarsc-showcase-sidebar-3sc-badgesc-gridsc-cols-2sc-card

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin
CSS-first
Dependências
Nenhuma
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.
  • O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

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.

VIEWPORT · stable

Commerce

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

#
Link direto →
HTML e exemplo
<section class="sc-showcase-app"><aside class="sc-showcase-sidebar sc-showcase-sidebar-1"><strong>NORTH</strong><nav><a class="is-active" href="/templates/dashboard/">Visão geral</a><a href="/templates/portfolio/">Projetos</a><a href="/templates/support/">Mensagens</a><a href="/docs/customization/">Configuração</a></nav><small>Commerce</small></aside><main><span class="sc-badge">Commerce</span><h2>Área de trabalho</h2><div class="sc-grid sc-cols-2"><article class="sc-card">Indicador 01</article><article class="sc-card">Indicador 02</article></div></main></section>
Classes, JavaScript e API
sc-showcase-appsc-showcase-sidebarsc-showcase-sidebar-1sc-badgesc-gridsc-cols-2sc-card

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin
CSS-first
Dependências
Nenhuma
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.
  • O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

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.

VIEWPORT · stable

Analytics

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

#
Link direto →
HTML e exemplo
<section class="sc-showcase-app"><aside class="sc-showcase-sidebar sc-showcase-sidebar-2"><strong>NORTH</strong><nav><a class="is-active" href="/templates/dashboard/">Visão geral</a><a href="/templates/portfolio/">Projetos</a><a href="/templates/support/">Mensagens</a><a href="/docs/customization/">Configuração</a></nav><small>Analytics</small></aside><main><span class="sc-badge">Analytics</span><h2>Área de trabalho</h2><div class="sc-grid sc-cols-2"><article class="sc-card">Indicador 01</article><article class="sc-card">Indicador 02</article></div></main></section>
Classes, JavaScript e API
sc-showcase-appsc-showcase-sidebarsc-showcase-sidebar-2sc-badgesc-gridsc-cols-2sc-card

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin
CSS-first
Dependências
Nenhuma
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.
  • O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

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.

VIEWPORT · stable

Support

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

#
Link direto →
HTML e exemplo
<section class="sc-showcase-app"><aside class="sc-showcase-sidebar sc-showcase-sidebar-3"><strong>NORTH</strong><nav><a class="is-active" href="/templates/dashboard/">Visão geral</a><a href="/templates/portfolio/">Projetos</a><a href="/templates/support/">Mensagens</a><a href="/docs/customization/">Configuração</a></nav><small>Support</small></aside><main><span class="sc-badge">Support</span><h2>Área de trabalho</h2><div class="sc-grid sc-cols-2"><article class="sc-card">Indicador 01</article><article class="sc-card">Indicador 02</article></div></main></section>
Classes, JavaScript e API
sc-showcase-appsc-showcase-sidebarsc-showcase-sidebar-3sc-badgesc-gridsc-cols-2sc-card

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin
CSS-first
Dependências
Nenhuma
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.
  • O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

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.

VIEWPORT · stable

Project

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

#
Link direto →
HTML e exemplo
<section class="sc-showcase-app"><aside class="sc-showcase-sidebar sc-showcase-sidebar-1"><strong>NORTH</strong><nav><a class="is-active" href="/templates/dashboard/">Visão geral</a><a href="/templates/portfolio/">Projetos</a><a href="/templates/support/">Mensagens</a><a href="/docs/customization/">Configuração</a></nav><small>Project</small></aside><main><span class="sc-badge">Project</span><h2>Área de trabalho</h2><div class="sc-grid sc-cols-2"><article class="sc-card">Indicador 01</article><article class="sc-card">Indicador 02</article></div></main></section>
Classes, JavaScript e API
sc-showcase-appsc-showcase-sidebarsc-showcase-sidebar-1sc-badgesc-gridsc-cols-2sc-card

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin
CSS-first
Dependências
Nenhuma
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.
  • O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

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.

VIEWPORT · stable

Media

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

#
Link direto →
HTML e exemplo
<section class="sc-showcase-app"><aside class="sc-showcase-sidebar sc-showcase-sidebar-2"><strong>NORTH</strong><nav><a class="is-active" href="/templates/dashboard/">Visão geral</a><a href="/templates/portfolio/">Projetos</a><a href="/templates/support/">Mensagens</a><a href="/docs/customization/">Configuração</a></nav><small>Media</small></aside><main><span class="sc-badge">Media</span><h2>Área de trabalho</h2><div class="sc-grid sc-cols-2"><article class="sc-card">Indicador 01</article><article class="sc-card">Indicador 02</article></div></main></section>
Classes, JavaScript e API
sc-showcase-appsc-showcase-sidebarsc-showcase-sidebar-2sc-badgesc-gridsc-cols-2sc-card

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin
CSS-first
Dependências
Nenhuma
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.
  • O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

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.

VIEWPORT · stable

Settings

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

#
Link direto →
HTML e exemplo
<section class="sc-showcase-app"><aside class="sc-showcase-sidebar sc-showcase-sidebar-3"><strong>NORTH</strong><nav><a class="is-active" href="/templates/dashboard/">Visão geral</a><a href="/templates/portfolio/">Projetos</a><a href="/templates/support/">Mensagens</a><a href="/docs/customization/">Configuração</a></nav><small>Settings</small></aside><main><span class="sc-badge">Settings</span><h2>Área de trabalho</h2><div class="sc-grid sc-cols-2"><article class="sc-card">Indicador 01</article><article class="sc-card">Indicador 02</article></div></main></section>
Classes, JavaScript e API
sc-showcase-appsc-showcase-sidebarsc-showcase-sidebar-3sc-badgesc-gridsc-cols-2sc-card

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin
CSS-first
Dependências
Nenhuma
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.
  • O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

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.

Componentes relacionados

Chat UI →Kanban card →Inbox item →Search e filtros →